Twitter Bootstrap 3 vs Foundation 4 – Which One Should You Use?

I’ve been spending a lot of time lately with Twitter Bootstrap 3 – the new mobile-first version, and Foundation 4. It all started when I decided to check out Twitter Bootstrap. At that time it was still at version 2.3.2, the prior version to the current Twitter Bootstrap 3 RC1. I used it and liked it until I had a need to exert more control over how my site would look on mobile devices. When I ran into that issue, I hightailed it for Foundation 4. What I found blew Bootstrap 2.3.2 out of the water.

Now that Twitter Bootstrap 3 RC1 is out, I thought it would be worth comparing the two again to see if Bootstrap has gained ground, or ever surpassed Foundation 4 with their newest release.

The Tale of the Tape – Bootstrap 3 vs Foundation 4

Before we get into how well these frameworks work, let’s look at what each has to offer.

Each framework consists of grids, CSS components, and javascript widgets/actions. The devil is in the details so lets look closer:

Let’s dig into this feature list a bit more to see what’s really going on.

Documentation

Let’s start by talking about documentation. After all, how can we learn to use the stuff unless we read the docs? I’ve scoured both sets of documents both for writing articles about them and in actually using them. Personally, I found Foundation’s documentation to be just about exactly what I need every time. Bootstrap’s docs aren’t bad but pretty regularly I think they could have been more explanatory. The result is that it’s harder to understand how to use Bootstrap, just going on the docs. If you’re comfortable working with LESS, SASS, or coding javascript, this may be less of an issue. But if you’re looking for these frameworks to solve problems for you and make it easy to implement, the edge goes to Foundation 4.

Winner: Foundation 4

Grid System

The grid system is the single biggest upgrade between Bootstrap 2.3.2 and Bootstrap 3. The biggest difference is the addition of a small grid, much like Foundation 4. The documentation for Foundation 4 does a great job of explaining how to use the small and large grid, and how to use them in combination. The naming conventions are clear and the math is always obvious: just make the total number of columns in a row add up to 12.

There’s also one incredibly useful class that Foundation 4 uses that, frankly, I don’t know how you do it in Bootstrap without coding it yourself. It’s called a block grid. What it does is span a certain number of columns with any number of list items. Think of it like this: Let’s say you wanted to have five logos span the entire width of the page (12 columns total). The block grid class will do all the heavy lifting of spacing those logos out equally. It would work just as well if they had to span 6 columns (half the page) or if there were any other number of total items, say, 8 or 3 instead of 5. To me, it seems like you’d have the occasion to use this class on every website since credibility icons and logos are all the rage these days. It’s incredibly helpful.

By comparison, I find Bootstrap 3 to be just a little weird. First, there’s the documentation. They go out of their way to tell you that there are four breakpoints but mention the fact that they’re using two grids pretty casually. I can see how having the additional breakpoints could be handy but it comes with a personal annoyance: the max div-width is less than 100%.

This means that you aren’t going to be spanning the entire page with an image. There will always be a gutter. I pretty much hate this aspect of Bootstrap.

Also, for what its worth, the Medium Desktop size (992px) was added from 2.3.2 to 3 RC1. Now we don’t have to suffer the 2.3.2 problem of having your only desktop size pegged at 1170px.

The best thing about the Twitter Bootstrap grid system is that unlike Foundation 4, it’s backwards compatible to IE8. If IE8 is a concern for you (it still maintains 10% share worldwide) and you want to use Foundation 4, they’ve got some code you can add to your site that will help.

Winner: Foundation 4. A bit of a toss up, but I’m giving the edge to Foundation 4. The block grid is something Bootstrap should implement themselves. The multiple break points aren’t really better than how Foundation 4 does it, and it’s possible to get your site to look decent in IE 8 using either framework. The docs are a little better for Foundation 4 and their class names make more intuitive sense. If you choose Bootstrap, you’re not going to suffer much by comparison, so in that sense it’s a toss up, but as it stands, Foundation 4 is still 5-10% better at the moment.

 CSS Components

I could spend a fair amount of time explaining what each of the CSS components that these frameworks has in common do but it’s mostly self-explanatory (forms, buttons, natch) and besides, this page in the Twitter Bootstrap docs and this page in the Foundation 4 docs do a much better job of showing you what’s included.

Instead, I want to talk about their differences. This is what’s likely going to push you towards one framework or the other.

Twitter Bootstrap 3 CSS Components

Twitter Bootstrap 3 has three unique CSS components: images, badges, and list groups.

Images – With a few classes, images can be rendered as a circle, rounded square, or a thumbnail.

Badges – If it turns out that you need some stinkin’ badges, Bootstrap is for you. And by badges they mean the gray or white circle with the number in it.

List Groups – List groups are interesting because they can build a good looking, complex vertical navigation menu with just a few classes. Add links to your list items and you get something that looks like this:

Foundation 4 CSS Components

Foundation 4 has three unique CSS components: block grid, flex video, and inline lists.

Block grid – We’ve already covered this in the previous section but it’s worth pointing out again. A block grid allows you to equally space out any number of list items across a given number of columns. The result is something like this:

What you see are 5 logos equally spaced across 12 columns. While you could do this manually, adding or removing an icon would be a hassle. But with a block grid, all you have to do is add one more <li> and Foundation 4 does the rest for you.

Flex video – Riddle me this Batman, how do you expect your embedded videos from YouTube or Vimeo to look in your responsive design? If you use Foundation 4 and their Flex Video class, that answer is just fine. It adds a ratio that makes sure your video scales correctly to whatever size you need. If you use Bootstrap, you just have to hope for the best.

Inline Lists – This is what it sounds like. Foundation 4 makes making and inline list (great for menus and the like) super easy.

Pricing Tables – This is another common thing, and another thing that Bootstrap should copy. It’s not that we can’t design this kind of thing on our own, it’s just that having this already available makes creating pricing tables so much easier. To do the same thing in Bootstrap, you’ll have to go to the community. You can find a code snippet for Bootstrap on Bootsnip. Here’s how it looks in Foundation 4:

Winner: Foundation 4. No question. To me, what Bootstrap offers here isn’t very significant. The image classes don’t do much for me. The badges bit isn’t something I’m personally likely to use soon, and the list groups look neat but I can’t think off the top of my head of how I’d use them in any project I’m working on. On the contrary, the bits that Foundation 4 includes are all very useful. Block grid? Yes please. Inline lists and pricing tables? Absolutely. And Flex Video? I didn’t even realize that was going to be a problem until I saw that ZURB had created a solution. So yeah, I think I’ll be using that too.

Plus, Bootstrap has this really annoying feature of needing you to declare that your images are responsive. If you forget, then the image you forgot to make responsive, isn’t. Foundation 4, by comparison makes all images responsive out of the gate. This is clearly the better way to do things.

Javascript Stuff in Bootstrap 3 and Foundation 4

When I reviewed Bootstrap 2.3.2 and Foundation 4, I made a bit of a deal about jQuery vs. Zepto. Zepto is a lightweight version of jQuery that’s meant to be small and fast for mobile devices. It’s roughly 25% the size of jQuery. But, since we’re talking about 9k versus 36k, it’s not exactly a big deal – especially if you’re not going to the trouble to serve the right size image via Adaptive Images or Interchange.

In cases where Zepto fails, Foundation is designed to default back to jQuery. I say let’s just believe that both frameworks are built with jQuery at their core.

This presents one issue – and it’s an issue you wouldn’t know to look for unless you ran into the problem yourself – and that is, javascript compatibility. Jquery, as it turns out, isn’t compatible with all other javascript libraries. It has to do with the way the dollar symbol ($) is used in naming variables. Without getting into it, the point is, sometimes when you want to add additional functionality to your website (say, with a WordPress plugin), doing so breaks all of your Bootstrap or Foundation jQuery.

No Conflict Mode

The way around this is to put jQuery into something called No Conflict mode.

Twitter Bootstrap 3 deals with this issue head on in their documentation. The documentation is a little vague (ugh) and ends with a warning:

To me, this means that if you build a theme for a CMS (WordPress, Joomla, Drupal, etc.) using Twitter Bootstrap 3, you could have plugin problems somewhere down the road. The NextGen Gallery, for example, is the most popular image gallery plugin for WordPress with 7+ million downloads. It uses prototype.js and will break the ever loving crap out of your jQuery components unless you put Bootstrap 3/Foundation 4 into no conflict mode. So this is a real concern. If you plan to use Bootstrap with a CMS, just know this could be an issue.

I ran into this exact problem with Foundation 4 on a recent web design. I reached out to ZURB and within 24 hours one of their guys had created this Gist explaining in detail how to set Foundation 4 to No Conflict mode. He makes no mention of the fact that it might not work under some circumstances. Both frameworks might work just as solidly when jQuery is put into No Conflict mode, but that warning makes me think that if I had to choose one, Foundation 4 is a safer bet.

But What About the Actual Javascript Components?

When it comes to the actual javascript components, the two frameworks share more in common than what they have different. The main difference is in implementation. For example, both frameworks have pop-overs/dropdowns. Bootstrap separates the two ideas while Foundation rolls both into a universal dropdown plugin. Modal windows, scrollspy, a responsive lightbox and more are all included with both frameworks. But Foundation 4 includes three more useful bits: Interchange, Joyride, and Abide.

Interchange – Interchange solves the one huge remaining problem for responsive design – how can I serve different images based on screen size? This is a big deal when you think about it. Let’s say you have a big hero image for a site that’s 1000px across. That image could easily be 200k. When viewed on a mobile phone, the site will still look right because it scales the image correctly, but the user still had to download a 200k image just to see it.

Ideally, what we’d rather do is serve a small image to the mobile phone that’s sized appropriately. Now the image might be only 20k, a size-savings of 90%. The result is a faster download and a better mobile experience.

Interchange makes this possible by allowing you to define different images for different screen sizes/media queries.

If you’re using Twitter Bootstrap, you either have to use Interchange too (lol) or something like Adaptive Images to accomplish the same task.

Joyride – Joyride is a lot like WalkMe but without all of the overhead that WalkMe provides with the Firefox plugin to create your walk-throughs. What Joyride does is make it easy to create a walk-through of your website using simple overlays. You’ve seen something similar on Facebook or YouTube before when they’ve updated their designs. It’s an easy way to teach your user how to use your site. It looks neat too.

Abide – Abide is a form validation library. If you’re at the point to where you’re writing your own forms and error-checking them, then this is where you want to be. Twitter Bootstrap 3 doesn’t have anything like this.

Winner: Foundation 4. Twitter Bootstrap 3 doesn’t have a way to serve the right sized image based on screen size. This makes it hard to take seriously as a “mobile-first” platform. Maybe asking for that out of a framework is more than one should, except for the fact that Foundation 4 has it. This, along with Joyride and Abide make Foundation 4 the clear winner here.

Browser Support

When we look at browser support for these frameworks, it really comes down to one question: do you need IE 8 support? If you do, Twitter Bootstrap 3 has you covered much better out of the gate. It won’t look spectacular, but it at least degrades into something reasonable. By comparison, Foundation 4′s grid is written with CSS3 attributes, which aren’t supported by IE 8. The result is a totally jacked up site when viewed in IE 8.

However, as I’ve learned is the case with all things ZURB, they’ve got a workaround. To be clear, the problem with Foundation 4 lies in how its grid is constructed. The other elements work just fine. Once the workaround is in place, your site should also degrade nicely for IE 8.

Winner: Twitter Bootstrap 3. IE 8 “support” is included. It’s possible with Foundation 4, but it’s not really a native part of the package.

The Community

When it comes to the community, you have to ask yourself this question: What do I want from it?

I say that because a cursory glance will show you that the Twitter Bootstrap community is huge in comparison to the Foundation 4 community. Here’s a list of 319 different Bootstrap resources. On the other hand, with Foundation 4, you get the backing of an actual company – ZURB. If you have a question about Foundation 4, you can go directly to them.

This is why, I suspect, that Foundation 4 doesn’t have the community that Bootstrap has – they’ve got ZURB, which in my view, is better.

I’ve had the opportunity to spend some time in the Bootstrap community reviewing the available resources and I’ve also badly needed an answer to a Foundation 4 question (the whole No Conflict issue above). I’ve spent hours mucking around with things the community has done in Bootstrap, of which almost nothing made it into a final design. I’ve also had the experience of wondering if ZURB had a fix for my problem to routinely find out again and again that yes, they do. (Interchange, for example.)

This is why I say that you have to ask what you hope to get out of the community. In my experience, looking at what the community is doing is like taking a look at everybody’s toys. It’s neat and stuff but you’re not going to turn around and use it in your next project immediately. It’s going to be an example that helps you get further down the road on building something yourself. But with ZURB – the answers are there. Block grid is a real thing. So is Orbit. So is Interchange. And the hits just keep on coming.

Winner: Foundation 4. Your mileage may vary with this one but I’ll take ZURB over the Bootstrap community just about any day. Those guys are geniuses.

Conclusions

In the battle of the mobile-first frameworks, which one – Twitter Bootstrap 3 or Foundation 4 comes out on top?

If IE 8 is a primary concern OR if you need a non-responsive grid, Twitter Bootstrap is your winner. It’s clear that Twitter Bootstrap 3 has made significant strides towards being a reliable mobile-first framework since Bootstrap 2.3.2. However, in just about all the ways that matter, Foundation 4 still has the edge.

You’re not going to be messing up, or really even hurting yourself too bad, by going with Twitter Bootstrap 3. You just won’t be doing yourself any favors.

With Foundation 4, you get a few things you can’t get from Bootstrap, and for my taste it makes all the difference. You get:

• easy to remember class naming conventions
• images that are responsive by default
• containers that will go to the edge of the screen
• Block Grid
• adaptive images
• walk-throughs
• form validation
• pricing tables
• flex video
• inline lists
• No Conflict mode that just works
• ZURB

If you use Twitter Bootstrap 3, you’re going to have to find alternatives to everything in that list. Now, is that truly something you want to do? Or would you rather download and start playing around with the clear winner: Foundation 4.

For the comments: If you’re a Twitter Bootstrap 3 believer, hit up the comments and tell me why. Is there something I’m missing that you love?

Twitter Bootstrap 3 vs Foundation 4 – Which One Should You Use? is a post by Ben Snyder and Newman Lanier that was originally posted on A Better User Experience, a learning resource for user testing and web usability. If you've enjoyed this post, be sure to follow them on Facebook, Twitter, and YouTube.

The post Twitter Bootstrap 3 vs Foundation 4 – Which One Should You Use? appeared first on A Better User Experience.