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:
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:
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.
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 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:
<section class="container"> <div class="row"> <div class="span8"> <h1>Column One</h1> <p>Some Content</p> </div> <div class="span4"> <h2>Column Two</h2> <p>Some Content</p> </div> </div> </section>
And here’s the same thing, using Foundation:
<section class="row"> <div class="eight columns"> <h1>Column One</h1> <p>Some content</p> </div> <div class=""four columns> <h2>Column Two</h2> <p>Some more content.</p> </div> </section>
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.
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 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.
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.
- Alert boxes
- Breadcrumb navigation
- 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.
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:
Also known as auto-suggest, Bootstrap provides easy methods of adding suggestions to input elements in forms. Great for searches, and the like.
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.
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.
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.
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.
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.
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?
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.