26 July 2013
Why I Chose Zurb Foundation
We use Zurb’s Foundation framework on all our projects at Gaslight. I’ve been meaning to talk about why I believe Foundation is superior to Bootstrap for some time and what better time than today.
Mobile First
Foundation has been mobile first since the beginning. Responsive sites are pretty important to me, since I’m pretty mobile. I’m a fan of the grid and the ability to change the columns between screen size with little hassle.
The Grid
Foundation’s grid is (was?) unique in that I can embed a row within a column and it allows me to use the same twelve columns again. I don’t have to keep track of the current row and column counts when I’m prototyping. It’s really nice to split the page in to six columns, then dive in to a four/eight split inside each.
Unstyled, by default
With Bootstrap, you can add an unstyled class to elements to remove the
opinionated style. I prefer Foundation’s approach here. Zurb is a design shop,
so Foundation is pretty bare in terms of the style that “bleeds through”. If
you’re using Bootstrap, you’re immediately another Bootstrap site.
I like the baseline that Foundation provides our designers. It’s name is really descriptive of it’s purpose, as I see it. Sensible defaults are one of my favorite things.
Sass and Rails
We’re a Rails shop. We work with Ruby on Rails everyday, all day long. Everyone
here knows how to clone an app, run script/setup and get started.
We use Sass, too. Sass and Rails work great together.
Foundation is packaged as a Rails gem by Zurb. It’s written in Sass. It’s a no brainer. I don’t have to wait for ports from Less. It works with the asset pipeline. As they often say, it “just works.”
Modularity
Since Foundation’s written in Sass, I can pull in the pieces I want as needed.
Only using the grid? @import foundation/components/grid. Done. How awesome is
that?
If I want to override the column widths, that’s a piece of cake, too. I can
override $row-width before I pull in the grid.
Components
Foundation ships with some handy components out of the box. We’ve used Joyride, Sections and Tooltips pretty frequently.
Constant Development
Foundation is under almost constant development. It’s updated frequently. That’s exciting for me. They’ve built something great and it keeps getting better with every release. There’s a large and active community participating in development as well. As of this writing, the foundation repo has 12,621 stars. That’s pretty impressive.
But, semantics!!
I know, it’s terrible. I have classes all over my HTML that aren’t part of the
content. There are classes like large-6 and small-centered on elements.
I don’t care anymore.
For a long time, I worried about the CSS police. I was certain that everyone who inspected my page would immediately run away screaming and refuse to listen to my message or buy the product. I was wrong and I wasted a lot of time because of that choice.
Shipping something is the most important thing. If I delay that because I need to refactor my stylesheets, my priorities are in the wrong place. This is an example of when craftsmanship gets in the way of productivity, in my opinion.
Conclusion
I’m sure you’ll disagree. Maybe you won’t, but that’s okay, too. Bootstrap is great for a developer who wants to ship something. I’m glad there are tools that help you put just enough polish on an idea and get it out the door. That’s better than discussing the importance of understanding floats, in my humble opinion.
That’s a topic for another day.
