Framework for Responsive Web design

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.

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.