bootstrap_v_foundation

UI Cage Match: Bootstrap 2.2.1 vs. Foundation 3.2

by Ezequiel Bruni · Nov 22, 2012 · 33 comments

And so it begins.

Come one, come all! Today, we’re sticking the social networking giant known as Twitter, and the design firm ZURB together in a cage, and we’re not letting them out until one of them is dead! Or until we know which of their UI frameworks is better! Or until I get tired of this cage match metaphor!

Retiring said metaphor in three.. two.. one..

Work in web/UI design long enough and you’ll start to notice that there are certain things, elements, layout solutions, etc. that you use more than once. Perhaps you won’t use them on every project, but you might begin to compile a library of little bits of HTML or CSS code that you find repeatedly useful.

The guys at Twitter and Zurb did this, and like the amazing, beautiful people they are, they released their collected knowledge for the world to consume, and re-use, in the form of two user interface frameworks. These are Bootstrap, and Foundation, respectively.

These are not particularly new tools, they’ve both been around for long enough to create a devoted fan base, and there are many reasons to love them both. In fact, they are both so well-developed, I’d say that it’s impossible to simply answer the question of “Which one’s better?”. It would be better to ask, “Which one is better for my particular project?”

And that’s the point of this comparison. Although I have had previous experience with both of these frameworks, I decided to examine them again carefully, check out the new features, and see how the most recent stable versions match up. To this end, I created a wire-frame for the user profile screen of a fictional web application. I then tested each of the frameworks by turning said wire-frame into two working prototypes.

Here’s the wire-frame:

And here are the prototypes:

The prototypes use as little custom CSS as possible, relying primarily on the base CSS and markup options provided. Sadly, I did not have the time to personally test out every single UI element and javascript plugin available to each of the frameworks, but then, I doubt you’d read an article that long. The purpose of the prototypes was to give myself a refresher course about how both of these frameworks actually work, and what it’s like to work with them as a coder.

At this point I’d like to say that there are two things I won’t be writing about: aesthetics and javascript.

I won’t be commenting on the aesthetic aspects of Bootstrap or Foundation because you’re supposed to be customizing those in any case. I can’t comment on the javascript because I’m not a programmer. If a proper programmer were to come in and tell us all about the relative merits of one framework’s javascript plugins over the others’, that would be awesome.

What I can tell you is that in both cases, it’s all based on the jQuery framework, which has yet to let me down.

Alright, on to the:

General Differences

Size Matters

The web is one of those places where bigger is not necessarily better. This is especially true of files on your server which will be counting toward your bandwidth usage, and your user’s page load times.

I made two folders, each containing the essential bits of each framework (CSS and JS only), with the code minimized (all unnecessary spaces and lines removed). There was a surprise here, as I had expected Bootstrap to be the heavier of the two frameworks.

As it turns out, Bootstrap weighs in at approximately 161 KB, and Foundation at 259 KB. Go figure.

Underlying Technologies

The guys at Twitter decided to base their framework on one of my favorite tools: LESS CSS. For those of you that don’t know, LESS allows you to add some programming-like functionality to your CSS. Things like variables, mixins, mathematical operations, and so on allow for more efficient coding.

You don’t need LESS to use Bootstrap, the default version is pre-compiled into regular CSS, but if you know how, LESS can be used to quickly customize the entire framework to your needs.

Foundation is based on SASS, which is similar to LESS, but where LESS is typically compiled via Javascript, or a local compiling program (also generally using Javascript, or on Linux, Python), SASS is usually used in conjunction with the Ruby programming language, and Ruby on Rails.

Foundation also uses Compass, which is a more basic framework used to make the development of individual elements more efficient.

Allow me to reiterate, you don’t need to have anything installed, or even need to understand any of those acronyms to use the frameworks. But, if you know what you’re doing, and you’re not happy with the default options provided in the base CSS, you can alter them fairly easily.

It’s all about the code.

Here’s an incredibly basic layout, using Bootstrap’s markup:

Column One

Some Content

Column Two

Some Content

And here’s the same thing, using Foundation:

Column One

Some content

Column Two

Some more content.

One thing you’ll probably notice (if you look at the example pages, not the code above) is that both make heavy use of  presentational classes, and presentational markup. As someone who likes to try and keep style and content separate, this can be a bit of a nightmare. I won’t deny that in many ways, it speeds up the development process, but what about when you inevitably decide to change all of those regular buttons to bigger buttons?

However, that’s more of a personal preference issue. More objectively, I’d have to say that Foundation’s layout and presentational classes are more semantic than Bootstrap’s. By spelling out whole words, Foundation makes it easier to add properties to an element by straight up guessing.

Bootstrap’s classes, on the other hand, are more efficient once you get to know them, and take up fewer characters (for you byte-watching obsessives). My personal opinion is that Bootstrap has a slightly steeper learning curve, but it’s probably worth it for the sheer number of options you get right off the bat.

Speaking of which, it’s time to talk about:

Layouts, or “Grid Wars”

The grid has become such a ubiquitous tool in the field of web design, that it would be weird to find a framework that didn’t have one. Despite that fact, everyone seems to have different ideas about how CSS grids should be made. Bootstrap and Foundation are no exception.

Foundation’s Grid

The grid is one of the simplest aspects of ZURB’s framework, presenting you with fluid columns based on percentage widths, and exactly one break point. I, for one, agree with this layout philosophy for the most part. However, you are by no means at the mercy of the layout system if you want to change things.

Mobile-specific classes are provided, not only as a means of deciding what content is or isn’t displayed, but you can choose to use the grid on a smaller scale (as opposed to having all elements just stack themselves vertically).

box-sizing: border-box; is used so that you can add whatever paddings you want to any element. Of course, the caveat to this is that Foundation only supports Internet Explorer versions 8 and up.

Bootstrap’s Grid

Bootstrap provides three grid styles.

  • A fixed-width grid, in the classic 960 pixel dimensions. This is the default.
  • An adaptive grid, meaning multiple fixed-width layouts, and more than one breakpoint. This is the grid showcased in the example page I made.
  • A fully responsive grid, using only percentage values.

Switching between these grids is a matter of including/excluding a single CSS file, and changing some classes around, if you want the fluid grid. As with Foundation, mobile-specific classes are provided to make responsive design easier. Additionally, Bootstrap supports IE7, so it’s probably the way to go if that extra bit of backwards compatibility is important to you.

UI Elements

As stated before, to go into detail about each and every UI element provided by these two frameworks would take far too long. Instead, I’ll start by listing the elements and plugins provided by both frameworks.

  • Accordions
  • Alert boxes
  • Breadcrumb navigation
  • Buttons
  • Carousels (AKA image slideshows)
  • Custom table styles
  • Form customization
  • Modal windows
  • Navigation bars (with various visual formats)
  • Panels/Wells (visual emphasis for small bits of content)
  • Plugins for updating navbar classes based on page position
  • Progress bars
  • Tabbed navigation
  • Video element customization

On its own, that’s a pretty solid feature set for any framework, but both Bootstrap and Foundation come with some pretty awesome extras.

Bootstrap’s Extras:

Media Objects

Media objects are described on the website as: “Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.”

And because a picture is worth a thousand short descriptions:

Typeahead

Also known as auto-suggest, Bootstrap provides easy methods of adding suggestions to input elements in forms. Great for searches, and the like.

Affix

Have you ever wanted to make one of those navigation bars or boxes that stay with you once you go past some vertical point in the page? Well, Bootstrap makes adding this functionality almost insanely easy.

Foundation’s Extras

Pricing Tables

This might strike some people as almost superfluous, but most sites built to market some service or another use some sort of pricing table. It’s nice to have some base CSS for it included in a framework designed for making apps and marketing them.

Joyride

Now this is particularly cool for me. Let’s say you’ve developed an app, and want to take a new user through its basic functions for the first time. Joyride allows you to provide a guided tour of your web page or app, scrolling the window around wherever it needs to go. Additional use: navigation on a website that doesn’t follow the normal vertical flow.

Clearing

I personally haven’t ever encountered a UI framework that provided an image gallery function, and yet here we are! Clearing takes a regular unordered list with images, and turns it into a basic photo gallery.

Issues

I only found one major issue during my recent framework adventures, and that was that no one apparently thought you’d ever want to put a form in a dropdown. I had to create some custom CSS to make things look marginally usable in both frameworks.

Shrinking the window down to “mobile size” didn’t present a problem using Foundation, but Bootstrap shot the usability all to hell, and I didn’t have time to try to fix it.

In Conclusion

So which should you use? I’d argue that the answer will be different for everyone. You might not even use either of these frameworks, opting for another, or you might create your own code from scratch. But, there are some questions that might help you to determine which will better suit your needs:

  • How important is bandwidth?
  • How many of our users are using IE7?
  • What is your coding skill? (Foundation is by far easier to start with, in my opinion.)
  • What kind of grid would best suit our purpose?
  • Are we already working with LESS, or SASS?

I’m curious…

What are the criteria you use to decide on a framework? What aspects of your favorite framework made you fall in love? Do you generally use a different framework? Which one?

Please, let us know in the comments.

About the author

Ezequiel Bruni

Ezequiel Bruni is a web/UX designer, blogger, and aspiring photographer living in Mexico. When he's not building websites & apps, or ranting about them, he indulges in beer, pizza, fantasy novels, and stand-up comedy.

33 Comments to “UI Cage Match: Bootstrap 2.2.1 vs. Foundation 3.2”

  • Emiel says:

    Nice overview and comparison, tnx! And as often the case I guess, there’s no ‘right’ or ‘wrong’ answer to this. Personally I’ve found myself combining different parts of different frameworks to create my own little masterpiece :-) For instance I really like the bootstrap grid, navbar features and responsiveness (really can’t relate to your issues with going mobile with bootstrap :-)). At the same time I’m a huge fan of the really, really clean and well commented code of the beautiful bones framework, a wordpress ‘theme’ build around html5 boilerplate and ‘mobile first’ approach. I’ve also been playing around with foundation 3, Less Framework 4, Skeleton and ’320 and up. But I generally stick to the first two, also because I prefer working with Less :-)

    VA:F [1.9.22_1171]
    Rating: +1 (from 1 vote)
    November 22nd, 2012 at 9:38 pm · Reply
    • Ezequiel Bruni says:

      I know, right? There’s something that just feels right about LESS syntax.

      I’ve also used Skeleton in the past, but I was never a big fan of LESS Framework. Well, back when I was checking it out, the default grid used ten columns, and I’ve never found a use for a ten-column grid until I redesigned my own personal site, recently.

      VN:F [1.9.22_1171]
      Rating: 0 (from 0 votes)
      November 22nd, 2012 at 10:33 pm · Reply
    • Ezequiel Bruni says:

      Also, regarding my usability problems with Bootstrap at mobile sizes, I was specifically referring to what happened when I put a form in a drop-down. Maybe I should express that more clearly.

      VN:F [1.9.22_1171]
      Rating: 0 (from 0 votes)
      November 23rd, 2012 at 4:41 pm · Reply
  • Fernando says:

    Hello, first off congratulations for the post! very good stuff.
    I use a very lightweight micro framework, called responsiveAeon (www.newaeonweb.com.br/responsiveaeon) also build with Less for presentation and a grid based on 1200px.
    From the above i preffer foundation for the fast learning curve, but bootstrap is very powerfull too.

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
    November 23rd, 2012 at 2:02 am · Reply
    • Ezequiel Bruni says:

      Thanks. I’ll take a look at responsiveAeon, as I’ve never heard of it before. Always looking for something new to experiment with.

      VN:F [1.9.22_1171]
      Rating: 0 (from 0 votes)
      November 23rd, 2012 at 4:41 pm · Reply
  • Ramón Ramos says:

    Whoa, I’m really looking forward to learn web development. Do you know if these programs work with Frontpage?

    VA:F [1.9.22_1171]
    Rating: +29 (from 33 votes)
    November 25th, 2012 at 8:23 pm · Reply
    • Ezequiel Bruni says:

      Please, nobody kill Ramón. He’s a friend of mine and this is his idea of a joke.

      VN:F [1.9.22_1171]
      Rating: +10 (from 10 votes)
      November 25th, 2012 at 8:31 pm · Reply
      • Wasim says:

        Oops.. just voted down.

        VA:F [1.9.22_1171]
        Rating: +2 (from 2 votes)
        November 27th, 2012 at 6:32 pm · Reply
      • Rod says:

        I lol’d…

        VA:F [1.9.22_1171]
        Rating: 0 (from 0 votes)
        March 22nd, 2013 at 8:33 pm · Reply
      • gaetane says:

        Oh… does that mean they don’t work with Frontpage?

        ^_^

        VA:F [1.9.22_1171]
        Rating: 0 (from 0 votes)
        June 15th, 2013 at 11:18 pm · Reply
  • Simon Taggart says:

    Nice article, one point I would make though regarding the weight of the two frameworks, I’ve noticed with foundation 2 things that don’t help it’s cause. Firstly the version of Jquery used on Foundation is the un minified version, about 186kb large than the version on your bootstrap demo.

    Secondly, and I’ve raised this with Zurb, the foundation.min.js file, actually contains a minified version of jQuery and modernizr again, duplicating both libraries on the page. That’s a fair extra bit of weight.

    VA:F [1.9.22_1171]
    Rating: +4 (from 4 votes)
    November 30th, 2012 at 5:12 am · Reply
    • Ezequiel Bruni says:

      Hey, thanks for clarifying that. It’s good to know exactly why Foundation is heavier.

      VN:F [1.9.22_1171]
      Rating: 0 (from 0 votes)
      January 18th, 2013 at 2:54 am · Reply
  • melanke says:

    Well, I dont get why people need bootstrap or foundation. You only need to learn how to use css float property

    VA:F [1.9.22_1171]
    Rating: -19 (from 23 votes)
    January 4th, 2013 at 4:12 pm · Reply
    • Cristián Arenas Ulloa says:

      Could you elaborate a lil’ bit more?
      Oh, please, enlighten us.

      VA:F [1.9.22_1171]
      Rating: 0 (from 0 votes)
      February 21st, 2013 at 11:05 pm · Reply
      • Rod says:

        Another lol…

        VA:F [1.9.22_1171]
        Rating: +2 (from 2 votes)
        March 22nd, 2013 at 8:34 pm · Reply
        • gaetane says:

          ^_^

          VA:F [1.9.22_1171]
          Rating: 0 (from 0 votes)
          June 15th, 2013 at 11:19 pm · Reply
    • Alao says:

      Have you ever heard of the term don’t reproduce the wheel… This helps developers reuse many styling that they would otherwise have to create. If you don’t see the advantage of using a framework then you don’t understand web-development as a whole.

      VA:F [1.9.22_1171]
      Rating: +1 (from 1 vote)
      March 24th, 2013 at 5:48 pm · Reply
  • Johny says:

    Hi, i am looking for some frameworks in wordpress, i got the bootstrap for wp, but i will like to know more…

    If you guys could help that would be very handy.

    Regards,

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
    January 15th, 2013 at 4:42 pm · Reply
    • Ezequiel Bruni says:

      Just Google “Foundation for WordPress”. I remember using a theme based on Foundation before…

      VN:F [1.9.22_1171]
      Rating: 0 (from 0 votes)
      January 18th, 2013 at 2:53 am · Reply
  • Martin says:

    Thanks for the comparison, help me solve my debate … I am more familiar with LESS, so I am choosing bootstrap. After I get my feet wet with a couple sites, I might switch over to Foundation, just to try it out.

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
    January 18th, 2013 at 2:46 am · Reply
    • Ezequiel Bruni says:

      Hey, glad I could help. Do check out both in time… it’s worth being familiar with all of the pros and cons on a personal level.

      VN:F [1.9.22_1171]
      Rating: +1 (from 1 vote)
      January 18th, 2013 at 2:52 am · Reply
  • Andrew says:

    As a beginner-intermediate CSS user, I found the examples and documentation of Bootstrap far superior to a few other CSS frameworks I checked out. This was the primary consideration that lead me to use Bootstrap. If I can see how features work and look, I can use them with greater ease.

    VA:F [1.9.22_1171]
    Rating: +2 (from 2 votes)
    February 1st, 2013 at 7:07 am · Reply
  • Dark Phoenix says:

    One big big advantage of Foundation over Bootstrap that I ran into, is that most of the Foundation components are self-contained. For example, if you want to use the Susy grid component instead of Foundation’s grid component, it’s rather easy to do so, since none of Foundation’s other components rely on its grid. OTOH, I once tried to cherry-pick features from Bootstrap into my project… let’s just say it’s a recipe for nightmare maintenance and leave it at that. The Form component relies on the Button component and the Grid component, etc.

    VA:F [1.9.22_1171]
    Rating: +1 (from 1 vote)
    February 4th, 2013 at 2:32 pm · Reply
  • Jabari says:

    I’m a PHP programmer and haven’t really done any major design/layout work since the days of table layouts. :-O I’m fleshing out a personal project and decided to use either Foundation or Bootstrap. Although the overall size of Foundation disturbs me a bit (in comparison to Bootstrap), I decided to go with it anyway because the the components seem to be much more modular and the markup is more intuitive (to me anyway). Also, I noticed that unused components of Foundation can be removed, so I’m pretty sure I’ll be able to bring the overall size of the framework down a bit.

    Thanks for posting this!

    VA:F [1.9.22_1171]
    Rating: 0 (from 2 votes)
    February 4th, 2013 at 10:29 pm · Reply
  • ben bibikov says:

    Bootstrap and Foundation frameworks, are really about SASS and LESS. You might as well write code from scratch unless you use LESS or SASS which are two greats forces behind each of these frameworks. Now, if you’re a front-end web designer like myself, Bootstrap with LESS is a no brainer. The first question you have to ask yourself is, have you ever tried installing SASS and Foundation? It’s a pain, requiring you to go back all the way to DOS days to get the thing properly installed. There is just too many clouds surrounding the installation, usage, lack of proper documentation, and compilers. It’s a processor geared toward developers. Until they make installation easy and intuitive, and due away with compilers, SASS will be embraced largely by develop community.

    VA:F [1.9.22_1171]
    Rating: -3 (from 3 votes)
    February 21st, 2013 at 9:39 pm · Reply
    • Ray says:

      Not sure what you are talking about. SASS is incredibly well-documented. The SASS system is written in Ruby, so you’ll need Ruby installed to get and update the SASS gem (the Ruby package).

      I seriously do not understand the aversion people have for the command line (what you referred to with “DOS days”). You type a command and hit enter, end of story, it’s not rocket science. That said, you can always use a GUI like Scout ( http://mhs.github.com/scout-app/ ) and clickety-click away.

      VA:F [1.9.22_1171]
      Rating: 0 (from 2 votes)
      March 8th, 2013 at 3:03 am · Reply
    • gaetane says:

      I’m a back-end developer and I was forced into the horror of Perl when I tried a local install of Bugzilla (if memory serves, I’ve kind of blacked that whole period out). I have nothing against command line (as mentioned by the comment below), in fact, my programming days started with good old DOS and monochromatic screens o.O The Perl/Ruby packages concept sounds good UNTIL you actually try to use it. Then there’s bloodshed. And tears. God help you if packages change but the dependencies still stay the same. Fear for your life when there are a WHOLE lot of dependencies.

      I have no doubt that when you are a Perl/Ruby ninja, 9th dan, you would not face such a nightmare. I am sure both languages are very… (I was trying to think of something nice to say but I’ve got nothing). ^_^

      So I just saw the “Ruby” part of the install when I was looking into SASS (and the clickety-click GUI too) and said “PASS”. Call me old fashioned, but I like to be able to fix any unexpected issues in nothing more severe than notepad when I am without my beloved Netbeans. Down here in Africa life is forever changing at a whirlwind pace, but if there’s one thing I can be sure of when I go to a client’s business, it’s that they have notepad. I may be in an area with no mobile reception, but there will always be notepad… and dial-up… Brings a tear to my eye… :’(

      So! My prefered poison is Joomla! 3x with Bootstrap and JUI, heavily modified template and a very awesome plugin that compiles the LESS for me (and no, no command line just -> install plugin -> enable plugin -> refresh front-end… ^_^ when I’m done with changes to the LESS -> refresh front-end (one last compile) -> disable plug-in OR change setting to not force recompile on page refresh, only when changed ^_^.

      Sorted. Clickety-click.

      Will be looking into stealing some of the Foundation add-ons. Useful stuff ;)

      VA:F [1.9.22_1171]
      Rating: 0 (from 0 votes)
      June 16th, 2013 at 12:11 am · Reply
  • Hootsieroll says:

    Thanks for the article, I find myself going back and forth on the regular. I’m about to re-build a large scale production site from the ground up and was wondering if anyone has had experience with how well either of these frameworks scale?

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
    March 1st, 2013 at 2:58 pm · Reply
  • Jasa Pembuatan Website Toko Online murah says:

    i like Bootstrap only

    VA:F [1.9.22_1171]
    Rating: +1 (from 1 vote)
    March 14th, 2013 at 9:40 am · Reply
  • Cubicle Ninjas says:

    Thanks for the overview!

    I agree that I like the look of Foundation’s markup better, but I’d prefer Bootstrap’s extra’s a bit more. I also prefer SASS, but course bandwidth is _always_ an issue.

    Very tough choice. I agree though, that it’s depends on your project and your personal preference.

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
    March 14th, 2013 at 9:53 pm · Reply
  • vicente ocana says:

    In my experience as a Interaction DEsigner looking for a rapid prototyping tool, I would say that FOundation (specially V4) gives a hell more of control over a responsive design (and that is something very valuable for UX designers).

    On the other side, Twitter Bootstrap has a much greater community adding functionnalities, widgets and code for this platform.

    Soconcerning which is better or worse, I guess that depends on what do you intend to do with the framework.

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
    March 25th, 2013 at 1:51 pm · Reply
  • Laugher says:

    Lots of awesome stuff…
    And Jokes too…

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
    March 25th, 2013 at 2:07 pm · Reply
  • Activechase webdesign says:

    Well study, I first started with the 960gs with adapt.js .. I then tried both bootstrap and Foundation, one thing I don’t like about foundation is that their latest version (4) doesn’t support ie8 or ie7. unfortunately there are still many users who are browsing on these old machines and your decisions should really be concerned by this fact.

    VA:F [1.9.22_1171]
    Rating: +2 (from 2 votes)
    March 27th, 2013 at 2:22 pm · Reply

Post a comment

Pageviews: 42931 · Back to Top