bootstrap_v_foundation

UI Cage Match: Bootstrap 2.2.1 vs. Foundation 3.2

by Ezequiel Bruni · Nov 22, 2012 · 33 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: 90628 · Back to Top