Menu icon Foundation
Custom CSS with Sass

I have successfully setup my Sass environment, but was wondering about best practices when using custom css overides. Should the custom css be placed inside the app.scss file to be compiled when Compass is ran, or should a custom.css file be created for custom overrides and placed in the ? Thank you.

Sasscompasscustom

I have successfully setup my Sass environment, but was wondering about best practices when using custom css overides. Should the custom css be placed inside the app.scss file to be compiled when Compass is ran, or should a custom.css file be created for custom overrides and placed in the ? Thank you.

Adam Clark over 5 years ago

This is a matter of personal preferance. You can place all your custom CSS right in app.scss if you would like. Or you can create a partial (e.g. _custom-styles.scss) and import that partial into app.scss like this:

@import "custom-styles";

I tend to completely customize my folder structure/file names. It's just a matter of importing them in the right order.

Does that make sense?

Aaron over 5 years ago

This is something I'd love to see a blog post on. With F5, it is set up from the beginning so that gruntjs will perform a lot of best practices for you. There just doesn't seem to be a doc page on "After the install".

What are the best practices as far as custom css and custom js?

More broadly, how should customization be done so that upgrades can be performed without overwriting this customization?

Mihai Stroe over 5 years ago

@Aaron

There's not much it really. As Adam said you can toss all of your custom css in app.scss or create a custom partial (or however many you'd like) then simply import them in the right order. Same with js, all of your custom js would go in the js folder.

Just make sure not modify anything in the "bower_components" folder since that gets overwritten when you update. Outside of that you can customize your structure as you see fit.

Karl Ward over 5 years ago

From a technical perspective, the less CSS files your website has to load, the better ... Best approach would be to @import custom.scss into your main app.scss, and create a unified CSS if possible.

Charles Smith over 5 years ago

I tend to use the @import method, but was wondering if the app.css file is overwritten if you make changes to the _settings.scss and ~ compass watch is running in Git? I guess I should just experiment and report back...just adding it in for the conversation as food for thought.

Mihai Stroe over 5 years ago

@Charles

As long as app.scss imports _settings.scss, app.css will be overwritten when changes are saved. This also applies for any other partials you have in there.

Branimir Borisov over 5 years ago

Hi,

Sorry for using your topic, but I recentrly run into some problems when using additional _custom.scss file with mixins. I get an error for "Undefined mixin".

Where should I include foudnation and in what order so i can use all core mixins, functions and components in my external _custom.scss file?

I'll be thankful for any reply...

Mihai Stroe over 5 years ago

@Branimir

The default app.scss comes with the following lines (comments added by me here)

// Imports settings partial
@import "settings";

// Imports all Foundation partials
@import "foundation";

If you have the second line then all Foundation Sass stuff should be loaded by default. To add your custom partials you would do so after those default two lines like so

@import "settings";
@import "foundation";

// Import custom styles
@import "custom";

You should then be able to use any mixins Foundation offers.

If you decide you want to add individual components instead of all the defaults you would comment out the @import "foundation"; line and add partials one by one and lastly your custom scss like so

@import "settings";

// Import individual Foundation partials
@import "foundation/components/buttons";
@import "foundation/components/forms";
@import "foundation/components/grid";
// etc. for any other individual components

// Import custom styles
@import "custom";

Hope this helps.

** Edit: Corrected a few things I mistyped.

Charles Smith over 5 years ago

MIhai

Good Stuff!! Thanks for posting.

Mihai Stroe over 5 years ago

@Charles

Glad you found it helpful, check again though since I made some corrections to the post. Mistyped some things the first time around.

Anthony Hind over 5 years ago

Should something like the following work OK or am I missing something

@import "settings";
@import "foundation";

.top-bar {
$topbar-margin-bottom: rem-calc(30);
}

I have imported all the foundation components and would like to adjust the topbar margin bottom but nothing happens is this not the correct way to get sass to function?

Mihai Stroe over 5 years ago

@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.

Anthony Hind over 5 years ago

OK that worked OK I was under the impression that it was best to leave the settings file alone and use a custom scss file like _myStyles.scss and then import that and override the styles that way.

If that was the case is it possible to override the $topbar that way?

Mihai Stroe over 5 years ago

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.

Lowell Allen over 5 years ago

I'd like to determine Foundation 5 best practice approach for modifying sizes for h1, h2, etc. Previous versions of Foundation exposed those variables in _settings.scss so they could easily be modified there. Foundation 5 defines those values in _type.scss within the bower_components directory. Should a _custom.scss file be used to override items defined within _type.scss, or would it be better to figure out how to suppress import of _type.scss and bring in all those definitions from a _custom.scss file?

Mihai Stroe over 5 years ago

@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.

Nutmeg about 5 years ago

Just to verify:

  • Bower components are the only files which are affected when updating Foundation

    • app.css pulls in all or components of foundation.css depending on your project needs
    • custom.css contains your own project styles

Note: in order to reduce loading hits (@import) is it better to load all (foundation via app.css) css and override this with one custom.css file? (If so, simply don't use app.css and load foundation.min.css!)

Daniel Blythe almost 4 years ago

@Mihai Stroe I feel like it would be better to have the foundation/components/*.scss files somewhere in scss/ that can be edited without having the risk of being overwritten when updating Foundation.

I have foolishly been editing the files in foundation/components/ as it was very easy to make changes to the styles that were already there. Since reading your post up further I am now not editing those files.

However now I am going to have to as hunt for the style that I want to edit, copy and paste it and overwrite it. Seems a little un-intuitive. To have to do so much hunting/copying/pasting.

Or maybe I'm completely wrong :)

Either I love Foundation/Press.