Twitter Bootstrap 3 versus Zurb Foundation 4

Posted by Gant on November 2nd, 2013

I'm one of those people who has to really dig into something and investigate it for myself before I accept it. So when my buddy Matt told me we should be switching to Foundation from TwitterBS3, I was both surprised and hesitant.

Surprised because we'd been using Bootstrap since it first came out, and we've really inculcated ourselves into the abilities while streamlining how to integrate it into our Rails apps.

Hesitant because, why are we trading in for essentially the same thing? … right?

The Unfair Contest Begins

It's a complete misnomer to call this a versus. After 30 minutes of reading what Foundation had to offer, I was convinced, and another 30 minutes after that I seriously can't believe we EVER used Bootstrap.

Readability

If you were using Bootstrap 2, and then made the leap to Bootstrap 3, you may have noticed it became substantially less readable (imo). Why? Well it looks like they're slowly moving to emulate Foundation, but with md and lg instead of medium and large. Sure, it's less to type, but abbreviations raise the bar for newbs, version onboarding and readability. When I first saw col-xs-3 for Bootstrap, I didn't instantly get what it was. Additionally Bootstrap cut letters out, but kept entire redundancies like using col- and class determinate sizing like well well-lg.

Foundation tends to have class names that are more generic, readable, and interchangeable. It simply feels consistent and discoverable.

Usability with Rails

If you like SASS (which I do) and you want to seamlessly work in with gems like Bourbon; Foundation lends itself to the Rails developer. Setting up a site on Foundation was easy, where as there's always been some quirks with Bootstrap (hardcoded Glyph icons etc.).

Design

Bootstrap 2 was attractive because it didn't require much design to have a nice set of colors and site out the box. THEN EVERYONE HAD THE SAME DAMN SITE… which really got annoying quickly. Bootstrap 3 they've pulled out their design, essentially forcing people to customize a little more (or look flat as shit). Note: there are A LOT MORE pre-made templates for Boostrap since it had a larger community, but with their constant changing of class names, they've broken backward compatibility severely!

I imagine once they settle on some class names, they may be able to build a formidable template selection.

** NOTE ABOUT BOOTSTRAP CHANGES ** From Bootstrap 2 to Bootstrap 3, there was the removal of badge types. When I inquired about this, I was told a badge is more rounded label, thus redundant…. but they left badges.. they just took out the types. It seems Boostrap is lacking congruence and direction. Yes, badges were simple, but so are labels… was it really that big a pain to back something you've introduced for convenience? By that same token, aren't breadcrumbs just styled small wells with a few extra lines of CSS? Pull those out, too!

Documentation

Bootstrap is documented much better. I imagine if Foundation had the same community size they would be better documented, and I know they are open to pull-requests. It's my hope that Foundation will grow their documentation to rival BS.

More Foundation Wins

** CENTERING: ** This is where I just appreciate Foundation. The grid is awesome, but anyone who's had to center something in Bootstrap knows they're about to go off the grid. Foundation is friendly with centering.

** SMART CLASS VISIBILITY: ** Recently I had a group of buttons, and once the screen got small enough I wanted to show a drop down of buttons. So medium, small, and extra-small needed the drop down. The resulting Bootstrap classes were hideous, but take a look at the simple logic in Foundation: .show-for-medium-down. How hard is that? Showing again that Foundation has thought this through.

** ORIENTATION: ** Any mobile developer knows orientation makes a big difference. Only Foundation provides you with the tricks to make it happen.

The list goes on! For more examples of Foundation being better than Bootstrap 3 Click Here


Copyright ©2014 Iconoclast Labs LLC