Updated December 12, 2014 with Skeleton 2.0.1

Responsive CSS Framework Comparison

Bootstrap vs. Foundation vs. Skeleton

@vermiliondesignRead the blog post

Overview

  Bootstrap 3 Foundation v5 Skeleton v2.0.1 New
Summary
  • Grids: Fluid
  • UI tools: Lots of widgets; good for rapid prototyping
  • History: Mobile-first update to the style guide for internal tools developed by Twitter
  • Grids: Fluid. Best in class grids across all viewports.
  • UI tools: Powerful and modular set of tools. More style agnostic than Bootstrap.
  • History: Performance and efficiency improvements to v4
  • 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
Version 3.2 5.2.2 2.0.1
Last Released June 26, 2014 April 4, 2014 December 11, 2014
Website getbootstrap.com foundation.zurb.com getskeleton.com
GitHub github.com/
twbs/bootstrap
github.com/zurb/
foundation
github.com/
dhgamache/
Skeleton
Creator Twitter ZURB Dave Gamache
License MIT License MIT License MIT License
Browser Support Chrome (Mac, Windows, iOS, and Android)
Safari (Mac and iOS only)
Firefox (Mac, Windows)
Opera (Mac and Windows)
IE8+
Desktop: Chrome, Firefox, Safari, IE9+
Mobile: iOS (iPhone), iOS (iPad), Android 2, 4 (Phone), Android 2, 4 (Tablet), Windows Phone 7+, Surface
Latest and previous versions of Chrome, Firefox, Opera, and Safari; IE9+
Vermilion Commentary Unlike the release from 2 to 3, Bootstrap 3.2 has no major changes from 3.1. Changelog can be found here.

New features include: 1.) Responsive Embeds - classes to proportionately scale down iframes or embeds, 2.) Responsive Utility Classes - now greater control over visibility and hidden classes for block, inline-block, and inline, so now the old .visible-xs can be .visible-xs-block, and 3.) Copy Docs Snippets - usage of 3rd party service ZeroClipboard, to allow for faster copying and pasting for developers of code snippets.

Additional backend/administrative changes of bootstrap were made, including 1.) "LMVTFY" - bootstrap now validates code automatically before adding it in the GitHub repo, 2.) What Bootstrap is calling the "Wall of Browser Bugs" - see more about it at http://getbootstrap.com/browser-bugs/, and 3.) Docs have been updated to be easier to follow.

Many bug fixes were made, among them include: improved progress bar for flexibility, css repaint performance (most notably through scrolling), keyboard navigation added to carousel, modal fix from shifting left upon open.
Foundation 5 is similar to version 4, with some performance improvements and developer tools. In conjunction with v5, ZURB also announced an official enterprise consulting service.

Version 5 switches to jQuery 2, removing support for Zepto, which was added in v4. This change, along with the addition of fastclick.js, should make performance better for both desktop and mobile users.

New templates were also released with v5 for faster prototyping.

On the Sass side, ZURB added Libsass to improve compilation performance.

Finally, the developer docs have been significantly improved.

You can read more here
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.

CSS

  Bootstrap 3 Foundation v5 Skeleton v2.0.1 New
Reset normalize.css normalize.css normalize.css
LESS Y N N
Sass/Scss Y Y N

Grids and Responsiveness

  Bootstrap 3 Foundation v5 Skeleton v2.0.1 New
Base width Fluid (480px, 768px, 992px, 1200px) Fluid (max-width 62.5em default) Fluid (max-width 960px default)
Columns 12 1-16 with customizer (12 default) 12
Single column class syntax .col-xs-1 .col-sm-1 .col-md-1 .col-lg-1 .small-1.columns .medium-1.columns .large-1.columns .one.column
Two column class syntax .col-xs-2 .col-sm-2 .col-md-2 .col-lg-2 .small-2.columns .medium-2.columns .large-2.columns .two.columns
Container syntax <div class="container"> Not available <div class="container">
Row syntax <div class="row"> <div class="col-xs-2 col-sm-8 col-md-6 col-lg-5">...</div> <div class="col-xs-10 col-sm-4 col-md-6 col-lg-7">...</div> </div> <div class="row"> <div class="small-8 medium-6 large-4 columns">...</div> <div class="small-4 medium-6 large-8 columns">...</div> </div> <div class="row"> <div class="four columns">...</div> <div class="eight columns">...</div> </div>
Gutter-free row syntax Not available <div class="row collapse"> Not available
Nested column syntax <div class="row"> <div class="col-md-6"> <div class="row"> <!-- nested columns add up to 12 --> <div class="col-md-2">...</div> <div class="col-md-4">...</div> </div> </div> </div> <div class="row"> <div class="small-6 columns"> <div class="row"> <!-- nested columns add up to 12 --> <div class="small-6 columns">...</div> <div class="small-6 columns">...</div> </div> </div> </div> Columns cannot be nested
Offset column syntax <div class="row"> <div class="col-lg-4">...</div> <div class="col-lg-4 col-lg-offset-4">...</div> </div> <div class="row"> <div class="large-1 columns">1</div> <div class="large-8 large-offset-3 columns">8, offset 3</div> </div> <div class="row"> <div class="four columns">...</div> <div class="four columns offset-by-four">...</div> </div>
Centered syntax Not available <div class="row"> <div class="small-3 small-centered columns">3 centered</div> </div> Not available
Ordering syntax <div class="row"> <div class="col-lg-9 col-lg-push-3">...</div> <div class="col-lg-3 col-lg-pull-9">...</div> </div> <div class="row"> <div class="small-2 push-10 columns">first in mobile/last in desktop</div> <div class="small-10 pull-2 columns">first in desktop/last in mobile</div> </div> Not available
Four column mobile syntax <div class="row"> <div class="col-xs-3">...</div> <div class="col-xs-9">...</div> </div> <!-- Now done through small- column prefixes: --> <div class="row"> <div class="small-3 columns">...</div> <div class="small-9 columns">...</div> </div> Not available
Block grids syntax Not available <!-- Using only the small-block-grid --> <ul class="small-block-grid-2"> <li>...</li> <li>...</li> </ul> <!-- Using only the large-block-grid --> <ul class="large-block-grid-4"> <li>...</li> <li>...</li> </ul> <!-- Using both block grids together for different layouts --> <ul class="small-block-grid-2 large-block-grid-4"> <li>...</li> <li>...</li> </ul> Not available
Visibility class syntax Screen size based: .visible-xs .visible-sm .visible-md .visible-lg .hidden-xs .hidden-sm .hidden-md .hidden-lg Can be combined with block, inline-block, and inline, ex: .visible-xs-block .visible-xs-inline-block .visible-xs-inline Print based: .visible-print .hidden-print Screen size based: .show-for-small .show-for-medium-down .show-for-medium .show-for-medium-up .show-for-large-down .show-for-large .show-for-large-up .hide-for-small .hide-for-medium-down .hide-for-medium .hide-for-medium-up .hide-for-large-down .hide-for-large .hide-for-large-up Orientation based: .show-for-landscape .show-for-portrait .hide-for-landscape .hide-for-portrait Device based: .show-for-touch .hide-for-touch Not available
Media queries syntax /* Small devices - Tablets (>768px) */ @media (min-width: 768px) {} @media screen and (min-width: 768px) {} @media (min-width: 768px) and (max-width: 991px) {} /* Medium devices - Desktops (>992px) */ @media (min-width: 992px) {} /* Large devices - Desktops (>1200px) */ @media (min-width: 1200px) {} // Small screens @media only screen {} /* Define mobile styles */ @media only screen and (max-width: 40em) {} /* max-width 640px, mobile-only styles, use when QAing mobile issues */ // Medium screens @media only screen and (min-width: 40.063em) {} /* min-width 641px, medium screens */ @media only screen and (min-width: 40.063em) and (max-width: 64em) {} /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */ // Large screens @media only screen and (min-width: 64.063em) {} /* min-width 1025px, large screens */ @media only screen and (min-width: 64.063em) and (max-width: 90em) {} /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */ // XLarge screens @media only screen and (min-width: 90.063em) {} /* min-width 1441px, xlarge screens */ @media only screen and (min-width: 90.063em) and (max-width: 120em) {} /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */ // XXLarge screens @media only screen and (min-width: 120.063em) {} /* min-width 1921px, xxlarge screens */ /* 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) {}

UI and Widgets

  Bootstrap 3 Foundation v5 Skeleton v2.0.1 New
Alerts Y Y N
Badges Y Y — .label.round N
Breadcrumbs Y Y N
Buttons Y Y Y
Carousel Y Y — Orbit N
Collapse/Accordion Y — Panel Y — Sections N
Dropdown Y Y N
Forms Y Y Y
Form Validation N Y — Abide N
Grids Y Y Y
Icons Y — Glyphicons Y — with download N
Labels Y Y N
Lists Y Y Y
Lists (horizontal) Y Y N
Media Object Y — Media Object N N
Modal window Y Y — Reveal N
Navigation Y Y N
Navigation - Sticky Y — Affix Y — Magellan N
Navigation - Off Canvas N Y N
Pagination Y Y N
Panels Y Y N
Popovers Y — Popover Y — Tooltips N
Pricing tables N Y N
Print styles Y Y N
Progress bars Y Y N
Responsive media N Y — Interchange N
Right-to-Left N — bumped to next version Y — Right-to-Left Support N
Scrollspy Y Y — Magellan N
Tables Y Y Y
Tabs Y Y N
Thumbnails Y Y N
Tooltips Y Y N
Tour N Y — Joyride N
Typeahead N N N
Typography Y Y Y
Video scaling Y Y N