How to override\edit Zurb Foundation base CSS styles?

css frameworks zurb-foundation css-frameworks
catandmouse picture catandmouse · Dec 10, 2012 · Viewed 22.6k times · Source

It's my first time using Zurb Foundation for a web project. However, I'm not sure whether to override their styles with my own on a separate stylesheet or directly edit foundation.css.

For example this is their nav css (inside foundation.css):

.nav-bar {
    background: #4D4D4D;
    height: 40px;
    margin-left: 0;
    margin-top: 20px;
    padding: 0;
}

If I want to change the background and margin-top, do I directly edit .nav-bar from foundation.css or create my own stylesheet (put a style.css below foundation.css) and override it like so:

.nav-bar {
    background: #999;
    margin-top: 0;
}

Is this good practice? If not, what would be the best way to go about it?

Answer

Ed Charbeneau picture Ed Charbeneau · Dec 10, 2012

Best practice is to override their style sheet using a custom .css file like you described. This way if an update is released, for example a bug fix, then you just replace the foundation.css file.

If you edit the foundation.css file directly and would like to update the framework, then you would need to manually make the updates yourself.

Related questions

Change color of checkbox in Materialize framework

I am currently working with Materialize framework and wondering is it possible to change the colour of the filled-in checkbox as it is green on default. <input type="checkbox" class="filled-in" id="filled-in-box" checked="checked" /> <label for="…

Read More
Bulma - why all columns are on one line?

I use Bulma with VueJS when I use v-for, all columns are on one line, I tried to addis-4, then the column width changes but they are still on one line <div class='columns'> <div class='column' …

Read More
Bulma.io fullheight hero background

Trying to add background image to bulma.io hero section, but it doesn't work! Heres the code: <div> <section class="hero is-primary is-fullheight header-image"> <!-- Hero header: will stick at the top --> <…

Read More