Small row [Default 960px inc glutter.]

Default row [Default 1024px inc glutter.]

Medium row [Default 1280px inc glutter.]

large row [Default 1440px inc glutter.]

Full row [100% inc glutter.]

Columns 1 - 12

.col-12
.col-11
.col-10
.col-9
.col-8
.col-7
.col-6
.col-5
.col-4
.col-3
.col-2
.col-1

Offset columns 1-11

.col-11 .offset-1
.col-10 .offset-2
.col-9 .offset-3
.col-8 .offset-4
.col-7 .offset-5
.col-6 .offset-6
.col-5 .offset-7
.col-4 .offset-8
.col-3 .offset-9
.col-2 .offset-10
.col-1 .offset-11

Collapsed columns

Add .collapse to .col-[num]. These columns comes with no borders as in this demo.

.col-6 .collapse
.col-6 .collapse
.col-4 .collapse
.col-4 .collapse
.col-4 .collapse
.col-3 .collapse
.col-3 .collapse
.col-3 .collapse
.col-3 .collapse

Centered columns

Usage:
.center--all for all devices.
Add .center followed by method target name --small-only, --medium-only, --large-only
or --medium-up or --medium-down for responsiveness.

These examples are printed out with .col-10 followed with .center--[target method name].

Centered for all devices.
Centered for medium up. (Scale down the window to un-center.)
Centered for medium down. (Scale down the window.)
Centered for large devices only. (Scale down the window.)
Centered for medium devices only. (Scale down the window.)
Centered for small devices only. (Scale down the window.)

Responsive column width

Change column width for devices with .col-[number]--[method-name].

Example: .col-12--small .col-6--medium .col-4--large

Full width on small devices, 1/2 on medium devices and 1/3 on large devices
Full width on small devices, 1/2 on medium devices and 1/3 on large devices
Hidden for small and medium devices, 1/3 on large devices
Full width on small devices, 1/2 on medium devices and 1/3 on large devices
Full width on small devices, 1/2 on medium devices and 1/3 on large devices
Large only
Small 12, large 6

Vertical align

Adding .vertical to parent element and some of the following:
.vertical--middle or .vertical--bottom to the children will set desired alignment to children.

.vertical.vertical--middle
.vertical.vertical--bottom

Block list

.block-list-6--small .block-list-4--medium .block-list-3--large
Add .center to align items centered.