Update: Wow, even though this was only written a few months ago, it is already a bit out of date. Check out our latest post on Foundation 4 vs Bootstrap 3 feature comparison
In the previous post, we talked about the 5 reasons why Foundation is better than Twitter Bootstrap, in this article, we will do a side by side feature comparison of the two frameworks to help you decide which one is right for you.
Comparing the two big frameworks
I’ve made this chart which shows the key features included in Twitter Bootstrap 2 and Foundation 4. These aren’t all the features of course, check out this table if you’re interested in a full comparison. This however, is a much simpler table which shows the features that I look for in a front-end framework and those which clients are most often eager to include in a project.
|Twitter Bootstrap 2||Foundation 4|
|Experimental Add-ons available||‚úñ||‚úî|
|Legacy browser support|
|IE 6 Support||‚úñ||‚úñ|
|IE 7 Support||‚úî||‚úñ|
|IE 8 Support||‚úî||‚úñ|
|Navigation highlighting on scroll||‚úî||‚úî|
|Text field auto-completion||‚úî||‚úñ|
|Fluid responsive grid||‚úî||‚úî|
|Custom form elements||‚úî||‚úî|
|Support for Rails||‚úñ||‚úî|
Foundation looking like the better option right now? I reckon so…
- While Foundation comes with Zepto by default, you can of course switch to jQuery if you need the extra fire-power. As a bonus, Foundation cleverly falls back to jQuery on browsers which don’t support Zepto (ie. IE).
- As I mentioned in the previous article, Foundation is going to try to render the mobile site on IE 7 and below.
- Supporting IE8 may soon be less of an issue, as the new auto-update to IE10 rolls in for all those long-suffering Internet Explorer users.
- Foundation haven’t included icons by default, but they do have an add-on which includes their own homemade icon font-face. This works very well across browsers, saves on image requests, scales well on all resolutions and is easier to style. Fun fact: @font-face works on IE4 and above!
- Somebody has built a Foundation WordPress plugin called FoundationPress, but it’s not as configurable as the Bootstrap plugin, it also uses shortcodes to add Foundation styles, so it might not be such a good approach.
- One other feature which I decided to leave from the chart, is the community. Twitter Bootstrap is big, it’s been around longer and so it’s cultivated a bigger following. This means finding support and troubleshooting is easier. It also means more frequent updates and releases. If you’re new to the game, this might be pull-factor towards Bootstrap.
Foundation 4 sure is swell*. Right now I’d recommend it to anyone over Bootstrap, even if they did want to support the older browsers. The legacy bugs are reasonably easy to fix with Compass, and you’d probably end up having to make a few fixes in Bootstrap anyway.
The game is always changing though, as with any front-end tool, there are plenty of options out there and it all comes down to what you’re familiar with and what works best for you. Frameworks were built to save you time, if a framework isn’t saving you time, don’t use it!
If you’re fed up with the big frameworks and their big overheads, have a look at Skeleton. It’s more of an advanced boilerplate than a framework. Skeleton provides a more neutral, stripped back, lightweight starting point with excellent browser and device support.
*Small print: Zurb isn’t paying me to write any of this… I just really like Foundation!