The Benefits of Building With Foundation 4
Foundation 4 boasts itself as the most advanced responsive front-end framework in the world. Which is a bold claim. And I’ll admit I was skeptical at first, but having dug into it the past few weeks, I can’t help but believe… they may actually be right.
Why Foundation?
First, what’s the point of using a front-end framework? Why wouldn’t we use something simpler, like HTML5 Boiler Plate or HTML5 Blank? While both of these are fantastic options for starting with a fresh set of HTML, CSS and JS to work from, Foundation goes further.
The Grid
Foundation uses a powerful grid system, giving us a tremendous amount of flexibility when writing markup. By adding some simple classes, we can make intelligent decisions on how a layout flows on small and large screens. Infinite nesting, centering, offsets and pushes mean better markup, and better markup means better SEO. The grid is responsive, too, so everything scales up or down to maximize screen real estate.
Everything and the Kitchen Sink
Foundation comes with a plethora of minimally styled elements. Form elements, various navigation types, tabs, accordion menus and much more. All of these elements can be built upon and further styled, which is where SASS really comes into play.
SASS & Compass
Every Foundation project is built with Compass and utilizes SASS. And that is great news, because it gives us the power to change huge chunks of CSS — literally hundreds of lines at once — by editing a few variables. The _settings.scss file in the project gives us the power to change the number of columns we’re using, the gutter and margin of the columns, colors of elements, fonts, borders, you name it.
Note: if SASS terrifies you, Foundation 4 can be downloaded as a static CSS build, too.
Reusable Code
The ultimate decision to use Foundation at Myjive was made because, finally, our developers can go from prototype to final deliverable on the same set of code, saving hours per project.