Responsive CSS Framework Comparison
Updated December 7, 2015 with Foundation 6
|Last Released||December 11, 2014||June 20, 2012|
|Creator||Dave Gamache||Dave Gamache|
|License||MIT License||MIT License|
|Browser Support||Latest and previous versions of Chrome, Firefox, Opera, and Safari; IE9+||Desktop: Chrome, Firefox, Safari, IE7+
Mobile: iPhone, Droid, iPad
|Vermilion Commentary||Skeleton 2 was updated in December 2014 after remaining mostly unchanged for about three years.
This update focuses on a new percentage-based grid, mobile-first media queries, a bit more default styling for tables, forms, and code elements, and changed its reset to normalize.css
The default font is now Raleway served by Google and the text is sized in rems
Here is a post about the update: medium.com/@dhg/dear-skeleton-452f4bb07d69
This is still the best approach for simplicity. It is technically not a “framework” since it is meant as a starting point for responsive websites, and it still uses vanilla CSS.
|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.
|Reset||normalize.css||Inspired by Eric Meyer's reset|
Grids and Responsiveness
|Base width||Fluid (max-width 960px default)||960px|
|Single column class syntax||
|Two column class syntax||
|Gutter-free row syntax||Not available||Not available|
|Nested column syntax||
|Offset column syntax||
|Centered syntax||Not available||Not available|
|Ordering syntax||Not available||Not available|
|Four column mobile syntax||Not available||Not available|
|Block grids syntax||Not available||Not available|
|Visibility class syntax||Not available||Not available|
|Media queries syntax||
UI and Widgets
|Navigation - Sticky||N||N|
|Navigation - Off Canvas||N||N|
|Tabs||N||Removed in v1.2|