5. UI Kit
http://getuikit.com/
Mobile first
LESS / SASS
The grid supports 1, 2, 3, 4, 5, 6 and 10 unit divisions. E.g. .uk-width-1-3
+Js add-ons
>1220px large: 1199px medium: 959px small: 767px mini: <480px
.uk-container 35px + 1130px + 35px
25px + 100% (max: 930px) + 25px
.uk-grid -35px auto -25px auto
.uk-with-x-x 35px + x% 25px + x%
6. Foundation
http://foundation.zurb.com/
Mobile first
12 columns
SASS
+JS add-ons
More breakpoints:$xlarge-range: 1441px - 1920px; $xxlarge-range: > 1921px
Columns presented: .small-x, .medium-x, .large-x columns
Responsive utilities: .show-for-small-only, .hide-for-medium-up
large >1024px medium >641px small <640px
.row 100%
.small-x
(e.g. .small-3)
rem + % + rem
9. Neat Bourbon
http://neat.bourbon.io/
EVERYTHING MUST BE SET BY USER!
SASS
Can be set as Mobile first
12 columns - can be changed
.outer-container max-width 1088px - can be changed.
Gutter sets in %.
Breakpoints must be set by user.
Example of use:
.responsive-element {
@include media(769px) {
@include span-columns(6);
}
}
11. Simple grid
http://thisisdallas.github.io/Simple-Grid/
There are .mobile-col-x-x - applies columns only or mobile devices.
There are content-columns and layout-columns.
Pushing classes are not very effective.
Very simple to use.
>=768px <767px
.grid 100% (max: 1140px; min: 755px) 20px + 100% + 10px
.grid-pad 20px + auto
.col-x-x
(e.g. .col-1-12)
% + 20px auto + 10px
12. 996 grid
http://996grid.com/
This grid is the second generation of 960 grid.
Very simple to use.
Responsive grid system
http://www.responsivegridsystem.com/
There is a code generator, that may be useful for beginners.
Very simple to use.