While I was putting together Livetyping (my online course that teaches UX designers how to create prototypes in HTML, CSS, and Javascript), I used Foundation for the prototype that I showed how to build. But Foundation isn't the only front-end framework out there. So I decided to take a look at a couple of others to see how they compare. Enjoy.
If you're prototyping in HTML, CSS, and Javascript (or just thinking about it), you probably already know that using a framework can save you a lot of time, especially if your design needs to be responsive. (And these days, with a few exceptions, there aren't many reasons to make a design non-responsive.)
But how can you know which one is best, without downloading them all and trying them for yourself? This post aims to save you the hassle by explaining the pros and cons of each from a UX prototyping perspective.
The Contenders
The two most popular frameworks are Bootstrap, originally created at Twitter, and Foundation, created by product design company ZURB. There is also a dark horse candidate called Skeleton, which was created by Twitter designer and former ZURBian Dave Gamache.
What Are These Things, Actually?
All three of these frameworks let you lay out web pages on a responsive grid. This means that you can make your design work well on any screen size. If that's all you need, Skeleton fits the bill. (Bootstrap and Foundation also do this, but they bundle in a lot of extra stuff too.)
But for all but the simplest prototypes, you will almost certainly need more than just layout. The questions you need to be asking are What do we need? and What do we know?
If you need things like tabs, nicely-styled buttons and forms, standardized navigation components, consistent typography, and so on, then both Foundation and Bootstrap come with stuff that makes adding these things easy and fast (and they will look consistent too).
If you know how to do these things yourself (and want to), Skeleton could be the answer.
How They Look Out-of-the-Box
Skeleton
Bootstrap
Foundation
What You Get in the Box
Skeleton
Skeleton gives you a responsive grid, some basic typography, and some simple form and button styling. That's it.
Bootstrap and Foundation
In terms of feature lists, there is a lot of overlap between Foundation and Bootstrap. I won't list them all out here because others have already done a better job than I would (scroll down to UI and Widgets at the bottom of the page).
In short, they both provide a responsive grid, nice typography, improved form styling, and pretty much any UI component that you might see in a modern webapp. So instead of listing them out here, I'm going to point out some of the differences between the two:
-
Bootstrap comes with a set of 140 (naturally) icons. Foundation does not include icons, but ZURB have created several icon fonts and a set of social icons (as separate products) that you can use.
-
Foundation has iOS-style switches, which are a nice alternative to checkboxes.
-
Both Bootstrap and Foundation have visibility classes, which let you show and hide elements depending on the screen size. Foundation goes one step further by adding visibility classes for device orientation and touch support.
This means you can do things like:
-
Replicate the pattern seen in many iPad apps, where a sidebar is displayed in landscape mode and hidden in portrait.
-
Show affordances on touch devices that usually only appear on hover.
-
-
Bootstrap seems to offer more built-in options for styling tables.
-
Bootstrap includes iPad-style popovers.
-
Bootstrap comes with animated transitions for fade in/out and slide in/out.
-
Both Foundation and Bootstrap have wizards that let you customize their framework before you download it. Bootstrap seems to have more things you can customize, which may or may not be a good thing.
-
Foundation has 13 templates for common page layouts that you can download from their site. Bootstrap comes with eight example pages included in the download.
But maybe the most important difference between the two frameworks is that Bootstrap is much more style-heavy than Foundation. This means that you see lots of sites that are very recognizably built using Bootstrap. For prototyping this may not matter so much. After all, what we are prototyping is not the visual design, it's the layout and functionality. But on the other hand, if the way things look by default draws too much attention to itself, that may be a disadvantage.
As someone cleverly put it in an answer to a Quora question about this:
It is like the difference between buying a custom Lego kit or buying a bunch of Legos on eBay and then trying to build something from the kits that you scrapped together.
Other Factors
Up-to-date-ness
Foundation and Bootstrap are both being actively developed, and new versions are released frequently. Skeleton, on the other hand, has not been updated in months. But since what it does is relatively simple, and because it is not engaged in a feature war with the other two (just the opposite, in fact), this may not matter in the slightest.
Popularity
Now, you don't want to be a sheep and just go with the one that everyone else is using. But popularity does matter. It matters because Bootstrap is attracting people to develop other products that are based on it. And some of those could be quite useful to us.
Protostrap lets you put prototypes together more quickly by using PHP to reuse content. It also includes some enhancements to Bootstrap, including a fake authentication layer, a way to handle missing pages gracefully, an iOS tab bar, a carousel with touch support, more icons, and more.
Jetstrap is webapp that lets you lay out Bootstrap pages visually, without having to write any code.
There does not seem to be anything similar for Foundation yet.
Under the Hood: Less and Sass
Both Foundation and Bootstrap let you work in plain ol' CSS. But they both use a CSS preprocessor that lets you do more powerful things (and keep your code simpler). Bootstrap uses Less, while Foundation uses Sass. If you know what these are and have a preference, this may sway your decision.
Documentation
Another important factor is how easy it is to learn each framework. For this, you'll be relying on the provided documentation.
Skeleton's documentation is understandably sparse. There's not a lot to explain here, but the docs do a perfectly acceptable job of explaining it.
Foundation and Bootstrap both have very good documentation, but I think Bootstrap has a slight edge here.
Conclusions
Is any one of these head-and-shoulders above the others, a clear winner? No. All three frameworks are very competent.
So which one should you use? The answer is a typical, designerly "It depends".
Each one just has a different emphasis, so which one is right for you depends on what you're trying to do.
Do you mind all your prototypes having a similar look and feel? Maybe that's even a positive in your eyes. If so, Bootstrap is a strong contender.
Do you prefer to impose your own look and feel on your prototypes (not necessarily a proper visual design that approximates a finished product, but maybe one that looks more wireframe-y)? Foundation could be the one for you.
Do you have strong CSS and Javascript skills and want complete control over both the way your prototype looks and how it behaves? Then check out Skeleton.
"But which one do you use?" you ask. Well, I use Foundation. Why? Because I started using it before I'd even really heard about Bootstrap or Skeleton or had a chance to try them out.
And now I'm used to the way Foundation does things. I know how to do what I want in Foundation, so even if one of the other frameworks might be "better" for a particular project, I'm probably better off leveraging my existing experience with Foundation and bending it to fit the needs of the current project than to invest the time required to learn one of the others.
But if I was starting from scratch and trying to decide which one to use today, I'd probably discount Skeleton because Bootstrap and Foundation both provide so many useful extras. Using the provided components is much faster than reinventing the wheel and doing it yourself.
What it really comes down to is this: Can you live with Bootstrap's style-heavy approach? And will the same framework be used in production? (This may not be your decision to make…) If so, then it's more work (not for you, but still) to override Bootstrap's styles to make it look the way you want.