CSS Frameworks compared

Please open this page in a desktop browser.
  Bootstrap Foundation Chopstick Cascade Light Cascade 1 Cascade 2
Latest version 3.0 4.3 0.1 1.1 1.6 Not released yet
Sources N/A
License Apache (no restrictions) MIT (no restrictions) MIT (no restrictions) MIT (no restrictions) MIT (no restrictions) MIT (no restrictions)
Created by Twitter
San Francisco, CA, USA
Zurb
Campbell, CA, USA
Wijs
Gent, Belgium
John Slegers
Leuven, Belgium
John Slegers
Leuven, Belgium
John Slegers
Leuven, Belgium
Icon set included None None None
  CSS overview
Default size
(min)
100.804 bytes 163.589 bytes 25.373 bytes 5.740 bytes 52.477 bytes (1) N/A
Default size
(min+gzip)
16.161 bytes 17.665 bytes 3.415 bytes 1.980 bytes 11.165 bytes (1) N/A
Pre-processor LESS SCSS/Compass SCSS/Compass N/A N/A SCSS
Metaframework No
  • Written in Ruby
  • Depends on Compass
No No No
  • Written in SCSS
  • Requires Sass 3.3+
File structure Monolithic build Monolithic build Monolithic build
  • Individual modules
  • Multiple builds
  • Individual modules
  • Multiple builds
  • Individual modules
  • Multiple builds
DRY No No No Yes Yes Yes
Custom naming No No Yes No No Yes
Footprint optimisation No No No Yes Yes Yes
Performance optimisation No No No Yes Yes Yes
  Browser support
IE6 No No No Yes Yes No
IE7 No No No Yes Yes No
IE8 Limited (2) Yes Limited (3) Yes Yes Yes
IE9+ Yes Yes Yes Yes Yes Yes
Standard browsers Yes Yes Yes Yes Yes Yes
  Grid
Presentational grid classes Yes Yes Yes No Yes Yes
Nestable Yes Yes No Yes Yes Yes
Offsets Yes Yes Yes Limited (4) Limited (4) Limited (4)
Default # of columns 16 12 12 N/A 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 16, 24 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 16, 24
Column ordering Yes Yes Yes Limited (5) Limited (5) Limited (5)
Combining different # of columns No No No
  • Nested
  • Within the same row
  • Nested
  • Within the same row
  • Nested
  • Within the same row
Media object Isolated component No No Integrated in grid Integrated in grid Integrated in grid
Semantic grid support LESS required Sass/Compass required Sass/Compass required Minimal custom CSS Minimal custom CSS
  • Minimal custom CSS
  • Sass optional
  Responsive design
Approach Mobile first Mobile first Mobile first Desktop first Desktop first Desktop first
IE8- fallback
  • Respond.js (2)
  • Phone layout on failure
Phone layout
  • Respond.js (3)
  • Phone layout on failure
Desktop layout Desktop layout Desktop layout
Visibility Classes Yes Yes No No Yes Yes
  Form support
Addons Yes Yes Limited 6 No No Yes 7
Grouping Button group and input group as separate components Button group and input group as separate components No No Button group only Button group ans input group integrated into one component 7
Dropdowns Menu only Menu only No No No Any content 7
Control states Yes Yes Yes No No To be determined
Multiple sizes Yes Limited 8 No No No To be determined
Grid layout Yes Yes Yes No No Yes 7
  Navigation lists
Basic support Yes Yes No No Yes Yes
Tabs Yes No No No Yes Yes
Pagination Yes No No No Yes Yes
Breadcrumbs Yes Yes No No No To be determined
Navigation bar Yes Yes No No Yes Yes
Navigation tree No No No No Yes Yes
Navigation Gallery No No No No Yes Yes
Block tags Yes No No No Yes Yes
Cloud tags No No No No Yes Yes
Pipes No No No No Yes Yes
  Javascript
Collapsible Yes No No No Yes Yes
Closable Limited 9 No No No Yes Yes
Tooltip Yes Yes No No No To be determined
Button states Yes No No No No To be determined
Dropdown Menu only Menu only No No No Any content 7
Date picker No No No No No Yes 7
Sticky navigation Yes Yes No No No No
Image slider Yes Yes No No No To be determined
Modal window Yes Yes No No No To be determined
Sections No Yes No No No To be determined
Form validation No Abide No No Parsley Parsley
Feature detection No Modernizr Modernizr No Modernizr Modernizr
Charting No No No No Flot Flot
Script loader No No No No App.js 10 App.js 10
  1. Excludes IE7- icon support, which is only loaded (by means of conditional comments) in IE7-.
  2. The Bootstrap homepage caused JS errors in IE8 and crashed several times during testing.
    When running Bootstrap locally, the download generated an error trying to load Respond.js.
  3. When running Chopstick locally, the download generated an error trying to load Respond.js.
    JS execution was halted due to dependence on console.
  4. In Cascade Framework, you just add an empty block of any width you like to the left of your grid cell to offset that cell.
  5. Cascade Framework uses left floats for structuring its grid.
    To alter the position of a grid element, you can float right or use absolute/fixed positioning.
  6. Cascade Framework uses left floats for structuring its grid.
    To alter the position of a grid element, you can float right or use absolute/fixed positioning.
  7. These features are already implemented, but still require more finetuning and testing.
  8. Buttons only.
  9. Bootstrap has closable UI elements, but no generic closable behavior.
  10. App.js is a script loader built upon Yepnope that will be released as a separate project in the near future.