Vermilion Design + Digital Vermilion

https://www.vermilion.com/wp-content/themes/taco-theme/_/img/vermilion-logo.png?v=20
 

Responsive CSS Framework Comparison

Updated December 7, 2015 with Foundation 6

Overview

  Skeleton 2.0.1 Skeleton
Summary
  • Grids: Fluid
  • UI tools: Limited
  • History: Mobile-first update, new percentage-based grid, more robust form styles, new basic table styling and super basic code styling
  • Grids: Fixed
  • UI tools: Limited
  • History: Style agnostic and intentionally lightweight
Version 2.0.1 1.2
Last Released December 11, 2014 June 20, 2012
Website getskeleton.com getskeleton.com
GitHub github.com/
dhgamache/
Skeleton
github.com/
dhgamache/
Skeleton/
releases/
tag/
v1.2
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.

CSS

  Skeleton 2.0.1 Skeleton
Reset normalize.css Inspired by Eric Meyer's reset
LESS N N
Sass/Scss N N

Grids and Responsiveness

  Skeleton 2.0.1 Skeleton
Base width Fluid (max-width 960px default) 960px
Columns 12 16
Single column class syntax .one.column .one.column
Two column class syntax .two.columns .two.columns
Container syntax <div class="container"> <div class="container">
Row syntax <div class="row"> <div class="four columns">...</div> <div class="eight columns">...</div> </div> <div class="row"> <div class="four columns">...</div> <div class="eight columns">...</div> </div>
Gutter-free row syntax Not available Not available
Nested column syntax Columns cannot be nested <div class="row"> <div class="six columns clearfix"> <!-- nested columns add up to parent total --> <div class="three columns alpha">...</div> <div class="three columns omega">...</div> </div> </div>
Offset column syntax <div class="row"> <div class="four columns">...</div> <div class="four columns offset-by-four">...</div> </div> <div class="row"> <div class="four columns">...</div> <div class="four columns offset-by-four">...</div> </div>
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 /* Larger than mobile */ @media (min-width: 400px) {} /* Larger than phablet (also point when grid becomes active) */ @media (min-width: 550px) {} /* Larger than tablet */ @media (min-width: 750px) {} /* Larger than desktop */ @media (min-width: 1000px) {} /* Larger than Desktop HD */ @media (min-width: 1200px) {} /* Smaller than standard 960 (devices and browsers) */ @media only screen and (max-width: 959px) {} /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (min-width: 768px) and (max-width: 959px) {} /* All Mobile Sizes (devices and browser) */ @media only screen and (max-width: 767px) {} /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 480px) and (max-width: 767px) {} /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width: 479px) {}

UI and Widgets

  Skeleton 2.0.1 Skeleton
Alerts N N
Badges N N
Breadcrumbs N N
Buttons Y Y
Carousel N N
Collapse/Accordion N N
Dropdown N N
Forms Y Y
Form Validation N N
Grids Y Y
Icons N N
Labels N N
Lists Y N
Lists (horizontal) N N
Media Object N N
Modals N N
Navigation N N
Navigation - Sticky N N
Navigation - Off Canvas N N
Pagination N N
Panels N N
Popovers N N
Print styles N N
Progress bars N N
Responsive media N N
Right-to-Left N N
Scrollspy N N
Tables Y N
Tabs N Removed in v1.2
Thumbnails N N
Tooltips N N
Tour N N
Typeahead N N
Typography Y Y
Video scaling N N