Responsive gridsshort overview of general grids

History of gridsNON-Responsiev grids

● Blueprinthttp://www.blueprintcss.org/width: 950px24 columns: 30px + 10px (margin)

● 960 Gridhttp://960.gs/width: 960px12 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.

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

Bootstraphttp://getbootstrap.com/

Mobile firstLESS / SASS12 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

UI Kithttp://getuikit.com/

Mobile firstLESS / SASSThe 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 + 35px25px + 100% (max: 930px) + 25px

.uk-grid -35px auto -25px auto

.uk-with-x-x 35px + x% 25px + x%

Foundationhttp://foundation.zurb.com/

Mobile first12 columnsSASS

+JS add-ons

More breakpoints:$xlarge-range: 1441px - 1920px; $xxlarge-range: > 1921px Columns presented: .small-x, .medium-x, .large-x columnsResponsive 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

Gumbyhttp://gumbyframework.com/

SASS12 columns (+16 columns)

Breakpoints: portrait-phones, landscape-phones, all-phones, portrait-tablets, tablets, desktop, document-width, large-screensResponsive 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%

Skeletonhttp://getskeleton.com/#grid

Mobile first12 columns.container max-width: 960px - can be changed

>=550px <550px <400px

.container 80% 85% 20px + 100% + 20px

.row 100%

.columns 4%(margin) + x% 100%

Neat Bourbonhttp://neat.bourbon.io/EVERYTHING MUST BE SET BY USER!

SASSCan be set as Mobile first12 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); } }

Susyhttp://susy.oddbird.net/EVERYTHING MUST BE SET BY USER!

SASSUser creates variables map$susy: (

columns: 12,

gutters: .25,

gutter-position: inside,

...

)

Simple gridhttp://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

996 gridhttp://996grid.com/This grid is the second generation of 960 grid.Very simple to use.

Responsive grid systemhttp://www.responsivegridsystem.com/There is a code generator, that may be useful for beginners.Very simple to use.

web-site: www.deweb.com.ua

Thank you for attention!

Olga KulikWeb Studia deWeb, Kiev