CSS framework
CSS frameworks are pre-prepared software frameworks that are 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 or 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 CSS frameworks
- Baseguide
- Bootstrap
- BoxySheets
- Cascade Framework
- Cascade Framework Light
- Concise
- floatz
- Foundation
- Ink
- inuitcss
- Kathamo
- Kube
- Kule Lazy
- Material Design Lite
- Materialize
- Modest Grid
- Pure CSS
- Responsee
- Responsive BP
- Responsive Grid System
- Schema UI / Built with LESS
- Semantic UI
- Tacit
- uikit
- Unsemantic
- W3.CSS
- Wee
Grid systems
| Name | Latest release/Date | License | Fixed, fluid or responsive | Units (px, em, %) | Features | # of columns |
|---|---|---|---|---|---|---|
| 960 grid system | October 21, 2011 | GPL, MIT License | fixed | px | source ordering | 12, 16, 24 |
| Blueprint | 1.0.1 (May 14, 2011) | MIT License | typography, forms, print. plugins for buttons, tabs and sprites. | |||
| Bluesky grid system | April 17, 2013 | Openpassorn license v1.0 | responsive | px, % | responsive grid system | 12 |
| Bootstrap | 3.3.4 (March 16, 2015) | 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 |
| Cardinal Framework | 3.1.0 (March 8, 2015) | MIT | fluid and responsive | fluid typography, responsive grid system. Style agnostic | ||
| Cascade Framework | 1.5 (August 28, 2013) | MIT | fixed, elastic, fluid, responsive | px, % | Grid, layout, typography, forms, buttons, media queries + more | Any |
| Cascade Framework Light | 1.1 (July 23, 2013) | MIT | fixed, elastic, fluid, responsive | px, % | Grid, layout, typography, forms, buttons, media queries + more | Any |
| Chopstick | Continuous | MIT | hybrid | px, % | Sass (SCSS), semantic (if you want to), responsive, nesting, source ordering, configurable with variables | Any |
| Creatix-CSS | 1.0.2 (April 6, 2014) | CC BY-SA 4.0 | responsive | em, % | Easy to use,Layout, typography, forms, responsive grid system | 12 |
| floatz | 1.4.0 (September, 2015) | Apache License v2.0 | fixed, fluid and responsive | %, em | floatz is a flexible and easy to use CSS framework. It provides a set of reusable CSS classes, Javascript modules and HTML code snippets that support web designers and developers to create state-of-the-art responsive web sites, web applications and HTML based mobile apps - on all browsers, platforms and devices. | Any |
| Fluidable | 1.1.0 (September 8, 2013) | CC0 1.0 | fluid | % | Lightweight responsive grid system, mobile first, fixed gutters, any number of columns | Any |
| Foundation | 5.5.2 (April 30, 2015) | MIT License | fluid | px, % | Responsive Layout, source ordering, typography, forms, buttons, navigation, media queries, js libraries | Any |
| Jaidee Framework | (3.8) April, 2014 | Openpassorn license v1.0 | fluid | px, % | A lightweight CSS Framework with Responsive CSS Layout, grid system, typography, forms, buttons, navigation, media queries, js librarie, slideshow, js tab, Responsive modal popup | 4,6,12 |
| Jeet Grid System | 5 | GPL3 License | fluid | %, px, em | A light, semantic, responsive, Stylus/SCSS framework built from the best parts. IE8+, fractional columns, consistently sized/infinitely nestable gutters. | Any, on the fly |
| Modest Grid | February 16, 2015 | Creative Commons Attribution 4.0 International License | Responsive and fluid | px, % | Responsive grid system | 1 to 24 |
| Pure | 0.6.0 (February 23, 2015) | BSD License | elastic, fluid, responsive | em, % | A lightweight, mobile-first, optionally responsive, grid system with modular support for forms, buttons, tables, and menus. | 1, 2, 3, 4, 5, 6, 8, 12, 24 |
| motus | V1.1 (8/01/2016) | MIT license | responsive | px, rem, % | Sass, multiple grid sizes, JQuery | 12 |
| Responsee | 3.0.0 (September 20, 2015) | MIT License | responsive | px, em, % | A lightweight, grids, columns, responsive forms, navigation, typography, responsive tabs, free templates | 12 |
| RÖCSSTI | August 15, 2013 | MIT License | fixed, elastic, fluid, responsive | px, em, % | Layout, typography, forms, media queries, + .less file + .scss file | Any |
| Semantic | 2.14 (September 13, 2015) | Apache License v2.0 | px, % | responsive | ||
| Ink | V2 (June 2013) | MIT license | elastic | px, em, % | Responsive, percentage based grid (for three screens, expandable to more), Typography, Forms, Tables, FontAwesome, Navigation, Alerts. Includes own JS library with several ready to use UI components. | Any, percentage based |
| skeleton | V1.2 (6/20/2012) | MIT license | responsive | Responsive Grid Down To Mobile, Fast to Start, Style Agnostic. Base grid is a variation of the 960 grid system. | 12 | |
| 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 |
| Yet Another CSS Grid System | 1.0 | public domain | fluid, responsive | a very small easy to use responsive css grid system. Javascript is not required. | 6 | |
| YUI CSS grids | 3.5.1 | BSD-3 | fixed and fluid | |||
| Zass | 1.0 (January 24, 2012) | LGPL License | fluid | % | semantic (doesn't pollute HTML with classes), clean (no CSS hacks neither negative margins), any number of columns, infinite nesting of columns | Any |
| KNACSS | 4.0 (March 2015) | WTPL | fixed, elastic, fluid, responsive | px, em, rem, % | CSS reset, reusable classes, best practices and conventions, CSS snippets, positioning models, advanced positioning (FlexBox), high browser support, grids and gutters, responsive webdesign, table classes, forms classes, LESS version, Sass version | Any |
| simplecss | 2.1.4 (April 2, 2015) | MIT | elastic,responsive | % | Grids, Input, Buttons, Menu, Tables, Lists, Dialog, Messages, Paginator, Utility, Autocomplete, Badge, Extensions, Breadcrumb,ecc | 12 |
| Wee | 3.2.1 (February 17, 2016) | Apache License v2.0 | fluid, responsive | rem, em, px, % | HTML5 element styling, Less CSS mixin library, JavaScript toolset, and automated build process | Any |
| sGrid | v1.1.2 (November 11, 2015) | MIT | fluid, responsive | rem, em, px, % | Flexbox grid system built with Stylus CSS preprocessor. It is also based on CSS native calc() function. | Any |
Grid generators
| Name | Supported grid systems |
|---|---|
| Modest Grid | Set your columns, gutter width, maximum screen width and viewport sizes. |