Top 5 Core Differences Between Bootstrap 3 and Foundation 5

Developers, use Bootstrap. Front-enders, use Foundation.The rest of this article just explains why.

Updated to Foundation 5 and Bootstrap 3

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 tries to give you everything you’ll ever need to bootstrap your project. Foundation just gives you the foundation to build upon.

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

1- UI Elements

Foundation has 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.

2- REMs VS Pixels

Foundation use REMs and Bootstraps use pixels.

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

Foundation 5 is now using REM instead of EM, to avoid the EM cascade issue.

Now, there are moments when EM cascade will be desirable, and you can still use it. Suppose you state font-size: 80%; all the elements sized with EM will shrink by 20%. The REM sized elements will not be affected.

Its also worth mentioning that you can leave details you don’t want to change in pixels, so REMs units will be bonded to the html element font-size and EMs units will be bonded to the parent element font-size property.

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

.element {
 width: rem-calc(10px); // will be converted to REMs
}

3- Flexible and/or Pre-defined Grids

Both framework grids are quite similar, they gives you a default grid system but let you customise it with Sass or Less (Sass for Foundation and Less for Bootstrap.)

Bootstrap default grid mode is bound to breakpoints, meaning that it will give you static sized widths that will be reduced when the viewport reachs its limit. But you can also use the class .row-fluid and the width will use percentages, behaving the same way as Foundation’s grid.

Here is an example of how the following grid can be constructed in each framework:

Simple grid example and below how to accomplish it in both frameworks:

Foundation:

<div class="row">
   <div class="small-4 columns"></div>
   <div class="small-4 columns"></div>
   <div class="small-4 columns"></div>
</div>
<div class="row">
   <div class="small-6 columns"></div>
   <div class="small-6 columns"></div>
</div>
<div class="row">
   <div class="small-12 columns"></div>
</div>

Bootstrap:

<div class="row">
   <div class="col-sm-4"></div>
   <div class="col-sm-4"></div>
   <div class="col-sm-4"></div>
</div>
<div class="row">
   <div class="col-sm-6"></div>
   <div class="col-sm-6"></div>
</div>
<div class="row">
   <div class="col-sm-12"></div>
</div>

You can customize the column size according to the screen size just by combining css class names. Above, they are defining the column for any device, as we are using “small” class names.

Foundation has three points where the grid will change: small, medium and large, while Bootstrap have small, medium, large and extra large.

4- Mobile First VS Mobile Also

Foundation encourages you to design mobile first by adding a simple rule: anything that is not under a media query will be considered mobile. If you want it to look differently on a tablet or computer, then you will want to specify the media query. This is mobile first CSS development.

Bootstrap will do the otherway around. If you want to design things for mobile, you will specify a media query for it. If you for some reason forget to design mobile first, your mobile user will see the desktop design.

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 the base to your project?

The answer is: Bootstrap. Foundation. Respectively

If you like this article, please hit the “Recommend ” button bellow:)

Thank you