CSS frameworks
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.
Some notable and widely used examples are Bootstrap or Foundation.
CSS frameworks offer different modules and tools:
- Reset-Stylesheet
- grid especially for responsive web design
- web typography
- set of icons in sprites or iconfonts
- 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 CSS interpreter like LESS or SASS.
List of CSS frameworks
- Bootstrap
- Cascade Framework
- Cascade Framework Light
- Concise
- Emastic
- floatz
- Ink
- inuitcss
- Kube
- Kule CSS Lazy
- Malo
- Materialize
- Maxmertkit
- Modest Grid
- Pure CSS
- Responsive BP
- Responsive Grid System
- Schema UI / Built with LESS
- Semantic UI
- StackLayout
- uikit
- Unsemantic
Grid systems
| Name | Latest release/Date | License | Fixed, fluid or elastic | 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 |
| Maxmertkit | 1.0.4 (June 1, 2014) | MIT License (CC BY 3.0) | responsive | px, % | Layout, typography, tables, forms, buttons, navigation, spinners, avatars, comments, media queries and more + .sass files + js libraries (parallax, skyline, scrollspy and others) | Any |
| Bootstrap | 3.3.0 (October 29, 2014) | 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 | 1.4 (November 8, 2013) | 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 |
| Columnal CSS grid system | 0.85 | CC BY-SA 3.0 | fluid | max width 1140px, columns in % | responsive, sub-columns, pre- and suffix classes, media queries, responsive image sizing | 12 |
| 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 |
| Dismantle | 0.4 (December 9, 2013) | MIT License | fixed and fluid | %, px | Easy to use, responsive grid system, nesting, media queries, | 12 |
| floatz | 1.3.0 (December, 2014) | 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 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.x (2014) | MIT License | fluid | px, % | Responsive Layout, source ordering, typography, forms, buttons, navigation, media queries, js libraries | Any |
| Gumby Framework | (2.5) October 2013 | MIT License | fluid | %, px | responsive, media queries, hybrid grid PSD templates, UI kit, typography forms, buttons, navigation, js libraries, vertical alignment | 12, 16 + 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.5.0 (May 27, 2014) | 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 |
| RÖCSSTI | August 15, 2013 | CC-BY | fixed, elastic, fluid, responsive | px, em, % | Layout, typography, forms, media queries, + .less file + .scss file | Any |
| Semantic | 1.2 (January 11, 2012) | 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.0.1 (March 12, 2012) | 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 02, 2015) | MIT | elastic,responsive | % | Grids, Input, Buttons, Menu, Tables, Lists, Dialog, Messages, Paginator, Utility, Autocomplete, Badge, Extensions, Breadcrumb,ecc | 12 |
Grid generators
| Name | Supported grid systems |
|---|---|
| gridsystemgenerator.com | 960.gs, golden grid, 1kb grid, simple grid |
| Modest Grid | Set your columns, gutter width, maximum screen width and viewport sizes. |