Foundation 4 Is Better Than Twitter Bootstrap 2. Here’s Why.

A few months ago I wrote my first Twitter Bootstrap vs. Foundation 4 article. The article does a good job of sizing up the frameworks based on their stats. It’s basically a “tale of the tape” article. My conclusion was that it was a toss up on which framework you should use. Each had their benefits, or at least differences, and both seemed worth trying. To be clear, I wrote this about Twitter Bootstrap 2 and not the new Bootstrap 3 RC1 that’s recently been released.

What I didn’t say in my article is that at the time, I had only had experience personally working with Twitter Bootstrap. Foundation 4 looked like a worthy competitor but since I didn’t have direct experience working with both frameworks, it truly seemed like it could go either way.

Boy was I wrong.

Foundation 4 is a Superior Framework to Twitter Bootstrap

I just had my first experience working with Foundation 4 building a website for a local limo service company. Truthfully, I started designing it in Twitter Bootstrap. When I was working with the clients on the design, I ran my mouth about how the site would be responsive and would work awesomely on both PC and mobile platforms. I wasn’t concerned because I knew I had Bootstrap in my back pocket. But working in Bootstrap presented two problems, one small and one not so small.

The Foundation 4 version

Foundation 4 Has a Better Grid System

The annoying issue was that the responsive grid sized itself to 1170 pixels. While my screen is certainly large enough to see it, it just feels large. Most other sites on the Net are more narrow. As a result, the spacing felt just a little odd.

The real problem revealed itself when I wanted to exert control over how the site looked on mobile screens. Let me be blunt: Twitter Bootstrap is half-baked when it comes to formatting for mobile devices.

The entire idea of a responsive grid is that it works on small and large screens. But if the grid isn’t designed for mobile, it makes reconfiguring all of the divs so that your site looks good on a mobile screen a bit of a nightmare.

This became clear to me when the client called and asked me if I could work up the front page to put on the website while I was designing the rest of the website. I took my psd and sliced it up and then coded the page in Bootstrap. It looked kinda big, because of the 1170 pixel wide grid, but it looked like my design, so I was happy. Then I found CyberCrab, a sweet tool that shows any website in popular device formats. Looking at the site when it’s formatted for PCs or an iPhone became instantly as easy as clicking a button.

And when I clicked the button to view my Bootstrapped page as its seen on the iPhone, it looked lame.

Yes, technically, the site was responsive. The divs collapsed and the content flowed in such a way that the site technically “worked”. But it looked terrible. The majority of my formatting was lost. Grids of icons became one long row of icons. It looked like the work of a designer who didn’t care.

But that wasn’t true. I cared, dammit!

Foundation 4 is Mobile-First

That’s when I remembered about Foundation 4’s two-grid system. Foundation 4 uses both a small and a large grid allowing developers to specify how divs should behave on both small and large screens. I knew that Foundation 4 touted itself as a “mobile-first” platform, but I didn’t really get it until I got my hands on it and started working with it.

I’m not lying to you when I say this: Foundation 4 comes as close as you can to making CSS layouts something that’s fun to do. Because CSS layouts are not fun. Don’t let anybody tell you different. But Foundation 4 changes all of that.

What’s so great about it is that you can declare how many columns a div should take up when on a large screen and then ALSO define how many it should take up on a small screen. The net effect is that you can create complex mobile layouts really easily. Just add a few class names and that’s it.

Let me illustrate this for you.

On the front page for Event Shuttle Service, there’s a grid of icons giving ideas for when to use their vehicles.

Event Shuttle Service icons

In Twitter Bootstrap, on a small screen that same list would look like this:

Event Shuttle Service Icons in Twitter Bootstrap

Coded with Twitter Bootstrap

That’s one full screen on the iPhone 5. Users would have to scroll through 4 screens to see all the icons, which seems lame. It’s obvious that a second row could fit. But how can you do that in Bootstrap easily when there’s only one grid? The answer is: you can’t. You’re on your own.

It’s about this time when I started panicking and decided to try out Foundation 4. After reworking the page in Foundation 4, that same grid looked like this on the iPhone 5:

Coded using Foundation 4

Coded using Foundation 4

Two columns! And to be honest, I could change that to four columns with one keystroke, if I wanted.

Let’s take a quick look at the code that makes this possible.

Rather than give you the somewhat lengthy code for the entire grid, let’s just look at one icon:

<div class="small-6 large-3 columns">
     <img src="img/icons/concerts.png">
     <p>Concerts</p>
</div>

The way Foundation 4 works is super easy. You need a div with a class of “row” (not pictured) to establish, you guessed it, a row. Each row is comprised of 12 columns. This is true whether you’re spanning the entire page or whether you’re nesting your grid. The magic number is always 12. As long as the divs in your row add up to 12, there won’t ever be any problem. All that’s left is to declare whether you want to use the small or large grid. In this case, we declared how we want the icons to look on the large grid AND the small grid.

The “small-6” is telling the browser to display 1 column that goes half way across the screen. The “large-3” tells the browser to display 1 column that goes a quarter across the screen (because 3×4 = 12). The net effect is that on a large screen, there are four icons in a row and on a small screen there are two icons in a row.

Super helpful.

But Foundation 4 is just getting started.

Another issue I had was that I had 8 icons that I wanted to spread evenly across the 12 columns which would then collapse into two rows of four, for small screens. Again, Foundation 4 had me covered. They include something called a Block Grid that will take any list and spread it evenly across a row.

The effect is that when viewing this page on a large screen, all of the icons space themselves out equally across the page.

Screen Shot 2013-08-03 at 3.01.42 AM

And when viewed on a small screen, they collapse neatly into two rows.

Screen Shot 2013-08-03 at 3.01.26 AM

That behavior was accomplished with this code:

<div class="row">
     <div class="large-12 columns">
          <ul class="small-block-grid-4 large-block-grid-8">    
             <li><img src="img/icons/seating.png">
               <p>Wrap Around Leather Seating</p></li>
             <li><img src="img/icons/icechest.png">
               <p>Built In Ice Chest</p></li>
             <li><img src="img/icons/party-lights.png">
               <p>Party Lights</p></li>
             <li><img src="img/icons/shades.png">
               <p>Privacy Shades</p></li>
             <li><img src="img/icons/flatscreen.png">
               <p>2 Flat Screen TVs</p></li>
             <li><img src="img/icons/surround-sound.png">
               <p>Surround Sound</p></li>
             <li><img src="img/icons/dvd.png">
               <p>DVD Player</p></li>
             <li><img src="img/icons/mercedes.png">
               <p>Mercedes-Benz Quality</p></li>
          </ul>
     </div>
</div>

As you can see, the div with the class of “row” is first, followed by  a class of large-12. This indicates one bit column. Then, nested within is an unordered list. It has two classes: “small-block-grid-4” and “large-block-grid-8”. Hopefully that’s self-explanatory. It says that for small screens, display 4 list items per row and for the large grid, show 8 list items per row.

My next issue was needing to use an image slider. If you’re using Twitter Bootstrap, you can use their “Carousel“, though it’s not clear if it formats for mobile or whether it’s swipeable. But with Foundation 4, you get an image slider called Orbit. And Orbit IS designed for mobile.

Using a combination of Orbit and the show and hide classes in the grid, I was able to make some really nice galleries for my client’s Party Van. I created a page with icons that when clicked take you to the orbit gallery:

Screen Shot 2013-08-03 at 3.11.19 AM

But when viewed on mobile screens, only the middle image is show. It’s shown larger, and tapping it takes the user to the Orbit image gallery. And all of it was done with just a handful of classes.

Yes, that's Jenna in the pic.

Yes, that’s Jenna in the pic.

Foundation 4 also had other features (similar to what’s in Twitter Bootstrap 2) that worked beautifully including their form styles and modal window.

Foundation 4 even has icons, similar to the Font Awesome (aka Bootstrap Icons) that have been designed for Twitter Bootstrap, that I added to my design. Though I’ll be honest, their documentation leaves a little to be desired here.

And speaking of documentation, without a doubt, Foundation 4 is better documented. The icons page is an exception to this. But in just about every other case, Foundation 4 does a better job explaining itself in the docs than does Twitter Bootstrap.

ZURB is More Useful than the Bootstrap Community

It’s probably a rude thing to say but the Bootstrap community is pretty lame. Let me say this another way: very little from the Bootstrap community is production ready. All of the helper products from Jetstrap on down may help you get started, but when the coding gets hot and heavy, you quickly notice their limitations. It’s nice that there’s such a large community but with the exception of Font Awesome, I’ve found it to be of limited value. For what it’s worth I’ve tried using Fuel UX on two projects and have abandoned it both times.

ZURB on the other hand is amazing. Twice already I’ve had guys from them reach out to me, unsolicited, just to say hi. The most recent was yesterday when Chris emailed me to say he enjoyed the Foundation versus Bootstrap article.

I wrote him back asking him about my only issue with Foundation 4. It involves jQuery.

The Event Shuttle Service website uses WordPress for its CMS. This meant creating a custom theme from scratch using Foundation 4. All was good until I started trying out different plugins. When I tried the NextGen Gallery or Google Analyticator plugin, all of the “do stuff” buttons broke on the site. A little investigating revealed that the plugins were breaking jQuery. And that’s when I first learned about running jQuery in no conflict mode.

Now, I’ll be honest. Javascript isn’t my strong suit. My best hope was that somebody else had run across this problem and had posted online about it.

Then Chris wrote me.

I ran my problem up the ZURB flagpole and in a few hours Chris wrote back. He had copied another guy – Mark – on my question. Mark emailed me with a page he posted on Github in response to my question with the freaking answer. I mean, the code is just there. Cut, paste, and bam… no more problems.

You can’t ask for more than that in the way of support.

The one thing I didn’t tackle with the Event Shuttle Service website was adaptive images. If that’s a new phrase to you, essentially, what that means is that ideally the page would load high or low resolution images based on your screen size. Thus, small screens would get smaller images with smaller file sizes and larger screens would get bigger images with larger file sizes. Though I never got around to implementation, I at least considered it. The best answer out of the gate seemed to be Adaptive Images. But it’s worth noting that ZURB thought of this too. They have their own solution called Interchange. I have no doubt that I’ll be trying this with my next project. And if the past is any guide, it will end up being just what I need.

To Recap

To recap, Foundation 4 is better because it’s mobile-first with two grids, it has loads of helpful bits to help you customize your site, has better documentation, and ZURB is a kick ass company that has seen fit to figure out just about all of your problems before you have them and to have already created a solution for them. And in the event they haven’t, email them and they’re likely to help you out.

I see that Bootstrap is coming out with version 3 – their own mobile-first design. That’s nice and all but I don’t see myself going back. I’ll likely review it for the site once the release candidate becomes final but mark my words: use Foundation. It’s amazing.

24 comments on “Foundation 4 Is Better Than Twitter Bootstrap 2. Here’s Why.

  1. Pingback: Twitter Bootstrap vs Foundation 4 - Which One Is Right For You?

  2. Interesting, but Bootstrap is (or will be soon) in version 3. You can get the RC1 on http://getbootstrap.com/ and it’s getting almost better than Foundation. Almost every single of your arguments above have to be reconsidered with this new version.
    Great article though, thanks for the comparison !

    • While half of what you are saying is true, I’ve already tested the bootstrap 3 RC1 … they are just trying to replicate Foundation, yet still not a solid grid system at all.

      One thing that they finally got is not forcing text & box shadows to let users have clean basic template to begin with.

      I remember going into a debate with them 8 months ago about the mobile-grid, they saw nothing useful in it but now they’re just trying implement it not to be stepped over by other emerging Frameworks such as Gumby or PureCss.

  3. Sold!

    I have been intending to test Foundation 4 out after I chose Bootstrap over Foundation last year. I chose it because it was easier to find Bootstrap template sites (my design skills suck – easier to buy and customise than design from scratch).

    Will try it again – I liked what I saw the last time, but Bootstrap support for Rails seemed easier at the time too. The Zurb support for Foundation 4 was still pretty buggy.

    Thanks for switching me back on to it.

    • Mike, if you run into any issues, hit somebody from ZURB up on Twitter. They’ve always been incredibly responsive, from the CEO down.

      Out of curiosity, what bugs were you running into before?

  4. Hi Ben,

    Great write up and from similar experience I agree 100%! I originally used Foundation 3 and it was simply awesome. I then tried Bootstrap and it was great but once I got into the little (extremely important) details for mobile, etc. it wasn’t so great at that point anymore. Oh how I missed the out-of-the-box flexibility of Foundation.

    I’ve followed Bootstrap 3 development and RC1 feels heavily inspired by Foundation – just sayin’… if you’ve used both then it’s easy to see this.

    Preference aside, I absolutely love the fact that we actually have these tools FREEly available to us. There’s no doubt that so much hard work goes into all of them and for that I am sooooo grateful.

    In the end though, after using both on client projects I quickly went back to where it all (literally) began – Zurb’s Foundation. It just hasn’t failed me in any way and it keeps getting better with every release.

  5. I drank the ZURB koolaid a long time ago with their apps and have been using Foundation for the nearly two years. The fact that they are ahead of the curve is what drew me to them instead of Bootstrap. Bootstrap 3 will being playing catch-up with Foundation 4, while Foundation 5 is already in the works.

    • Really? Have you actually tried some of the themes from that org? Erratic scaling, overflow issues…not pretty.

      Difficult to say if it’s a Bootstrap issue or poor implementation on the site developers’ part.

  6. I would be very interested in seeing how you compare bootstrap version 3 to Foundation 4. I’m very new to building with these frameworks, and your articles are very helpful, thanks.

  7. Pingback: Twitter Bootstrap 3 vs Foundation 4 - Which One Should You Use? | A Better User Experience

  8. The MAIN problem of Foundation is it is not using jquery.

    Why?. As a small independient developer, it is not an issues but, sometimes, i want to work for some business and i can’t say “this is better so re-educate your designer/developers to work with zurb instead of jquery”.

    JQuery is the de-facto standard, even MS and Oracle already adopted it.

  9. With the release of Bootstrap 3 do you think your opinion will change? I’m curious because one of the pieces that was missing was Bootstrap’s lack of mobile first but that has changed with version 3. I’m still a proponent of Zurb, but if the tides have changed I’m willing to look at going with the better product.

    • Take a look here for my comparison to Bootstrap 3. The short answer is YES I still very much prefer Foundation. Though the more I think about it, the more it chaps my ass that the grid won’t work in IE8 while it will in Bootstrap 3 – but that by itself hasn’t been enough to push me back to Bootstrap. It’s also worth noting that with the most recent Foundation 4 update (to v.4.3), they’ve also introduced a medium grid. It’s still experimental, so there are probably bugs. It’s slated for an official release in v5 which I believe should be out in 6-8 weeks.

  10. Pingback: Twitter Bootstrap 3 vs Foundation 4 | IT Media Connect

  11. Rolling my own grid system has always been easier for me. It does exactly what I need it to do and it won’t break in WordPress or Drupal, when installing plugins or additional nodes. I tried Bootstrap 3 recently and like everything, it has pros and cons. The tab widget stopped working after I added a regular contact form. Most importantly, the framework is code heavy, class heavy to be specific. I have not tried foundation yet, I pray that it’s leaner.

  12. Hey, great article. One question for you: You say “As long as the divs in your row add up to 12, there won’t ever be any problem.”. But, then you have 4 small-6 divs in a single row, that add up to 24. I know it works, but, is it the Foundation’s way for doing that? Maybe one should use a block grid here too? Thanks!

  13. Nice read. I guess a lot of the points don’t apply now with the release of Bootstrap 3.0 and the responsive grid. When you’re talking about grid sizes Bootrap 3 is flexible through LESS variables and you can set your own grid sizes, I personally think the large Bootstrap 3.0 grid is a tad wide. I’ve only used Foundation 3 and 4 5 or 6 times and never bothered with customising SASS variables, although I would has thought a simialr thing is possible with SASS? Both frameworks aim for the same thing and both do it very well. For me, Bootstrap 3.0 just edges it due to the grid naming and more available addons. I’m personally taking a look into the gumbly framework at the moment as a further alternative too.

    Also, the points people are making about silly things like shadow and formatting for the default Bootsrap theme need to have a read about LESS. THis allows you to easily remove such things via LESS, you don;t have to use the default Bootrap CSS 😉

Leave a Reply