Top 5 Core Differences Between Bootstrap 3 and Foundation 5


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.

Read More >

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright ©2012-2016 Inc. All rights reserved. | Privacy Policy