Short overview of general CSS grid frameworks

1. Responsive grids
short overview of general grids

2. History of grids
NON-Responsiev grids
● Blueprint
http://www.blueprintcss.org/
width: 950px
24 columns: 30px + 10px (margin)
● 960 Grid
http://960.gs/
width: 960px
12 columns: 10px + 60px + 10px (margin)
16 columns: 10px + 40px + 10px (margin)
24 columns: 5px + 30px + 5px (margin)
+ Adapt.js - defines the width of the user`s screen and applies the appropriate css
stylesheet.

3. Nowadays
CSS Frameworks
● Bootstrap
● UI Kit
● Foundation
● Gumby
● Skeleton
CSS grid framework
● Susy
● Neat Bourbon
● Simple grid
● 996 grid
● Responsive grid system
We can conditionally divide CSS frameworks and CSS grid frameworks

4. Bootstrap
http://getbootstrap.com/
Mobile first
LESS / SASS
12 columns
+ JS add-ons
Responsive utilities: .hidden-x, .visible-x-x
lg: >1200px md: 992px sm: 768px xs: <768px
.container 15px + 1140px +
15px
15px + 940px +
15px
15px + 720px +
15px
15px + 100% + 15px
.row -15px auto -15px (margin)
.col-x-x
(e.g. .col-sm-3)
15px + x% + 15px

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

7. Gumby
http://gumbyframework.com/
SASS
12 columns (+16 columns)
Breakpoints: portrait-phones, landscape-phones, all-phones, portrait-tablets, tablets, desktop,
document-width, large-screens
Responsive utilities: @include hidden(portrait-tablets); @include visible(tablets);
Example of use:
article {
@include column(8);
}
>=768px <767px
.row 10px + 100% (max: 940px; min: 320px) + 10px 10px + 100% + 10px (min: 0)
.columns x%(margin) + x% 100%

8. Skeleton
http://getskeleton.com/#grid
Mobile first
12 columns
.container max-width: 960px - can be changed
>=550px <550px <400px
.container 80% 85% 20px + 100% + 20px
.row 100%
.columns 4%(margin) + x% 100%

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);
}
}

10. Susy
http://susy.oddbird.net/
EVERYTHING MUST BE SET BY USER!
SASS
User creates variables map
$susy: (
columns: 12,
gutters: .25,
gutter-position: inside,
...
)

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.

13. web-site:
www.deweb.com.ua
Thank you for attention!
Olga Kulik
Web Studia deWeb, Kiev