
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.
Why Foundation?
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.
Minimal styling
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.
Awesome features
Block Grid
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.
Centered Columns
No need for offset-x classes to center a column, just add a class of small-centered and Foundation takes care of it.
Equalizer
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.
Responsive typography
Everything is set up in rems, and you can even define header sizes for big and small screen sizes form the get-go.
Documentation
Foundation is super well documented, with a clear, searchable docs site that clearly outlines the markup, css and sass variables available for each module.
Responsive tables
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.
Caveats
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.
Conclusion
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.
Thanks for sharing Kemie :)
I will try Foundation too!