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.
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 CSS frameworks
- Bootstrap
- awsm.css
- Baseguide
- BoxySheets
- Bulma
- Cascade Framework
- Cascade Framework Light
- Chopstick
- Concise
- Flexify
- floatz
- Foundation
- Ink
- inuitcss
- Jalsonic Opinion
- 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
- Sierra SCSS Library
- Tacit
- uikit
- Unsemantic
- Visual Component Library (VCL)
- W3.CSS
- Wee
- Diisba framework
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 |
| Avalanche | 1.1.2 (May 23, 2016) | MIT | responsive | % | Responsive, BEM-syntax CSS grid system written in Sass with coupled media queries | Any |
| awsm.css | March 20, 2016 | MIT License | responsive | px, em, % | A lightweight, mobile-first, responsive, library for semantic HTML markup. | |
| Baseguide | 1.7.0 (October 16, 2016) | MIT License | fluid | px, em, rem, % | Lightweight and robust CSS framework for prototyping and production code. | Any |
| 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.6 (November 24, 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 |
| Flexify | 0.1 (April 24, 2016) | MIT | fixed, fluid, responsive | px, % | Bootstrap-like 12-cols grid and Flexbox 12-cols grid. Typography, forms, tables, css dropdown menu, columns, helper classes. | 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 | 6.2.0 (February 26, 2016) | 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 |
| Jalsonic Opinion | (V1 Beta) May 14, 2016 | fixed, fluid, responsive | px, % | Layout, grid system, web browser detect, Network, showing content by regions, scroll animations with Moves Reveal | 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.1.0 (April 15, 2016) | MIT License | responsive | px, em, % | A lightweight, grids, columns, responsive forms, navigation, typography, responsive tabs, buttons, free templates, premium templates | 12 |
| RÖCSSTI | June 2, 2016 | 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 | |
| VCL Flex Layout | 0.1.0 (3/20/2016) | MIT license | fluid | em, %, flex units | Flexible Box (Flexbox) based grid. | 12, percentage |
| 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.3.4 (June 8, 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 |
| Diisba framework | 1.3.1 (August 25, 2016) | CC 4.0 | responsive | em, rem, px, % | HTML5 element styling, JavaScript toolset , Flex and float grid , Ted JS | 12,11 |
Grid generators
| Name | Supported grid systems |
|---|---|
| Modest Grid | Set your columns, gutter width, maximum screen width and viewport sizes. |
See also
External links
This article is issued from Wikipedia - version of the 10/16/2016. The text is available under the Creative Commons Attribution/Share Alike but additional terms may apply for the media files.