Why version 2.0 of WeCodeArt will use Foundation CSS !

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

-Grid System

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 !

-UI Elements

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 !

Equalizer

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.

Joyride

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!

Flat Design

In terms of CSS design like elements colors and borders here I choose Foundation over BootStrap again, simply because it use flat desing!

Final Words

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 !