CODEWITHSUNDEEP
csssasszurb-foundationcompass-sass
Debiprasad
Debiprasad

Reputation: 6183

How to customise Zurb Foundation 4 SCSS components?

I am using Compass SASS version of Zurb Foundation 4. It has a file _settings.scss which holds variables and mixins that are used throughout the entirety of Foundation. Editing this file helps you control some of the styles for any component. But it's not enough. To have more customised style, I need to modify more of the CSS, not just the variables in the _settings.scss file.

So, I commented out the following line in the app.scss file

@import "foundation";

and uncommented the individual components, for example:

@import "foundation/components/global";
@import "foundation/components/grid";

@import "foundation/components/top-bar";

Now I need to modify the SCSS file for the top bar component. Which file I need to edit and where is the file?

Upvotes: 1

Views: 2253

Answers (3)

craigmj
craigmj

Reputation: 5077

The top bar is easily modified. Look in your _settings.css file.

Around line 1021 you will find:

//
// Top Bar Variables
//

// Background color for the top bar

// $topbar-bg: #111 !default;

// Height and margin

// $topbar-height: 55px;
// $topbar-margin-bottom: emCalc(30px);

// ...etc

Just uncomment the values you want to change, and drop in the new values you want to use. Then you'll need to rebuild foundation css with your new values. You can do this using sass or, if you're using Compass, very easily using the compass watch command.

Upvotes: 0

Debiprasad
Debiprasad

Reputation: 6183

As per the Zurb Foundation Docs, you can use Foundation with Sass alone and add Compass, Bourbon, or whatever on top of it. You can download standalone Sass files from GitHub and keep it in the sass directory. So, the path of these standalone SCSS files will be same as the components in Compass. And you can modify any SCSS file in the foundation/components directory. You can keep only the files you want to modify in that directory. If some file will be found there, then it will be used. Else, it will use files from the Compass components.

Upvotes: 0

tobi.at
tobi.at

Reputation: 1286

Either you override the styles in a new stylesheet or you manually import the files - you can find them on Github.

I always include the files from foundation in my project, so it's easy to alter them!

Upvotes: 1

Related Questions