Bootstrap vs Foundation, or “Battle of the Frameworks” (Updated)
Note: This post is out of date. Bootstrap has released an awesome new version since this was written, and I’ve entirely changed the way I use frameworks. Just a heads up…
Recently, I’ve been working with people who specialize in creating internal web applications for various large companies. This morning, they asked me to see if there were any decent HTML/CSS frameworks they could integrate into the system they use to make these apps. I chose to recommend Bootstrap and Foundation. They asked me to do a comparison of the two, and once I did, I decided to share it for everyone’s benefit:
After making the same prototype in these two different frameworks, I think I’ve got a pretty good idea of how they work. Which one is better? Well, it will frankly depend on the project. But I imagine you want details. Let’s get started then.
First, go check out these two links, then read on:
Implementation
The way these two frameworks are implemented is pretty much the same. Once you’ve included the relevant CSS and JavaScript, you make a container div, and then place your columns inside it, like so:
Bootstrap
|
Foundation
|
In both examples, I’ve created two columns of equal width. You can just put other elements in them, nest more columns inside them… basically whatever you want.
Features
Both systems come with JavaScript support for elements such as tabs, drop-down menus, fancy buttons, modal windows, the works. They’re app frameworks, that’s pretty much par for the course.
Where they differ is in the fact that Foundation’s layout is responsive, which means that it’s a lot easier to make layouts produced with Foundation mobile-ready. This also means that more work is required to implement layouts made with Foundation, but when you’re designing for multiple devices, that’s only to be expected.
Aesthetics
Frankly, I think that Bootstrap comes with prettier styles by default. I know, they look very, very similar, but Bootstrap’s default styles just feel a bit more polished, to me.
That’s not to say that Foundation is ugly by any stretch of the imagination, it isn’t. I just think that I’d have to put more work into making the default element styles look “right” than I would with Bootstrap. This is an entirely subjective opinion, however, so check it out for yourselves.
So what next?
If you know exactly what resolution your app is going to be viewed at, and that resolution is 1,024 pixels wide or greater, then go with Bootstrap. It’s simpler. If, however, you need the layout to be flexible, Foundation is probably your safest bet.
As for me, given the opportunity (read: some time and perhaps some money), I’d combine Bootstrap’s element styles with Foundation’s layout structure. Now that would be one kick-ass framework.
Update:
After further experimentation (including an attempt to combine the two frameworks) I’ve decided that Foundation is the clear winner after all. While Bootstrap has some nice UI stuff going on, it all seems to be contingent on formatting your HTML exactly the way they would do it, and fixed-width layouts are definitely preferred.
Foundation, on the other hand, seems to allow for more flexibility, in both the literal and metaphorical senses of the word. Also, there’s a kick-ass WordPress theme that comes with Foundation pre-integrated, that I’m already using for a new website.