Foundation 4 vs. Bootstrap 2: The feature line-up

Tags: , , , &

Foundation-vs-Twitter-Bootstrap-feature-comparison-post-by-Zing-Design

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
Website features
Interactive customiser ‚úî ‚úî
Pre-built templates ‚úî ‚úî
Experimental Add-ons available ‚úñ ‚úî
Legacy browser support
IE 6 Support ‚úñ ‚úñ
IE 7 Support ‚úî ‚úñ
IE 8 Support ‚úî ‚úñ
CSS Preprocessing
Sass ‚úñ ‚úî
Compass Gem ‚úñ ‚úî
Built-in mix-ins ‚úî ‚úî
JavaScript
jQuery ‚úî ‚úñ
Works with JavaScript disabled ‚úñ ‚úñ
Navigation highlighting on scroll ‚úî ‚úî
Text field auto-completion ‚úî ‚úñ
Sticky sub-nav ‚úî ‚úî
Responsive images ‚úñ ‚úî
Touch optimised ‚úñ ‚úî
Modal content ‚úî ‚úî
CSS features
Fluid responsive grid ‚úî ‚úî
Icons ‚úî ‚úñ
Custom form elements ‚úî ‚úî
Flexible videos ‚úñ ‚úî
Platforms
WordPress plugin ‚úî ‚úñ
Support for Rails ‚úñ ‚úî

Foundation looking like the better option right now? I reckon so…

Notes:

  • 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.
  • Neither Bootstrap or Foundation seem to have fallbacks for non-JavaScript visitors. Yes, it’s only a small percentage of users who browse with JavaScript disabled, but it’s good practice to include these things for the sake of progressive enhancement and accessibility.

In conclusion…

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!

People who have viewed this post also viewed

Comments

  1. Cam

    Slightly off topic, but what’s your preference for a WordPress Framework.

    My business is currently looking to use the Genesis Framework and so far so good on reviews I’ve found, but if you have another you recommend it would be great to get your opinion. Perhaps a topic for your next post?

    Reply
    1. Zheng

      Hi Cam,

      Good question – there are a couple of less well known frameworks that works well with or without WordPress (by the way Bootstrap 3 can also integrate very well with WP). We will be writing a new blog post in the new year about some of these smaller frameworks, but as a sneak peek, we will be talking about Ghost, Startup Framework, WPMUDEV and more. We haven’t heard about the Genesis Framework, but we will sure look into it for you.

      Reply
  2. Branislav Dinic

    Foundation has the stand alone SASS files, so you can basically turn off everything that you don’t need . I’m currently using only grid and emCalc() and it’s awesome!

    Reply
    1. Zheng

      Thanks for dropping by, sure we are working on it right now. Keep you eyes out for our Bootstrap 3 series, which will be unveiled next month.

      Reply
    1. Zheng

      Hi there, it will be in October’s Zing Design newsletter, which is due out on the 7th – just keep an eye out for it in your inbox.

      Reply

Leave a comment

* Required fields

captcha

Please enter the CAPTCHA text