For a long time I’ve been wanting to test Zurb’s Foundation Framework. But being familiar with Bootstrap, that was always my framework of choice when starting a project.
I finally bit the bullet and dove into Foundation. In this post, I’ll try to share my experience.
Note: I’ll be comparing Foundation 6 to Bootstrap 3. I know Bootstrap 4 is coming soon and some of these things might not apply to later versions.
Made for sites
Zurb has 3 frameworks: Foundation for Sites, for Apps, and for Mail. The separation means that each framework addresses specific needs, as opposed to Bootstrap and other frameworks that have more of an all-in-one approach.
What that means for me
So far, in the two sites I’ve made, there haven’t been any components that I miss. And I don’t have to think so much about excluding files. For bigger projects where I need to combine lots of components, the lack of plugins might be an issue, but for 95% of sites I build, Foundation has more than enough.
There’s very little to override. The config file is short, well organized and easy to understand.
Small and fast
Super fast and simple. Requires less markup (for example, no need for a <div class=”container”> to give your design a fixed with.
Foundation 6 has a super easy way to set up a grid layout. Just specify on the container element how many elements should fit for each breakpoint, and Foundation takes care of spacing them evenly. No need to specify different classes for each.
No need for offset-x classes to center a column, just add a class of small-centered and Foundation takes care of it.
Having equal height elements has always been a headache, but the equalizer plugin is the most painless way I have come across. Flexible and powerful.
Everything is set up in rems, and you can even define header sizes for big and small screen sizes form the get-go.
Foundation is super well documented, with a clear, searchable docs site that clearly outlines the markup, css and sass variables available for each module.
Tables that collapse on small screens, right out of the box. Awesome!
Customizable breakpoints and sizes
Want to add another breakpoint? Just define it in your settings file and all classes will be output for your iphone-6plus-horizontal breakpoint.
The learning process
It wasn’t too hard to switch my “col-md-6” syntax to “medium-6 columns”. I found myself consulting the Foundation Docs site often to learn syntax and features, but it follows the same principles as Bootstrap so the transition was almost seamless.
For big UI projects Bootstrap is probably the better option, offering a lot more components and plugins. There’s plenty of articles, tutorials, and discussions around BS, while the Foundation community is smaller. Even though Zurb has forums, they’re not that active. There are, of course, infinitely less templates, themes, plugins, etc. for Foundation, but hopefully that will also change in time.
If I must choose, I’ll choose Foundation almost every time. I find it much easier to work with, and love many of the Foundation-only features.