Bootstrap is the most popular front-end framework for developing responsive websites. Foundation it’s the most advanced responsive-end framework in the world.
I used only Bootstrap for WeCodeArt Thesis 2.0 skin but it seems is getting old and Foundation Zurb is starting to look more interesting for me. Everyone owns a smartphone and every site needs to be ultra-responsive in my opinion. So far from what I’ve read about Foundation Framework it looks to have some interesting features that we will review bellow.
Main Frameworks Features
Bootstrap: Base Width- Fluid; Columns-12
Foundation: Base Width- Fluid; Columns 1-16 with customizer (12 default)
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.)
-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.
Another reason for me to choose Foundation, it simply looks awesome on mobile devices !
Both frameworks have quite similar elements (alerts, badges, buttons, carousel, for, grid, icons, lists, etc) but since i build my own skin boxes this is not a very important aspect for me.
Features that bootstrap does not have !
You can create an equal height container using a few data attributes. Apply the
data-equalizer attribute to a parent container. Then apply the
data-equalizer-watch attribute to each element you’d like to have an equal height. The height of
data-equalizer-watch attribute will be equal to that of the tallest element.
I searched a lot for this and i finally found it ! This is a great way to make, for example, great looking service boxes or something else that require equal height.
What this plugin do ? Simple, Joyride gives users a tour of your site or app when they visit. More info about this you can find here!
In terms of CSS design like elements colors and borders here I choose Foundation over BootStrap again, simply because it use flat desing!
This are the main reasons that I want to highlight for why my next skin release will be built on Foundation CSS Framework – light, faster, better mobile support, extra required features for me and flat design ! If you have any features you like to implement in this skin use the comment form bellow !