Best Practices for Modifying Foundation CSS Framework

Best practices for modifying foundation CSS framework

Well I think this is more an opinion request than a real question.
Still, I'd say the answer is, as always in these cases, it depends.

You can certainly override the original stylings with a second css, and I think that's what they suggested on their docs (haven't been using Foundation during the last, I think, 6 months, sorry). It will just work ok, and your future upgrades will be easier to integrate, in case the framework will get some. This is certainly a perfect future-proof approach.

Performance-wise I'd suggest to directly customise that very css. My reasons are:

• Less KB: Your css will be lighter = faster to load.
• Less DOM painting: the browser won't have to style elements the Foundation way and then style them again your way.
• Less HTTP requests: the browser will only download one css, saving one extra HTTP request (fater load time)

So, it's really up to you, as you're the only one who knows if the website will need a framework update.
I never had the need of an update when I used Foundation, and I think it's been tested quite a lot that vital updates will hardly be needed.

Use foundation with existing styles

Foundation is generally used for rapid prototyping at the start of projects and including it in an already mature project will cause a lot of headaches. Personally, I would just write my own or find an alternative stand alone component:

• http://exisweb.net/incredibly-useful-list-of-responsive-navigation-and-menu-patterns
• http://webdesign.tutsplus.com/articles/a-simple-responsive-mobile-first-navigation--webdesign-6074

How to override\edit Zurb Foundation base CSS styles?

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.

Should you modify Zurbs SASS version of its Foundation framework?

For development I would definitely suggest not touching the core files as your co-worker pointed out.

Since you are using SCSS, you can easily include the core files into your own version of them (which add/overwrite rules).

Example: /scss/custom/components/_my_alert-boxes.scss

@import("/scss/foundation/components/_alertboxes.scss") // Foundation core

$alert-border-style: dashed;

@mixin alert-close {
  //Override default mixin.
}

Then once you are ready for production you'd want to go back and remove all the unused rules, minify code, and all that good stuff.

BreakPoints in Foundation FrameWork

Of course that make sense, you can adapt the framework to your project needs; most of time you can use the existing breakpoints (what Zurb have defined according to their most-of-time scenarios), but you can adapt if your project has specific needs, you can do it.

What I'd recommend to you, is not to use the basic foundation package (precompiled), but use any "sass customizable" version instead (you can do that trough a lot of package managers), so you'll have full control of the framework, through customizing variables.

In Foundation's settings file, section d., you can edit the media query ranges (a.k.a. the breakpoint ranges), next time you compile the framework, you'll have the breakpoints just as you need them.

Closure Compiler externs for the Foundation CSS framework

I solved this by copying and modifying the $(document).ready() extern from the jQuery 1.9 externs.

The original:

/**
 * @param {function()} handler
 * @return {!jQuery}
 */
jQuery.prototype.ready = function(handler) {};

And the modified version:

/**
 * @param {function()} handler
 * @return {!jQuery}
 */
jQuery.prototype.foundation = function(handler) {};

Porting from one css framework to another

Just replace the CSS/JS files and then do a find/replace in all of your HTML files to swap in the correct classes. For instance, if you were going from Bootstrap to Foundation you would have to change all instances of col-sm-12 to small-12 columns.

---

Related Topics