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.

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.

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

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:

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.

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

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:

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.

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.