BaseUp

Centered Class A, B, C

lay-centered
lay-centered width-max-3dx
lay-centered width-max-1dx width-max-2dx-1up width-max-3dx-2up

Left and Right Class A, B, C

lay-left
lay-right

Columns Class A

1div
2div
3div
4div.width-2o8-1up
5div
7div
8div

Applied to a list

Applied to links

1a
2a
3a

Columns Class B, C: Legacy browsers require col on each div

1 col width-1o8-1up
2 col width-1o8-1up
3 col width-1o8-1up
4 col width-1o8-1up
5 col width-1o8-1up
6 col width-1o8-1up
7 col width-1o8-1up
8 col width-1o8-1up
1col width-2o3-1up
2col width-1o3-1up
1col width-1o3-1up
2col width-1o3-1up
3col width-1o3-1up
1col width-1o5-1up
2col width-1o5-1up
3col width-1o5-1up
4col width-1o5-1up
5col width-1o5-1up

Columns with gutters Class A: Compatible with the latest browsers where box-sizing is supported

1width-1o8-1up
2width-1o8-1up
3width-1o8-1up
4width-1o8-1up
5width-1o8-1up
6width-1o8-1up
7width-1o8-1up
8width-1o8-1up

Columns with gutters Class B, C: Compatible with legacy and latest browsers, and layouts flush to the viewport

1 col width-1o8-1up
2 col width-1o8-1up
3 col width-1o8-1up
4 col width-1o8-1up
5 col width-1o8-1up
6 col width-1o8-1up
7 col width-1o8-1up
8 col width-1o8-1up
1col width-2o3-1up
2col width-1o3-1up
1col width-1o3-1up
2col width-1o3-1up
3col width-1o3-1up
1col width-1o5-1up
2col width-1o5-1up
3col width-1o5-1up
4col width-1o5-1up
5col width-1o5-1up

Columns Positioned Class A

1width-1o8-1up pos-4o8-1up
2width-1o8-1up pos-6o8-1up
3width-1o8-1up pos-2o8-1up
4width-1o8-1up pos-8o8-1up
5width-1o8-1up pos-1o8-1up
6width-1o8-1up pos-7o8-1up
7width-1o8-1up pos-3o8-1up
8width-1o8-1up pos-5o8-1up

Columns Positioned Class B, C

1col width-2o3-1up pos-2o3-1up
2col width-1o3-1up pos-1o3-1up
1col width-1o3-1up pos-2o3-1up
2col width-1o3-1up pos-3o3-1up
3col width-1o3-1up pos-1o3-1up
1col width-1o5-1up pos-3o5-1up
2col width-1o5-1up pos-4o5-1up
3col width-1o5-1up pos-5o5-1up
4col width-1o5-1up pos-1o5-1up
5col width-1o5-1up pos-2o5-1up

Gutter and Pull Gutter Class A, B, C

Divs

lay gut-right-medium
Text test text test text test text
pull-gut-right-large
Text test text test text test text
pull-gut-right-large-gut-1o2x
Text test text test text test text
pull-gut-right-large-gut-1x
Text test text test text test text
Text
Text test text test text test text
Text
Text test text test text test text
Text
Text test text test text test text
Text
Text test text test text test text
Text
Text test text test text test text
Text
Text test text test text test text

List

List Items

Pull Class A, B, C

pull-right
pull-right
pull-right gut-left
pull-right gut-left
pull-left gut-right
pull-left gut-right

Non-nestable layouts Class B, C

.col laid out in 5 columns

col
col
col
col
col
col

.col laid out in 5 columns with gutter

col
col
col
col
col
col
col
col
col
col
col
col