Moving from Bootstrap to Foundation

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.