Developers, use Bootstrap. Front-enders, use Foundation.

The rest of this article just explains why.

There are significant core differences between Bootstrap and Foundation, but if I can give you just ONE thing to remember, that thing is:

Zurb and Twitter made their objectives and intentions very clear when naming each CSS Frameworks: Bootstrap will have everything you’ll ever need to bootstrap your project. Foundation will have the least of things you will ever need as foundation for your project.

Keep this in mind while I list you some of the core differences between both CSS Framework:

1- UI Elements

Foundation have a very limited number of UI elements, Bootstrap have almost everything you can imagine.

Zurb’s intention with Foundation was NOT to make all the web look the same with pre-designed UI elements.

On the other hand, Bootstrap will give almost every UI element you can think of.

1EMs VS Pixels

Foundation use EMs and Bootstraps use pixels.

Using pixels means you will have to explicit declare a height, width, padding, margin of a component (and it’s nested element) on EVERY target device and screen size you want to give it a different look using media queries.

Using EMs means you can just state font-size: 80%; and have the whole component (and it’s nested elements) shrinked by 20%.

It’s also worth mentioning that you can leave details you don’t want to change in pixels, so only EMs units will be bonded to the font-size property.

Foundation will give you a sass mixin to convert pixels to EMs, so you can still think in pixels and end up with scalable em.

.element {
    width: emCalc(10px); // will be converted to EMs
}

3- Flexible Grid VS Pre-defined Grids

Foundation’s grid shrinks and stretchs according to the current browser width. Bootstrap has a pre-defined set of grid sizes for main devices and screens.

Bootstrap will abruptly change it’s grid like a transformer while you resize the browser width.

Foundation will fexibly adapt it’s grid to the current browser width, that is what they call layout will morth like a Transformer while resizing the browser width.

Foundation has two main points where the grid will change: small and large. Everything in between is shriknked and stretched to match the current browser width. No pre-defined screensizes, and the main reason of existing two points for the grid to change, is to encorage you to display columns differently for small and larger screens.

With Bootstrap you get can get a fixed or a fluid grid, that means respectively setting or not a pre-defined width to the grid container.

Using Foundation with Sass, you can change the size of your largest grid (and the smaller ones are automatically calculated), the number of columns for large screens, the number of columns for small screens and the column gutter for each.

4- Mobile First VS Mobile Also

Foundation was designed for ANY four corners screen. Bootstrap was designed for mobile, tablet, desktop and large desktops.

Building sites for mobile first means it will ALWAYS be usable on bigger screens. Because of this, Foundation encourages you to start this way.

If you use Foundation’s sass media query mixins, you will notice that no media query means what it will look on mobile and, on top of that, you use media queries to define what will look like on larger screens.

Bootstrap responsiveness was added as a feature in later versions. You get some special media queries for different screen sizes, but the main target is the desktop.

Designing things for desktop first may make it difficult for you to arrange your content on smaller screens, while mobile first helps you focus on what is most important content for the user, and enhance the experience as there is space too.

5- Community

Bootstrap has the larger community. You’ll have to get your hands dirty when using Foundation.

Something very nice about Bootstrap is the community. It is huge, and everywhere you look around you’ll find a gem or component built for Bootstrap.

If you are going with Foundation, getting your hands dirty is something you’ll have to get used to. Almost all solutions are made for Bootstrap so you’ll mostly like have to build your own.

Conclusion

Ask your self those questions: Do you want something easy to use and ready to make your web app come to life? Or do you rather plan your CSS carefully and have the least you need to use as base to your project?

The answer is: Bootstrap. Foundation. Respectively.