CSS framework
A CSS framework is a pre-prepared software framework that is meant to allow for easier, more standards-compliant web design using the Cascading Style Sheets language. Most of these frameworks contain at least a grid. More functional frameworks also come with more features and additional JavaScript based functions, but are mostly design oriented and unobtrusive. This differentiates these from functional and full JavaScript frameworks.
Two notable and widely used examples are Bootstrap and Foundation.
CSS frameworks offer different modules and tools:
- reset style sheet
- grid especially for responsive web design
- web typography
- set of icons in sprites or icon fonts
- styling for tooltips, buttons, elements of forms
- parts of graphical user interfaces like accordion, tabs, slideshow or modal windows (Lightbox)
- equalizer to create equal height content
- often used CSS helper classes (left, hide)
Bigger frameworks use a CSS interpreter like Less or Sass.
List of notable CSS frameworks
Grid systems
| Name | Latest release/Date | License | Fixed, fluid or responsive | Units (px, em, %) | Features | no. of columns |
|---|---|---|---|---|---|---|
| Blueprint | 1.0.1 (May 14, 2011) | MIT License | typography, forms, print. plugins for buttons, tabs and sprites. | |||
| Bootstrap | 3.3.7 (July 25, 2016) | MIT License (Apache License v2.0 prior to 3.1.0) | fixed, fluid, responsive | px, % | Layout, typography, forms, buttons, navigation, media queries + more, + .less files + js libraries | 12 |
| Cascade Framework | 1.5 (August 28, 2013) | MIT | fixed, elastic, fluid, responsive | px, % | Grid, layout, typography, forms, buttons, media queries + more | Any |
| Foundation | 6.4.2 (August 10, 2017) | MIT License | fluid | px, % | Responsive Layout, source ordering, typography, forms, buttons, navigation, media queries, js libraries | Any |
| Jewels | 1.0 (November 24, 2015) | MIT License | fixed, fluid, responsive | px, %, em | Layout, typography, grids, forms, buttons, navigation, media, screen display, accessibility | |
| Materialize | 1.0 (November 8, 2015) | MIT License | fixed, fluid, responsive | px, %, em | Grid, Layout, typography, forms, buttons, navigation, transitions + more, + .sass files + js libraries | 12 |
| W3.CSS | 4 (March 24, 2017) | MIT License | simplicity, CSS-only, grid, responsive, layout, typography, tables, buttons, animations | 4 | ||
| YAML | 4.1.2 (July 28, 2013) | CC-BY 2.0 | fixed, elastic, fluid | px, em, % | Layout, grids, columns, forms, buttons, progressive linearization for responsive layouts, float handling, navigation, typography, accessibility, add-ons (accessible tabs, rtl-support, microformats) | any |
| YUI CSS grids | 3.5.1 | BSD-3 | fixed and fluid |
See also
External links
- CSS Front-end Frameworks with comparison
- CSS Frameworks
- Awesome CSS Frameworks, an up-to-date collection of CSS frameworks categorized and ordered by popularity
