If you’re a web designer who’s looking for a sleek, simple and responsive front-end framework, you’ve probably heard of both Bootstrap and Foundation. That’s because these are the two most popular frameworks around right now.
In your mind, you’re probably also thinking…Bootstrap vs. Foundation…Bootstrap vs. Foundation! Which should I use? Which can get me to where I have a fully functioning, new website more efficiently? Relax—we’ve got you covered.
Before we dive into the details of each framework, know that each one has its pros and cons. At the end of this blog post, you’ll make a decision on which is better based on your unique situation, your needs and your familiarity with code in the first place.
That said, Bootstrap was created by former Twitter employees while Foundation is the brainchild of ZURB, an interaction design company that can boast a client list that includes eBay, Facebook and even the NYSE.
We want you to be armed with all of the latest information about each framework, so that you can make the best decision for your web-design projects. Let’s dive right in.
The Grid System
The most noticeable part of a front-end framework is its grid system. With a grid system, designers are able to prototype various layouts and then make any necessary adjustments as they see fit. Foundation initially made its name with the grid system, being the first of the two frameworks not just to go responsive, but also to really flesh out the mobile-first approach for a period of time.
However, after some time, Bootstrap caught up and has closed the gap. In other words, any slight advantage that Foundation had at the beginning with its grid system is pretty much gone now.
Still, there are a couple of specific grid features in Foundation worth mentioning. It’s called the block grid, and it empowers designers to efficiently divide the contents of unordered lists into a grid that’s evenly spaced. In addition, Foundation also makes it a cinch to quickly collapse columns as well as remove gutters because of the collapse class. Alternately, you can remove center columns by using the center columns syntax.
Designers have the ability to produce equivalent code snippets in both frameworks that function almost in the same way. Even so, the syntax for building grids can be a tad different, which means that personal preference will be the decider in the end.
Now let’s talk flexible and pre-defined grids. Both Bootstrap and Foundation come with a default grid system that’s totally in your hands to customize with Less and Sass, respectively. Bootstrap’s default grid mode is attached to breakpoints. This means that it’s going to give you static-sized widths that’ll recede when the viewport is at its limit. However, if designers use the class .row-fluid instead, the width relies on percentages (just like Foundation).
Sizing Units
When it comes to calculating typography, widths and basically everything else, Bootstrap relies on pixels, but Foundation uses rems. There are clear differences between the two, yet both can create the same outcomes. Again, it’s a personal preference thing for web designers.
While pixels may feel more familiar to web designers and graphic artists without that much experience, rems help designers think more about proportions. Think of pixels as absolute units while rems are relative units. That’s something to consider, especially in this day and age of responsive design.
At the end of the day, though, don’t beat yourself up too much about the distinction between the two. It all comes down to personal preferences and comfort levels: If you’re a fan of working with pixels, then Bootstrap is the framework for you! When you use pixels, you’ll have to specifically set the width, height, padding and margin of components and their nested elements on each target device and screen size you’re working with.
Features
To someone just getting familiar with both front-end frameworks, it would seem that both have an almost identical collection of pre-built features. As always, looks can be deceiving, which is why there are actually small, but important differences between the two that you should familiarize yourself with.
Foundation comes with built-in form validation from Abide. Bootstrap doesn’t have this feature, but that’s not an issue by any means since, again, it all comes down to the designer’s personal preference and what he’s most comfortable working with. Interchange is another feature unique to Foundation: It relies on media queries to load responsive content that’s suitable for different browsers. Right-to-left support, off-canvas navigation, tours and pricing tables round out the features list of Foundation.
Bootstrap, on the other hand, comes with features that feel more complete and thought-out, from the standpoint of designers. Look at it this way: The features that come pre-built with Bootstrap are much more conducive to efficiently getting designers up and running with their objective of building a functional website with a theme. So if you value productivity, then Bootstrap has to be your framework of choice.
Bootstrap’s also added responsive embeds, which makes it a cinch to now incorporate responsiveness to different elements.
The Ability to Customize
Just by looking at the names of these two, front-end frameworks, you can glean something about the visual customization of each. Bootstrap removes friction from your path, so that you can create a website as efficiently as possible and have it up and running; Foundation tends to offer a few more customization options when it comes to visual appearance, which can slow you down a bit.
With Bootstrap, your websites tend to appear as though they were made with Bootstrap—that is to say that the default Bootstrap look, if you will, only goes away when you either add a theme or spend some time with custom styling. It’s all good, though: If you don’t want people to know off the bat that you built your site with Bootstrap, just explore the custom styling features to add more unique touches to your website’s appearance.
By the way, you can thank Bootstrap’s early popularity (it’s more popular than Foundation) for this so-called “Bootstrap look.” Foundation, by comparison, has a default appearance that looks a lot closer to how your browser would look, in many cases. As a result, it’s a bit simpler to tweak and shape into a more individualized and unique design look.
A quick word on themes: When it comes to sheer choice in the theme department, Bootstrap can’t be beat. It has a larger assortment of themes that are readily available. Sure, Foundation themes are available as well, but just know that they’re not available in as much abundance as Bootstrap themes are. And, unless you’re a designer who just wants to have all of your websites more or less look the same, you’ll naturally appreciate the greater variety and more choices that Bootstrap’s themes offer.
Mobile
Because of responsive design and the increasing popularity of mobile use, you’d be crazy not to design ANY site with mobile in mind. It’s interesting to point out how each front-end framework handles the mobile question.
Foundation’s approach is to encourage designers to tackle the mobile question head-on by its easy-to-follow rule:
Anything not under a media query is going to be considered as mobile
Now, should designers want something to look differently on a computer or tablet, then they’ll have to specify the media query. This is known as mobile-first CSS development.
Bootstrap approaches the mobile question from a totally different angle. Should designers want to design for mobile, they’ll have to specify the media query for it. If designers don’t design for mobile first, their mobile users are simply going to have to contend with seeing the desktop view.
Designing elements with a desktop-first mentality means you’ll have to think a little bit harder to successfully arrange all your elements on a mobile screen, but it’s totally doable. On the other hand, Foundation’s mobile-first approach obviously lets designers focus more on what sort of content is relevant and interesting to the user while space considerations are secondary.
Browser Support and Performance
Browser support and performance are both very good on Bootstrap and Foundation, with one exception: Foundation does not support Internet Explorer 8. If that doesn’t bother you, then that’s your call, but some designers may feel restricted by that lack of support.
That said, when it comes down to sheer performance between Bootstrap vs. Foundation, the differences aren’t all that great…or even that noticeable. Sure, there will be some minimal performance gaps, but these are largely based on the specific features (framework components, browser environments, etc.) that support designers, as opposed to issues surrounding the front-end frameworks themselves.
Community and Support
If there’s one category that favors one framework over the other, it would have to be community, where Bootstrap clearly has the upper hand. Bootstrap has a huge following of designers and developers which means you’re more likely to get support if you run into issues.
In addition, there are a wealth of plugins and widgets that can be strapped onto the framework, which further extends Bootstrap’s functionality for more efficient web development.
Bootstrap vs. Foundation: Which Framework Wins?
When it’s all said and done, the question isn’t really that simple. As we’ve talked about, there are pros and cons to each front-end framework, and whether designers want to choose one over the other largely depends on their personal preference and comfort level.
If you enjoy having a large selection of themes, then Bootstrap is the way to go. No doubt about it. If you have a preference for rems over pixels, then maybe Foundation isn’t so bad after all. If you want to enjoy support for Internet Explorer 8, then better stick to Bootstrap. However, if designing for mobile first is important…well, Foundation puts an emphasis on that. Then again…if community support and more choice in the form of plugins and widgets are important, you can’t beat Bootstrap’s bigger following and larger selection.
At any rate, if you enjoy building stellar websites that live on the Internet, you can’t really go wrong with either front-end framework. So ask yourself what features of each are more useful to you. We hope we’ve helped make the decision for you a whole lot clearer!
If you already use one framework over the other, be sure to let us know why in the comments below.
