Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to override\edit Zurb Foundation base CSS styles?

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?

like image 553
catandmouse Avatar asked Dec 10 '12 02:12

catandmouse


4 Answers

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.

like image 105
Ed Charbeneau Avatar answered Oct 24 '22 10:10

Ed Charbeneau


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!

like image 30
Hercules S. Avatar answered Oct 24 '22 08:10

Hercules S.


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

like image 1
Malcolm Avatar answered Oct 24 '22 10:10

Malcolm


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.

like image 1
RioBrewster Avatar answered Oct 24 '22 10:10

RioBrewster