|Bootstrap 4.0.0-alpha||Foundation 6||Skeleton 2.0.1|
|Summary||Updates in version 4.0.0-alpha:
||Fountation 6 Updates:
|Last Released||August 19, 2015||November 19, 2015||December 11, 2014|
|Creator||Mark Otto and Jacob Thornton at Twitter||ZURB||Dave Gamache|
|License||MIT License||MIT License||MIT License|
“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
||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.
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.
Grids and Responsiveness
|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|
|Two column class syntax|
|Gutter-free row syntax||Not available||Not available|
|Nested column syntax||Columns cannot be nested|
|Offset column syntax|
|Centered syntax||Not available||Not available|
|Ordering syntax||Not available|
|Block grids syntax||Not available||Not available|
|Media queries syntax|
UI and Widgets
|Alerts||Y||Y — Callout||N|
|Collapse/Accordion||Y — Collapse||Y — Accordion||N|
|Media Object||Y — Media Object||Y — Media Object||N|
|Right-to-Left||Unknown as of Aug 29, 2015. See also: RTL-Bootstrap||Y — Right-to-Left Support||N|