Menu icon Foundation

Designer | Los Angeles, CA

My Posts


My Comments

Mihai Stroe commented on Marek Simko's post almost 6 years

1.) ) _settings.scss essentially offers some main options for global values as well as component-specific stuff, definitely look through it and uncomment what you need. Whatever isn't in there you'll need to look up and override in your custom scss.

2.) I have started using foundation on v5 but from what I've seen v4 had everything in app.scss but commented. v5 doesn't do that and instead you should just comment out/remove

@import "foundation";

then add each component individually

@import "foundation/components/COMPONENT_NAME";

The components can be found under

bower_components/foundation/scss/foundation/components

Further help:

http://foundation.zurb.com/forum/posts/277-custom-css-with-sass

http://foundation.zurb.com/forum/posts/718-what-to-do-after-installing-foundation-with-sass

http://foundation.zurb.com/forum/posts/771-how-to-customize-foundation-with-sass

Mihai Stroe commented on pulla's post almost 6 years

@Rafi

That's a good move, looking forward to it.

Mihai Stroe commented on Charles Smith's post almost 6 years

@Lowell

To change the heading fonts you would do it via your own custom partial whether you choose to have _type.scss imported or not. Make sure to have your custom scss import after the Foundation scss and you're good to start overriding.

Mihai Stroe commented on mario martinez's post almost 6 years

I'd be interested in something like this well so +1.

Mihai Stroe commented on Charles Smith's post almost 6 years

The entire directory you're not supposed to change is bower_components, everything else that's at top level is there for you to do with as you please. It would be possible to override anything you want in custom partials but you'd have to either copy the variables out of settings OR hunt down all individual classes via Firebug or by looking through the Foundation partials one by one.

If you import your custom styles after the Foundation stuff then your styles would be able to override.

Mihai Stroe commented on Rafael Hegre Cabeza's post almost 6 years

That works.

Mihai Stroe commented on Charles Smith's post almost 6 years

@Anthony

That's something you should change in the settings partial, inspect the entire file to see what's available to change in there first. If you can't find Foundation properties you're looking to change in there then you can go ahead and create your own styles.

For example if you take a look at line 947 in settings then you will see

$topbar-margin-bottom: 0;

which is what you want to change. Settings for top bar start on line 935 and go through all the way to the bottom of the page, all of that is related to top bar only.

Your added css post-Foundation imports is incorrect since the variable you have inside of the top-bar class is a variable that includes top-bar associated classes.

Mihai Stroe commented on Rafael Hegre Cabeza's post almost 6 years

In config.rb you have a few options for output_style that affect how Compass will compile the Sass. Play around with those settings and see how they output your css.

Mihai Stroe commented on Grant Novey's post almost 6 years

I would leave out rem-calc() completely since that converts px to rem.

$row-width: 100%;

should suffice.

Mihai Stroe commented on Raphael Essoo-Snowdon's post almost 6 years

@Raphael

Technically you can ignore the settings partial completely but it's recommended you edit its values directly instead of replicating things in your custom Sass -as Julian said, make sure to uncomment anything you want to change. Take a look through it and see what settings it contains and allows you to change.

Posts Followed

No Content

Following

    No Content

Followers

  • Full Width Row

    Hey guys, I’m just curious what you think the best practice is when I have a row that I need to be full width of the page. Because if I set a row to be the full width, then my interior subsequent row will be full width and not adopt the Foundation defa... (continued) Read More

    View More Posts by Alok Jethanandani

My Posts


My Comments

You commented on Marek Simko's post almost 6 years

1.) ) _settings.scss essentially offers some main options for global values as well as component-specific stuff, definitely look through it and uncomment what you need. Whatever isn't in there you'll need to look up and override in your custom scss.

2.) I have started using foundation on v5 but from what I've seen v4 had everything in app.scss but commented. v5 doesn't do that and instead you should just comment out/remove

@import "foundation";

then add each component individually

@import "foundation/components/COMPONENT_NAME";

The components can be found under

bower_components/foundation/scss/foundation/components

Further help:

http://foundation.zurb.com/forum/posts/277-custom-css-with-sass

http://foundation.zurb.com/forum/posts/718-what-to-do-after-installing-foundation-with-sass

http://foundation.zurb.com/forum/posts/771-how-to-customize-foundation-with-sass

You commented on pulla's post almost 6 years

@Rafi

That's a good move, looking forward to it.

You commented on Charles Smith's post almost 6 years

@Lowell

To change the heading fonts you would do it via your own custom partial whether you choose to have _type.scss imported or not. Make sure to have your custom scss import after the Foundation scss and you're good to start overriding.

You commented on mario martinez's post almost 6 years

I'd be interested in something like this well so +1.

You commented on Charles Smith's post almost 6 years

The entire directory you're not supposed to change is bower_components, everything else that's at top level is there for you to do with as you please. It would be possible to override anything you want in custom partials but you'd have to either copy the variables out of settings OR hunt down all individual classes via Firebug or by looking through the Foundation partials one by one.

If you import your custom styles after the Foundation stuff then your styles would be able to override.

You commented on Rafael Hegre Cabeza's post almost 6 years

That works.

You commented on Charles Smith's post almost 6 years

@Anthony

That's something you should change in the settings partial, inspect the entire file to see what's available to change in there first. If you can't find Foundation properties you're looking to change in there then you can go ahead and create your own styles.

For example if you take a look at line 947 in settings then you will see

$topbar-margin-bottom: 0;

which is what you want to change. Settings for top bar start on line 935 and go through all the way to the bottom of the page, all of that is related to top bar only.

Your added css post-Foundation imports is incorrect since the variable you have inside of the top-bar class is a variable that includes top-bar associated classes.

You commented on Rafael Hegre Cabeza's post almost 6 years

In config.rb you have a few options for output_style that affect how Compass will compile the Sass. Play around with those settings and see how they output your css.

You commented on Grant Novey's post almost 6 years

I would leave out rem-calc() completely since that converts px to rem.

$row-width: 100%;

should suffice.

You commented on Raphael Essoo-Snowdon's post almost 6 years

@Raphael

Technically you can ignore the settings partial completely but it's recommended you edit its values directly instead of replicating things in your custom Sass -as Julian said, make sure to uncomment anything you want to change. Take a look through it and see what settings it contains and allows you to change.

Posts Followed

No Content

Following

  • No Content

Followers

  • Full Width Row

    Hey guys, I’m just curious what you think the best practice is when I have a row that I need to be full width of the page. Because if I set a row to be the full width, then my interior subsequent row will be full width and not adopt the Foundation defa... (continued) Read More

    View More Posts by Alok Jethanandani