Foundation: a Compelling Alternative to Bootstrap

Joe Hewitson

Front end frameworks have, in recent years, helped web developers improve design consistency and maintain mobility in today’s responsive web world. Twitter’s Bootstrap framework quickly became the unanimous favorite thanks to its large community, strong developer backing and topnotch compatibility.

Despite such success, many in the web design arena have jumped ship for a relative newcomer.

Foundation, a front end framework from the fine folks at Zurb, offers a deep bag of web design tools similar to Bootstrap with a few notable differences that have proven irresistible to some. With that, let’s dive right in and explore the key factors that have tempted many away from GitHub’s most popular project.

1. Have it your way

One of the most common complaints lodged against Bootstrap is its heavy handed approach to design. This knock against it could easily be attributed to the framework’s overwhelming success. Bootstrap has provided a CSS layout solution that works marvelously out of the box with very professional results. The problem with this is that customizing the underlying CSS beyond mere color changes can be a rather frustrating experience. As such, Bootstrap driven web designs often look very similar if not exactly the same.

Foundation on the other hand is far less opinionated about design from the get go. For web developers this means less “undoing” of default styles and more focus on fine tuning the look and feel of the site.

2. Mobility minded

Bootstrap found its way into this world thanks to a small team of developers at Twitter searching for a better way to share common design patterns among internal team members. In comparison, Foundation was built on the premise of flexible mobility first.

The team at Zurb recognized the mobile browsing trend early on and made it their focus to provide an extensible CSS framework that would scale equally well across a multitude of devices, screen sizes and resolutions. Those spending any measurable amount of time developing mobile sites will find Foundation’s “mobile first” approach makes for easier development on a small screen. Also of note on the mobility front, Foundation has a lighter footprint thanks in large part to its use of smaller JavaScript files, which we’ll get to in a bit.

3. SASS

The topic of SASS vs LESS can easily devolve into an argument of opinion. For this reason we’re not looking to find an empirical answer as to which is better, but rather discuss why Foundation’s use of SASS can prove beneficial to web developers.

Using CSS helpers takes a lot of the leg work out of generating style patterns. An unfortunate byproduct of this streamlining is the superfluous markup automatically created. SASS users can enjoy the CSS authoring abilities of the Compass project. Notable reasons to enjoy Compass include cleaner markup and automatic mixin updates, both of which lead to easier maintenance of design patterns.

4. Zepto

Building on the mobility focus, Foundation utilizes the Zepto library instead of the full fledged jQuery implemented by Bootstrap. Zepto weighs in under 10kb when compressed meaning faster load times and decreased bandwidth use on mobile data plans.

While it may be true that Zepto is a subset of jQuery, it maintains compatibility with a majority of commonly used APIs. For those without obscure jQuery needs, Zepto provides a lean and efficient JavaScript library that excels on mobile devices. It may be worth bringing up here that Zepto’s IE compatibility is less than stellar when compared to jQuery. If Microsoft’s browser is responsible for much of your traffic, issues could arise.

5. Zurb suite compatibility

The Foundation front end framework isn’t Zurb’s only claim to fame. In fact, it might not even be its most notable product. Its roots firmly planted in design consultation, Zurb has a long track record of developing cutting edge web design tools like the popular feedback app Notable and touch optimization tester by the name of Plunk. Zurb has also made a name for itself by producing high quality JavaScript plugins and downloadable tools under the guise of “experiments”. For web designers already familiar with Zurb’s web design “experiments” found in their Playground, Foundation becomes a highly extensible platform for web design.

There you have it.

Zurb’s Foundation is clearly the best front end framework available and everyone with the slightest involvement in web design should use it.

All sarcasm aside, the fine minds over at Zurb headquarters have built a wonderful tool for laying the groundwork in grid based web design.

From the points above it becomes evident that Foundation differentiates itself from Bootstrap by remaining more design agnostic while focusing on responsive, mobile web development. Add to that the reusable mixins, semantic grids and cleaner markup and you have a good idea as to why many have migrated from Twitter’s Bootstrap.

And hey, it’s free, so why not give it a try and decide for yourself?

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

  • Anonymous

    Is it too much to ask for a link?

    • Anonymous

      Other than the links that are there?

  • Anonymous

    Ok, I must be missing something, I can’t see one link in that entire article?

  • Anonymous

    Figured it out, I followed the link from your Facebook page, when I remove the variables from the URL I can see the links

    • Anonymous

      How very odd. I’ll pass that on. Glad you can see the links now.

  • Anonymous

    Having played with both frameworks, I have to say that I’m leaning more towards the foundation camp right now. I’m in a current project using Bootstrap, but as you’ve said, paring it down and getting it to play nicely has been a bit of a headache.

  • Ron

    It’s pretty easy to use conditional IE comments to load either jQuery or Zepto as appropriate. I think the default demonstration HTML provided with the Foundation download includes this technique.

  • Gavin

    Also worth noting that Foundation doesn’t rely on Zepto, so if you’re a jQuery aficionado or you find yourself using jQuery plugins that don’t translate well to Zepto, then you can just load jQuery *instead* of Zepto.

    • Fred

      I think it would be worth edited the article itself to reflect the comments that have been made about the possible choice between Zepto & jQuery. People might not read further after reading about Zepto.

  • Anonymous

    Thanks for this article. I was just beginning to look at Bootstrap but will now certainly give Foundation a look too.

  • Anthony Bowyer-Lowe

    I’m a big fan of Foundation as I find it provides just the right level of abstraction to get prototypes up and running quickly without constraining further customisation or requiring extensive rework to go beyond the default styling (as with Bootstrap).

  • Ira McCray II

    Will be taking a look at Foundation now. I’ve tried Bootstrap. It’s pretty nice, but I’ve ran into a few issues with IE. Thanks for the article.

    • GavinFoster

      @ Ira McCray… you may find issues in IE with Foundation too. Foundation, more so than bootstrap (at least until recently) is pretty firm on taking advantage of CSS3 selectors and pseudo-selectors that older versions of IE just aren’t compatible with and so have never supported anything below IE9. It’s wise move considering that mobile traffic is vastly eclipsing desktop traffic, making ‘mobile-first’ an even higher priority. That being said, dropping in tools like Selectivzr and Respond.js inside some IE conditional statements, has got things working for my clients willing to pay the extra for IE Legacy browser support. Worth noting too that official support for IE8 will stop in less than six months when Microsoft drops support and updates for Windows XP. Bootstrap, have of course followed suit (posh way of saying copied) and dropped native support for IE8 which now requires a plugin to play with IE8.

  • JDHaslam

    To ciaranmg…see third paragraph down from top of the article. Click on “Foundation”. That’s your link, it was there all the time! ;-) .

  • Ivan Bayross

    I certainly agree with a lot that Joe Hewitson has written in this excellent article.

    That said, I’ve been using Bootstrap for a while now. I’ve never faced any issue in overriding any of Bootstrap’s built in elements in my own CSS file.

    I’ve not faced any resistance from Bootstrap when I crafted my own media-queries and changed font-sizes or image sizes to ensure that the webpage content behaved responsively on a devices horizontal screen size that I desired.

    I do agree that Bootstrap is a tad heavy, ( ok maybe there is a wee bit of obesity lurking somewhere ) but for the standards it brings my HTML5 / Joomla templates, helping make template maintenance that much more elegant, I’m happy to trade of the weight and use perhaps a VPN to deliver my web pages at very attractive web page load speeds.

    I also use foundation and enjoy working with it as 50% of my customers use WordPress which has adopted Foundation and the other 50% of my customers use Joomla which has adopted Bootstrap.

    My opinion is being competent in the use of both frameworks is necessary to do well in the development world today, as well as having the ability to competently judge when to use Foundation and when to use Bootstrap unless of course the CMS used by your client makes that decision for you.

    • GavinFoster

      Bootstrap certainly has it’s uses. If you’re just starting out with frameworks, it’s the perfect framework to just drop in and go without having to worry about too many styles, which will give you a very pleasing end-result. However, there are clear advantages to working with Foundation.

      First it uses the vastly superior pre-processing engine SASS (in my opinion, and has to be said the opinion of most notable designers and developers I see on the web). Bootstrap uses LESS which is far more clunky to use especially when developing modular or “object oriented” re-usable CSS. Secondly Foundation is completely design agnostic. Often frameworks (like Bootstrap) will have their own “style”. I can very often tell if a website uses bootstrap just by looking. There’s much more work you need to do to override the default styles. It’s not difficult, I agree, but certainly more time consuming, especially if you’re not using the pre-processor.

      Foundation doesn’t get in the way. It gives you the basic bare-bones and leaves the rest up to you. Creating unique templates and designs is thus far easier. In my experience semantic HTML is far easier to write too. Foundation doesn’t force you to use grid class names like .row .column-12 .column-6 etc. Although you can if you prefer. It also gives you the ability to “switch off” class names so compiled CSS is far smaller. If you minify your CSS too (highly recommended), page weight is ultra slim.

      I don’t agree that to do well at your job you need to be competent in both, I use Foundation exclusively and I do pretty well :)

  • Michael Mason

    I used Bootstrap recent for a client and I found myself wrestling with some of the underlying code a bit alright. It is good in that it’s powerful and gives you solid out of the box design, widgets and layout. I like to experiment with it and try to set up my own project using only some of its features and more semantic class names. It is heavy-weight.

    And there is a SASS option https://github.com/thomas-mcdonald/bootstrap-sass/blob/master/README.md

    I’ve been meaning to experiment with Foundation to get a sense of it and try to figure out the pros and cons. So thanks for your review, I has prompted be to get going with that.