Responsive CSS Framework Comparison: Bootstrap, Foundation, Skeleton

Responsive CSS Framework Comparison: Bootstrap, Foundation, Skeleton.

Nice Comparison chart; Bootstrap, Foundation and Skeleton.

Bootstrap
Full solution for making a responsive website. Out of the box, styling is minimal but elegant for making prototypes. The default bootstrap UI can be modified by using LESS. The process of setting up LESS with Bootstrap is vague in documentation and took sometime to figure out. In the long run, using variables in LESS works great for updating properties efficiently, especially for larger websites. The component and plugin library is large enough and community support continues to grow. Overall, bootstrap is a great framework to streamline the process of development.

Foundation V3
Foundation 3 is not quite a drop-in upgrade for v2.

Important changes include removing .container elements, adding modular scale typography, and dropping IE7 support (v3 uses box-sizing: border-box).

Visibility classes moved from device-based to feature-based names (.show-on-phones is gone, but .show-on-touch was added).

A more detailed migration guide is also available.

Skeleton

Its bag of tricks is very light. That seems to be its purpose, thus the name is fitting.

Responsive considerations seem like a bit of an afterthought. Examples: tabs do not stack for mobile versions; 1-column images (tiny, since it’s a 16-column grid) go to full-width (huge) in the two narrow layouts.

Documentation on nested columns is wrong: use .row to contain multiple .columns (documentation says to use .columns for everything). And yet, .row does not automatically apply a clearfix for its nested junk, which seems like a natural step.

Syntactically similar to 960.gs.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>