(Photograph from Flickr user Uppy Chatterjee)
I’ve been teaching web design in some capacity for about 5 years now, and lately one of the most frequently asked questions is, “Should I use Bootstrap or Foundation?”
Bootstrap (currently at v3.2) and Foundation (currently v5.3) are the two most popular front-end frameworks right now, so it’s certainly a sensible question to ask. Choosing between Bootstrap or Foundation is like choosing between red or white wine; one isn’t necessarily better than the other, they just pair well with different things, and people tend to develop personal preferences.
However, this isn’t just fuzzy taste buds we’re talking about here. This is code, with explicit logic and intent. So, there has to be some kind of difference, right? Let’s dig in.
Free trial on Treehouse: Do you want to learn to code? CLICK HERE FOR A FREE TRIAL.
Grid System
The most prominent part of a front-end framework is the grid system. It’s the core feature that enables designers and developers to rapidly prototype layouts and make quick changes with confidence. Foundation has always been slightly ahead of the curve in this area; it was the first big framework to go responsive and also the only big mobile-first framework for a period of time. However, Bootstrap also has these features in place now. The syntax for creating grids can be slightly different, so this is an area where personal preference might come into play, but it’s easy to create equivalent code snippets that do almost the exact same thing in both frameworks.
Block grids in Foundation can convert an unordered list into a grid.
Currently there are a few grid features in Foundation that might make it a better option in specific instances. My favorite is the block grid. This makes it simple to split the contents of an unordered list into an evenly spaced grid. Just specify the number of elements in each row and Foundation takes care of the rest. Foundation also has the ability to easily collapse columns and remove gutters with the collapse class, or center columns with the centered columns syntax.
Sizing Units
For calculating widths, typography, and nearly everything else, Bootstrap uses pixels and Foundation uses rems. There are functional differences between these two units that are important to understand, but both are capable of producing the same results. In other words, it’s mostly personal preference.
Pixels might be a little bit more familiar to graphic artists and new web designers, but I personally prefer to use the rem unit. Pixels are an absolute unit, but in the age of responsive design, a relative unit like rems helps me think in terms of proportions. Like I said, this is really a matter of perspective and personal workflow, so if you really love pixels, Bootstrap might be for you.
I admit, learning about the differences between pixels, ems, and rems is boring for most people. However, if you’re not familiar, it’s well worth taking the time to read this article from 2011 about font sizing with rems because it will save you lots of guesswork in the future.
Features and Components
At first glance, both frameworks appear to have a very similar list of pre-built components, but there are some slight differences that could help you make the decision.
Foundation has built-in form validation through Abide. That’s not to say that Bootstrap couldn’t also have form validation, but for some, the pre-made Foundation solution might be a nice head start. Foundation also includes Interchange, which is a robust solution for responsive images, although it might be more than you need. In addition to these two, there’s other handy features like right-to-left support, pricing tables, tours, and off-canvas navigation.
Bootstrap isn’t quite as feature-full, but in my own opinion, I also feel like many of Bootstrap’s features are in a more complete state. In other words, the default look of Bootstrap components seems more suited to quickly building a one-off website and adding a theme. Bootstrap also now includes responsive embeds, which makes it easy to add responsiveness to elements like <iframe>, <embed>, and <object>.
Customization
The ability to customize the visual appearance of each framework is hinted at in the names of the frameworks themselves. Bootstrap tries to give you everything you need to get a site up and running quickly, while Foundation tends to provide a better environment for customization.
Sites like Bootswatch provide high quality free themes for Bootstrap.
Bootstrap tends to make sites that look like they were made with Bootstrap. It’s only after adding a theme or digging deep into custom styling that the default look starts to fade. This “Bootstrap look” is underscored by the fact that Bootstrap gained more early popularity a few years ago. Foundation’s default look feels closer to browser defaults in many cases, which makes it (slightly) easier to mold into a unique aesthetic.
It’s also worth pointing out that Bootstrap tends to have a wider variety of themes readily available. Foundation themes are also available, but they’re not quite as abundant. This is important since variety is probably one of the most important things about themes.
Free trial on Treehouse: Do you want to learn to code? CLICK HERE FOR A FREE TRIAL.
Bootstrap or Foundation: The Verdict
For completeness, I should mention two areas I did not cover: browser support and performance. That’s because browser support and performance for both frameworks is so good that the differences are almost negligible and are highly dependent on the context. Some permutation of different framework components and browser environments might have a trivial performance gap. In other words, the important differences revolve around features that support designers and developers.
Even with the differences I highlighted in mind, I don’t think either framework has a massive advantage. However, I personally prefer using Foundation because of its slightly more robust grid system. When I design new web projects, I always start by thinking about the mobile experience before I move on to larger screen sizes, and I personally feel like Foundation has a slight edge with block grids and collapsible rows. However, I do still enjoy using Bootstrap when I just need a quick site without much customization, because I find that Bootstrap is easier to theme.
Of course, I’d like to hear from you, too. Do you prefer Bootstrap or Foundation? Do you use both? Let me know in the comments!
Join Nick on his course How to Make a Website