CSS frameworks

From Wikipedia, the free encyclopedia
Jump to: navigation, search

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:

Bigger frameworks use a CSS interpreter like LESS or SASS.

List of CSS frameworks[edit]

Grid systems[edit]

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
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
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.0 (February 9, 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[edit]

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.

See also[edit]

External links[edit]