Updated December 7, 2015 with Foundation 6

Responsive CSS Framework Comparison

Bootstrap vs. Foundation vs. Skeleton

@vermiliondesignRead the blog post

Overview

  Bootstrap 4.0.0-alpha Foundation 6 New Skeleton 2.0.1
Summary Updates in version 4.0.0-alpha:
  • Dropped Less in favor of Sass
  • Better grid system for mobile
  • Opt-in flexbox support - use Sass boolean to toggle
  • Wells, Thumbnails, and Panels have been replaced by Cards
  • New reset called Reboot (combination of normalize.css and Bootstrap base styles)
  • Dropped IE8 support
  • Moved from px to rem and em units
  • All JS plugins rewritten in ES6
  • Completely rewritten and improved documentation
Blog post here
Fountation 6 Updates:
  • 50% code reduction
  • Components built with more attention to Web Accessibility
  • Fewer default styles to override
  • Customizable Sass Grid
    • Flexbox grid toggling
    • Custom breakpoints
  • ZURB prototyping tools
  • Motion UI
  • More flexible navigation patterns
  • 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 4.0.0-alpha 6 2.0.1
Last Released August 19, 2015 November 19, 2015 December 11, 2014
Website v4-alpha.getbootstrap.com foundation.zurb.com/sites getskeleton.com
GitHub github.com/
twbs/bootstrap
github.com/zurb/
foundation-sites
github.com/
dhgamache/
Skeleton
Creator Mark Otto and Jacob Thornton at Twitter ZURB Dave Gamache
License MIT License MIT License MIT License
Browser Support Mobile
  • Chrome - Android and iOS
  • Firefox - Android
  • Safari - iOS
  • Android Browser & WebView - Android
Desktop
  • Chrome - Mac/Win
  • Firefox - Mac/Win
  • IE9+ - Win (IE9 limitations)
  • Opera - Mac/Win
  • Safari - Mac
“Unofficially, Bootstrap should look and behave well enough in Chromium and Chrome for Linux, Firefox for Linux, and Internet Explorer 8 and below, though they are not officially supported.” -Bootstrap 4 Docs
  • Last Two Versions of:
    • Chrome
    • Firefox
    • Safari
    • Opera
    • Mobile Safari
    • IE Mobile
  • IE 9+
  • Android Browser 2.3+
Latest and previous versions of Chrome, Firefox, Opera, and Safari; IE9+
Vermilion Commentary Bootstrap 4.0.0-alpha is a fairly large update to the framework. It has dropped Less support in favor of Sass, converted from px-based to rem-based sizing, improved its grid system, and dropped IE8 support. Also, all its JS plugins were re-written in ES6, it now uses a customized reset CSS file called Reboot, and offers flexbox support via a Sass boolean variable.

In addition to this update, Bootstrap now offers themes at themes.getbootstrap.com.

Also, Bootstrap will continue supporting version 3, unlike the dropping of version 2 support after the release of version 3.

You can read more here.
Foundation 6 is a fairly major update which includes more grid flexibility, custom breakpoints, optional flexbox, and more.

Like Bootstrap 4, Flexbox is now toggleable via Sass in Foundation 6.

The Sass/CSS has been reworked and consolidated, and there are fewer default styles to override on common elements.

Sass/CSS and JavaScript components have been refactored to allow a 50% overall file size reduction and more modularity.

The code for components is by default more accessible than previous versions in terms of keyboard and screenreader support.

Responsive menus can swap between dropdown, drilldown, and accordion navigation patterns per breakpoint.

The documentation now includes a nifty search feature for quick component/mixin/function searching.

There is an hour and 20min long Foundation 6 screencast that is well worth watching and learning from.
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 4.0.0-alpha Foundation 6 New Skeleton 2.0.1
Reset reboot.css (_reboot.scss) normalize.css normalize.css
LESS N N N
Sass/Scss Y Y N

Grids and Responsiveness

  Bootstrap 4.0.0-alpha Foundation 6 New Skeleton 2.0.1
Base width Fluid (0, 34em, 48em, 62em, 75em) Fluid (max-width 75rem default) Fluid (max-width 960px default)
Columns 12 1-infinity (12 default) 12
Single column class syntax .col-xs-1 .col-sm-1 .col-md-1 .col-lg-1 .col-xl-1 .small-1.columns .medium-1.columns .large-1.columns .[custom]-1.columns .one.column
Two column class syntax .col-xs-2 .col-sm-2 .col-md-2 .col-lg-2 .col-xl-2 .small-2.columns .medium-2.columns .large-2.columns .[custom]-2.columns .two.columns
Container syntax <div class="container"> or <div class="container-fluid"> <div class="row"> <div class="container">
Row syntax <div class="row"> <div class="col-xs-2 col-sm-4 col-md-6 col-lg-7 col-xl-8">...</div> <div class="col-xs-10 col-sm-8 col-md-6 col-lg-5 col-xl-4">...</div> </div> <div class="row"> <div class="small-8 medium-6 large-4 [custom]-2 columns">...</div> <div class="small-4 medium-6 large-8 [custom]-10 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 large-collapse medium-uncollapse [custom]-collapse"> Not available
Nested column syntax <div class="row"> <div class="col-sm-9"> <div class="row"> <!-- nested columns add up to 12 --> <div class="col-xs-8 col-sm-6">...</div> <div class="col-xs-4 col-sm-6">...</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-md-4">...</div> <div class="col-md-4 col-md-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-md-9 col-md-push-3">...</div> <div class="col-md-3 col-md-pull-9">...</div> </div> <div class="row"> <div class="small-2 push-10 columns">first in small/last in large</div> <div class="small-10 pull-2 columns">first in large/last in small</div> </div> Not available
Four column mobile syntax <div class="row"> <div class="col-xs-3">...</div> <div class="col-xs-9">...</div> </div> <!-- small- or [custom]- column prefixes: --> <div class="row"> <div class="small-3 [custom]-3 columns">...</div> <div class="small-9 [custom]-9 columns">...</div> </div> Not available
Block grids syntax Not available <!-- Using multiple block grids with various breakpoints --> <div class="row small-up-1 medium-up-2 large-up-4 [custom]-up-6"> <div class="column">...</div> <div class="column">...</div> <div class="column">...</div> <div class="column">...</div> <div class="column">...</div> <div class="column">...</div> </div> Not available
Visibility class syntax Viewport-based: .hidden-xs-down .hidden-sm-down .hidden-md-down .hidden-lg-down .hidden-xl-down .hidden-xs-up .hidden-sm-up .hidden-md-up .hidden-lg-up .hidden-xl-up Print-based: .visible-print-block .visible-print-inline .visible-print-inline-block .hidden-print Screen Size: .show-for-medium .show-for-[custom] .show-for-medium-only .show-for-[custom]-only .hide-for-medium .hide-for-[custom] .hide-for-medium-only .hide-for-[custom]-only Generic (CAUTION: hides from screenreaders): .hide (display: none;) .invisible (visibility: hidden;) Orientation: .show-for-landscape .show-for-portrait .hide-for-landscape .hide-for-portrait Accessibility: .show-for-sr (hides visually only) .show-on-focus (for skip-links and such) Not available
Media queries syntax // Extra small devices (portrait phones, less than ???px) // No media query since this is the default in Bootstrap // Small devices (landscape phones, 34em and up) @media (min-width: 34em) { ... } // Medium devices (tablets, 48em and up) @media (min-width: 48em) { ... } // Large devices (desktops, 62em and up) @media (min-width: 62em) { ... } // Extra large devices (large desktops, 75em and up) @media (min-width: 75em) { ... } // Sass mixins @include media-breakpoint-up(xs) { ... } @include media-breakpoint-up(sm) { ... } @include media-breakpoint-up(md) { ... } @include media-breakpoint-up(lg) { ... } @include media-breakpoint-up(xl) { ... } // Small None // Medium @media screen and (min-width: 40em) // Large @media screen and (min-width: 64em) // [Custom] @media screen and (min-width: [custom]em) // CUSTOM BREAKPOINTS (Sass) $breakpoints: ( //all px values are converted to ems small: 0px, medium: 640px, large: 1024px, xlarge: 1200px, xxlarge: 1440px, [custom]: ...px, ); /* 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 4.0.0-alpha Foundation 6 New Skeleton 2.0.1
Alerts Y Y — Callout N
Badges N Y — .badge N
Breadcrumbs Y Y N
Buttons Y Y Y
Carousel Y Y — Orbit is back N
Collapse/Accordion Y — Collapse Y — Accordion N
Dropdown Y Y — Dropdown, Drilldown, & Accordion menus N
Forms Y Y Y
Form Validation Y Y — Abide N
Grids Y Y Y
Icons N Y — with download N
Labels Y Y N
Lists Y Y — Menu Y
Lists (horizontal) N Y — horizontal is default in Menu N
Media Object Y — Media Object Y — Media Object N
Modals Y Y — Reveal N
Navigation Y Y — Menu N
Navigation - Sticky Y — .navbar-fixed- Y — Magellan N
Navigation - Off Canvas Y — Collapsible content Y N
Pagination Y Y N
Panels Y — now Cards Y — Callout N
Popovers Y Y — Tooltips N
Print styles Y Y N
Progress bars Y Y N
Responsive media N Y — Interchange N
Right-to-Left Unknown as of Aug 29, 2015. See also: RTL-Bootstrap Y — Right-to-Left Support N
Scrollspy Y Y — Magellan N
Tables Y Y Y
Tabs Y Y N
Thumbnails Y — now Cards Y N
Tooltips Y Y N
Tour N N - coming back in v6.1 N
Typeahead N N N
Typography Y Y Y
Video scaling Y Y N