CSS framework
Appearance
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 mostly design orientated 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
- Maxmertkit
- Cascade Framework
- Concise
- Emastic
- Ink
- inuitcss
- Kube
- Kule CSS Lazy
- Malo
- Responsive Grid System
- Schema UI / Built with LESS
- Semantic UI
- StackLayout
- Thao Framework
- 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 1st 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.2.0 (June 26, 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/responsive | fluid typography, responsive grid system. Style agnostic | ||
Cascade Framework Light | 1.1 (July 23, 2013) | MIT | hybrid | 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.1.2 (July 17, 2012) | Apache License v2.0 | fixed and fluid | % | Robust. Easy to use. For content based websites as well as web based / rich applications. Complex forms layout. Optional integration with GWT. | Any |
Fluidable | 1.1.0 (September 08, 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 |
Pure | BSD License | |||||
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 componets. | 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 | 2.6 (July 2013) | CC-BY | 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 |
Grid generators
Name | Supported grid systems |
---|---|
gridsystemgenerator.com | 960.gs, golden grid, 1kb grid, simple grid |