Vermilion Design + Digital Vermilion

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

Responsive CSS Framework Comparison

Updated December 7, 2015 with Foundation 6

Overview

  Bootstrap 4.0.0-alpha Bootstrap 3 Bootstrap 2 Foundation 6 New Foundation 5.5 Foundation 4 Foundation 3 Skeleton 2.0.1 Skeleton
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
  • 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 and fixed
  • UI tools: Lots of widgets; good for rapid prototyping
  • History: Built by Twitter as a style guide for internal tools
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. 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
Updates in version 5.5.0:
  • Now compatible with Sass 3.4
  • Improvements to Dropdowns to keep them from straying outside page boundaries
  • Dropdowns now automatically close when a link is clicked
  • Abide’s validations now work better
  • Split buttons can now support 2 different events
  • Accordions can now use <ul> elements instead of <dl> elements
Blog post here
  • Grids: Fluid. Best in class grids across all viewports.
  • UI tools: Powerful and modular set of tools. More style agnostic than Bootstrap.
  • History: Mobile-first update to the boilerplate developed by ZURB for client projects
  • Grids: Fluid. More robust grid tools than Bootstrap and Skeleton.
  • UI tools: Good for rapid prototyping, but not as expansive as Bootstrap
  • History: Built by ZURB as boilerplate for client projects
  • 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 4.0.0-alpha 3.2 2.3.2 6 5.5.0 4.3.2 3.2.5 2.0.1 1.2
Last Released August 19, 2015 June 26, 2014 May 17, 2013 November 19, 2015 December 12, 2014 September 23, 2013 January 26, 2013 December 11, 2014 June 20, 2012
Website v4-alpha.getbootstrap.com getbootstrap.com getbootstrap.com
/2.3.2
foundation.zurb.com/sites foundation.zurb.com
/sites/docs/v/5.5.3
foundation.zurb.com
/sites/docs/v/4.3.2
foundation.zurb.com
/sites/docs/v/3.2.5
getskeleton.com getskeleton.com
GitHub github.com/
twbs/bootstrap
github.com/twbs/
bootstrap/releases/
tag/v3.3.5
github.com/twbs/
bootstrap/releases/
tag/v2.3.2
github.com/zurb/
foundation-sites
github.com/zurb/
foundation-sites/
releases/tag/v5.5.3
github.com/zurb/
foundation-sites/
releases/tag/v4.3.2
github.com/zurb/
foundation-sites/
releases/tag/v3.2.5
github.com/
dhgamache/
Skeleton
github.com/
dhgamache/
Skeleton/
releases/
tag/
v1.2
Creator Mark Otto and Jacob Thornton at Twitter Mark Otto and Jacob Thornton at Twitter Mark Otto and Jacob Thornton at Twitter ZURB ZURB ZURB ZURB Dave Gamache Dave Gamache
License MIT License MIT License Code: Apache License v2.0
Documentation: CC BY 3.0
Icons: CC BY 3.0 from Glyphicons Free
MIT License MIT License MIT 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
Chrome (Mac, Windows, iOS, and Android)
Safari (Mac and iOS only)
Firefox (Mac, Windows)
Opera (Mac and Windows)
IE8+
Desktop: Chrome, Firefox, Safari, Opera, IE7+
Mobile: "tablets and smartphones"
  • Last Two Versions of:
    • Chrome
    • Firefox
    • Safari
    • Opera
    • Mobile Safari
    • IE Mobile
  • IE 9+
  • Android Browser 2.3+
Desktop: Chrome, Firefox, Safari, IE9+
Mobile: iOS (iPhone), iOS (iPad), Android 2, 4 (Phone), Android 2, 4 (Tablet), Windows Phone 7+, Surface
Desktop: Chrome, Firefox, Safari, IE9+
Mobile: iOS (iPhone), iOS (iPad), Android 2, 4 (Phone), Android 2, 4 (Tablet), Windows Phone 7+, Surface
Desktop: Chrome, Firefox, Safari, IE8+
Mobile: iOS (iPhone), iOS (iPad), Android 2 (Phone), Android 2 (Tablet), Windows Phone 7
Latest and previous versions of Chrome, Firefox, Opera, and Safari; IE9+ Desktop: Chrome, Firefox, Safari, IE7+
Mobile: iPhone, Droid, iPad
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.
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.
Bootstrap 2.3x is the last release cycle before 3.0.

Bootstrap is a full featured 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 some time 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 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.
Foundation 5.5.0 is an iteration of what is now called “Foundation for Sites”. Foundation for Sites is one of three versions of Foundation: Foundation for Apps,
Foundation for Sites,
and Foundation for Email.

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.
Foundation 4 was rewritten as a mobile-first implementation, and has a slightly different grid syntax.

This version provides access to both a small and large grid, so your HTML syntax may become more verbose, but also more flexible.

IE8 is no longer supported and the typography has changed from px- to em-based.

A detailed migration guide is available.
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).
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

  Bootstrap 4.0.0-alpha Bootstrap 3 Bootstrap 2 Foundation 6 New Foundation 5.5 Foundation 4 Foundation 3 Skeleton 2.0.1 Skeleton
Reset reboot.css (_reboot.scss) normalize.css normalize.css normalize.css normalize.css normalize.css normalize.css normalize.css Inspired by Eric Meyer's reset
LESS N Y Y N N N N N N
Sass/Scss Y Y N Y Y Y Y N N

Grids and Responsiveness

  Bootstrap 4.0.0-alpha Bootstrap 3 Bootstrap 2 Foundation 6 New Foundation 5.5 Foundation 4 Foundation 3 Skeleton 2.0.1 Skeleton
Base width Fluid (0, 34em, 48em, 62em, 75em) Fluid (480px, 768px, 992px, 1200px) Fluid and fixed (724px, 940px, 1170px; below 768px are single column and vertically stacked) Fluid (max-width 75rem default) Fluid (max-width 62.5em default) Fluid (max-width 62.5em default) Fluid (max-width 100%) Fluid (max-width 960px default) 960px
Columns 12 12 12 1-infinity (12 default) 1-infinity (12 default) 1-16 with customizer (12 default) 12-24 with customizer 12 16
Single column class syntax .col-xs-1 .col-sm-1 .col-md-1 .col-lg-1 .col-xl-1 .col-xs-1 .col-sm-1 .col-md-1 .col-lg-1 .span1 .small-1.columns .medium-1.columns .large-1.columns .[custom]-1.columns .small-1.columns .medium-1.columns .large-1.columns .small-1.columns .medium-1.columns .large-1.columns .one.column .one.column .one.column
Two column class syntax .col-xs-2 .col-sm-2 .col-md-2 .col-lg-2 .col-xl-2 .col-xs-2 .col-sm-2 .col-md-2 .col-lg-2 .span2 .small-2.columns .medium-2.columns .large-2.columns .[custom]-2.columns .small-2.columns .medium-2.columns .large-2.columns .small-2.columns .medium-2.columns .large-2.columns .two.columns .two.columns .two.columns
Container syntax <div class="container"> or <div class="container-fluid"> <div class="container"> <div class="container"> or <div class="container-fluid"> <div class="row"> <div class="row"> <div class="row"> <div class="container"> <div class="container"> <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="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="span4">...</div> <div class="span8">...</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="small-8 medium-6 large-4 columns">...</div> <div class="small-4 medium-6 large-8 columns">...</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> <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 Not available <div class="row large-collapse medium-uncollapse [custom]-collapse"> <div class="row collapse"> <div class="row collapse"> <div class="row collapse"> Not available 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="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="span6"> <div class="row"> <!-- nested columns add up to parent total --> <div class="span3">...</div> <div class="span3">...</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> <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> <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> <div class="row"> <div class="six columns"> <div class="row"> <!-- nested columns add up to 12 --> <div class="six columns">...</div> <div class="six columns">...</div> </div> </div> </div> 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="col-md-4">...</div> <div class="col-md-4 col-md-offset-4">...</div> </div> <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="span4">...</div> <div class="span4 offset4">...</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="large-1 columns">1</div> <div class="large-8 large-offset-3 columns">8, offset 3</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> <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 Not available <div class="row"> <div class="small-3 small-centered columns">3 centered</div> </div> <div class="row"> <div class="small-3 small-centered columns">3 centered</div> </div> <div class="row"> <div class="small-3 small-centered columns">3 centered</div> </div> <div class="row"> <div class="three columns centered">...</div> </div> Not available 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="col-lg-9 col-lg-push-3">...</div> <div class="col-lg-3 col-lg-pull-9">...</div> </div> Not available <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> <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> <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> <div class="row"> <div class="two columns push-ten">first in mobile/last in desktop</div> <div class="ten columns pull-two">first in desktop/last in mobile</div> </div> Not available Not available
Four column mobile syntax <div class="row"> <div class="col-xs-3">...</div> <div class="col-xs-9">...</div> </div> <div class="row"> <div class="col-xs-3">...</div> <div class="col-xs-9">...</div> </div> Not available <!-- 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> <!-- Now done through small- column prefixes: --> <div class="row"> <div class="small-3 columns">...</div> <div class="small-9 columns">...</div> </div> <!-- Now done through small- column prefixes: --> <div class="row"> <div class="small-3 columns">...</div> <div class="small-9 columns">...</div> </div> <div class="row display"> <div class="three mobile-one columns">...</div> <div class="nine mobile-three columns">...</div> </div> Not available Not available
Block grids syntax Not available Not available 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> <!-- 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> <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> <li>...</li> <li>...</li> </ul> <!-- 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> <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> <li>...</li> <li>...</li> </ul> <ul class="block-grid two-up"> <li>Two-up element</li> <li>Two-up element</li> <li>Two-up element</li> <li>Two-up element</li> <li>Two-up element</li> </ul> Not available 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 Viewport-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 Device-based: .visible-desktop .visible-tablet .visible-phone .hidden-desktop .hidden-tablet .hidden-phone 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) Viewport-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 Viewport-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 Viewport-based: .show-for-xlarge .show-for-large .show-for-large-up .show-for-medium .show-for-medium-down .show-for-small .hide-for-xlarge .hide-for-large .hide-for-large-up .hide-for-medium .hide-for-medium-down .hide-for-small Landscape-based: .show-for-landscape .show-for-portrait Touch-based: .show-for-touch .hide-for-touch Print-based: .print-only .hide-on-print Not available 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 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) {} /* Landscape phones and down */ @media (max-width: 480px) {} /* Landscape phone to portrait tablet */ @media (max-width: 767px) {} /* Portrait tablet to landscape and desktop */ @media (min-width: 768px) and (max-width: 979px) {} /* Large desktop */ @media (min-width: 1200px) {} // 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, ); // 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 */ /* Styles for screens that are at least 768px; */ @media only screen and (min-width: 48em) {} /* Medium Displays: 768px - 1279px */ @media only screen and (min-width: 48em) {} /* Large Displays: 1280px - 1440px */ @media only screen and (min-width: 80em) {} /* X-Large Displays: 1400px and up */ @media only screen and (min-width: 90em) {} /* Orientation: landscape */ @media screen and (orientation: landscape) {} /* Orientation: portrait */ @media screen and (orientation: portrait) {} /* Foundation Block Grids for above small breakpoint */ @media only screen and (min-width: 48em) {} /* Top bar */ @media only screen and (min-width: 58.75em) {} /* Very large display targeting */ @media only screen and (min-width: 1441px) {} /* Medium display targeting */ @media only screen and (max-width: 1279px) and (min-width: 768px) {} /* Small display targeting */ @media only screen and (max-width: 767px) {} /* Small display targeting */ @media only screen and (max-width: 767px) {} /* Landscape orientation targeting */ @media screen and (orientation: landscape) {} /* Portrait orientation targeting */ @media screen and (orientation: portrait) {} /* Mobile styles */ @media only screen and (max-device-width: 1280px) {} @media only screen and (max-width: 1279px) and (min-width: 768px) {} /* 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

  Bootstrap 4.0.0-alpha Bootstrap 3 Bootstrap 2 Foundation 6 New Foundation 5.5 Foundation 4 Foundation 3 Skeleton 2.0.1 Skeleton
Alerts Y Y Y Y — Callout Y Y Y N N
Badges N Y Y Y — .badge Y — .label.round Y — .label.round Y N N
Breadcrumbs Y Y Y Y Y Y Y N N
Buttons Y Y Y Y Y Y Y Y Y
Carousel Y Y Y Y — Orbit is back Y — Orbit [deprecated] Y — Orbit Y — Orbit N N
Collapse/Accordion Y — Collapse Y — Panel Y Y — Accordion Y — Sections Y — Sections Y N N
Dropdown Y Y Y Y — Dropdown, Drilldown, & Accordion menus Y Y Y N N
Forms Y Y Y Y Y Y Y Y Y
Form Validation Y N N Y — Abide Y — Abide Y — Abide N N N
Grids Y Y Y Y Y Y Y Y Y
Icons N Y — Glyphicons Y — Glyphicons Y — with download Y — with download Y — with download Y — with download N N
Labels Y Y Y Y Y Y Y N N
Lists Y Y Y Y — Menu Y Y Y Y N
Lists (horizontal) N Y N Y — horizontal is default in Menu Y Y Y N N
Media Object Y — Media Object Y — Media Object N Y — Media Object N N N N N
Modals Y Y Y Y — Reveal Y — Reveal Y — Reveal Y — Reveal N N
Navigation Y Y Y Y — Menu Y Y Y N N
Navigation - Sticky Y — .navbar-fixed- Y — Affix Y — Affix Y — Magellan Y — Magellan Y — Magellan Y — Magellan N N
Navigation - Off Canvas Y — Collapsible content N N Y Y N N N N
Pagination Y Y Y Y Y Y Y N N
Panels Y — now Cards Y N Y — Callout Y Y Y N N
Popovers Y Y — Popover Y — Popover Y — Tooltips Y — Tooltips Y — Tooltips N N N
Print styles Y Y Y Y Y Y Y N N
Progress bars Y Y Y Y Y Y Y N N
Responsive media N N N Y — Interchange Y — Interchange Y — Interchange N N N
Right-to-Left Unknown as of Aug 29, 2015. See also: RTL-Bootstrap N — bumped to next version N Y — Right-to-Left Support Y Y N N N
Scrollspy Y Y Y Y — Magellan Y — Magellan Y — Magellan Y — Magellan N N
Tables Y Y Y Y Y Y Y Y N
Tabs Y Y Y Y Y Y Y N Removed in v1.2
Thumbnails Y — now Cards Y Y Y Y Y Y N N
Tooltips Y Y Y Y Y Y Y N N
Tour N N N N - coming back in v6.1 Y — Joyride Y — Joyride Y — Joyride N N
Typeahead N N Y N N N Y N N
Typography Y Y Y Y Y Y Y Y Y
Video scaling Y Y N Y Y Y Y N N