How to override\edit Zurb Foundation base CSS styles?

Question

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 1

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.

Answer 2

Best practice is to read documentation on Zurb Foundation website. Second best practice is to open 2 folders within your download: css and js. Within this folders you will find:

app.css and app.js

These are the files Zurb pre-made for you, so you can start overriding their styles!

It is not recommended to touch foundation.js or foundation.css . You will not be able to upgrade for future options or you may brake something you don't want to brake. Happy Coding!

Answer 3

Actually, you can just use the foundation.css file. If you create a custom Foundation CSS install, rather than using the default CSS install, the customizations you indicate reside in this file. If Zurb was going to change this file to address bugs and updates, this file would have to be the same across all installs, wouldn't it?

Zurb documentation says "foundation.css, is a CSS file you can use in your pages if you don't need to pick apart the actual underlying Foundation CSS."

Answer 4

Actually the best way to override the styles on Foundation (or any major framework) is to use their SASS and/or Compass version. (or LESS for those unfortunate enough to be trying to style Bootstrap)

It's much easier to go through the _settings.scss file to change colors, heights and breakpoints than to try slogging through thousands of lines of css code to make sure you've overridden everything you need to.

Yes it's a bit of a learning curve to get it all set up, but it will save you hours in the long run.