Layout

Display

Display utilities across breakpoints

display: block
display: inline-block
display: inline
display: flex
display: table
display: table-cell
display: none
<div>
	<div class="d:b">display: block</div>
</div>
<div>
	<div class="d:i-b">display: inline-block</div>
</div>
<div>
	<div class="d:i">display: inline</div>
</div>
<div>
	<div class="d:f">display: flex</div>
</div>
<div>
	<div class="d:t">display: table</div>
</div>
<div>
	<div class="d:t-c">display: table-cell</div>
</div>
<div>
	<div class="d:n">display: none</div>
</div>

Float

Float utilities across breakpoints

float: left
float: right
float: none
float: clear (clearfix)
<div class="fl:c">
	<div class="fl:l">float: left</div>
</div>

<div class="fl:c">
	<div class="fl:r">float: right</div>
</div>

<div>
	<div class="fl:n">float: none</div>
</div>

<div>
	<div class="fl:c">float: clear (clearfix)</div>
</div>

Vertical Align

Utilities for vertical alignment across breakpoints

vertical-align: top
vertical-align: middle
vertical-align: bottom
vertical-align: baseline
<div class="d:t h:10 m-b:1 b">
	<div class="v-a:t d:t-c">vertical-align: top</div>
</div>

<div class="d:t h:10 m-b:1 b">
	<div class="v-a:m d:t-c">vertical-align: middle</div>
</div>

<div class="d:t h:10 m-b:1 b">
	<div class="v-a:b d:t-c">vertical-align: bottom</div>
</div>

<div class="d:t h:10 m-b:1 b">
	<div class="v-a:bl d:t-c">vertical-align: baseline</div>
</div>

Flexbox

Direction

Flexbox direction modifiers across breakpoints

flex-direction: column
flex-direction: column-reverse
flex-direction: row
flex-direction: row-reverse
<div class="d:f">
	<div class="flx-d:c">flex-direction: column</div>
</div>

<div class="d:f">
	<div class="flx-d:c-r">flex-direction: column-reverse</div>
</div>

<div class="d:f">
	<div class="flx-d:r">flex-direction: row</div>
</div>

<div class="d:f">
	<div class="flx-d:r-r">flex-direction: row-reverse</div>
</div>

Wrap

Flexbox wrap modifiers across breakpoints

flex-wrap: nowrap
flex-wrap: wrap
flex-wrap: wrap-reverse
<div class="d:f">
	<div class="flx-w:n">flex-wrap: nowrap</div>
</div>

<div class="d:f">
	<div class="flx-w:w">flex-wrap: wrap</div>
</div>

<div class="d:f">
	<div class="flx-w:w-r">flex-wrap: wrap-reverse</div>
</div>

Justify Content

Flexbox content justification modifiers across breakpoints

justify-content: flex-start
justify-content: flex-end
justify-content: center
justify-content: space-between
justify-content: space-around
<div class="d:f">
	<div class="j-c:f-s">justify-content: flex-start</div>
</div>

<div class="d:f">
	<div class="j-c:f-e">justify-content: flex-end</div>
</div>

<div class="d:f">
	<div class="j-c:c">justify-content: center</div>
</div>

<div class="d:f">
	<div class="j-c:s-b">justify-content: space-between</div>
</div>

<div class="d:f">
	<div class="j-c:s-a">justify-content: space-around</div>
</div>

Align Items

Flexbox item alignment modifiers across breakpoints

align-items: flex-start
align-items: flex-end
align-items: center
align-items: baseline
align-items: stretch
<div class="d:f">
	<div class="a-i:f-s">align-items: flex-start</div>
</div>

<div class="d:f">
	<div class="a-i:f-e">align-items: flex-end</div>
</div>

<div class="d:f">
	<div class="a-i:c">align-items: center</div>
</div>

<div class="d:f">
	<div class="a-i:b">align-items: baseline</div>
</div>

<div class="d:f">
	<div class="a-i:s">align-items: stretch</div>
</div>

Align Content

Flexbox content alignment modifiers across breakpoints

align-content: flex-start
align-content: flex-end
align-content: center
align-content: stretch
align-content: space-between
align-content: space-around
<div class="d:f">
	<div class="a-c:f-s">align-content: flex-start</div>
</div>

<div class="d:f">
	<div class="a-c:f-e">align-content: flex-end</div>
</div>

<div class="d:f">
	<div class="a-c:c">align-content: center</div>
</div>

<div class="d:f">
	<div class="a-c:s">align-content: stretch</div>
</div>

<div class="d:f">
	<div class="a-c:s-b">align-content: space-between</div>
</div>

<div class="d:f">
	<div class="a-c:s-a">align-content: space-around</div>
</div>

Align Self

Flexbox self alignment modifiers across breakpoints

align-self: flex-start
align-self: flex-end
align-self: center
align-self: stretch
align-self: auto
<div class="d:f">
	<div class="a-s:f-s">align-self: flex-start</div>
</div>

<div class="d:f">
	<div class="a-s:f-e">align-self: flex-end</div>
</div>

<div class="d:f">
	<div class="a-s:c">align-self: center</div>
</div>

<div class="d:f">
	<div class="a-s:s">align-self: stretch</div>
</div>

<div class="d:f">
	<div class="a-s:a">align-self: auto</div>
</div>

Flex Grow

Flexbox grow modifiers across breakpoints

flex-grow: 0
flex-grow: 1
<div class="d:f">
	<div class="flx-g:0">flex-grow: 0</div>
</div>

<div class="d:f">
	<div class="flx-g:1">flex-grow: 1</div>
</div>

Flex Shrink

Flexbox shrink modifiers across breakpoints

flex-shrink: 0
flex-shrink: 1
<div class="d:f">
	<div class="flx-s:0">flex-shrink: 0</div>
</div>

<div class="d:f">
	<div class="flx-s:1">flex-shrink: 1</div>
</div>

Flex Basis

Flexbox basis modifiers across breakpoints

flex-basis: auto
<div class="d:f">
	<div class="flx-b:a">flex-basis: auto</div>
</div>

Size

Width

A set of widths on grids up to 12 columns, with names for each ratio.

width: full

2 column grid:

width: 1of2

3 column grid:

width: 1of3
width: 2of3

4 column grid:

width: 1of4
width: 2of4
width: 3of4

5 column grid:

width: 1of5
width: 2of5
width: 3of5
width: 4of5

6 column grid:

width: 1of6
width: 2of6
width: 3of6
width: 4of6
width: 5of6

8 column grid:

width: 1of8
width: 2of8
width: 3of8
width: 4of8
width: 5of8
width: 6of8
width: 7of8

10 column grid:

width: 1of10
width: 2of10
width: 3of10
width: 4of10
width: 5of10
width: 6of10
width: 7of10
width: 8of10
width: 9of10

12 column grid:

width: 1of12
width: 2of12
width: 3of12
width: 4of12
width: 5of12
width: 6of12
width: 7of12
width: 8of12
width: 9of12
width: 10of12
width: 11of12 
<div class="bg:white.2 m-t:.1">
	width: full
</div>

<h4 class="f:1 m-t:1 m-b:.1">2 column grid:</h4>
<div class="w:1of2">
	<div class="bg:white.2 m-t:.1">
		width: 1of2
	</div>
</div>

<h4 class="f:1 m-t:1 m-b:.1">3 column grid:</h4>
<div class="w:1of3">
	<div class="bg:white.2 m-t:.1">
		width: 1of3
	</div>
</div>
<div class="w:2of3">
	<div class="bg:white.2 m-t:.1">
		width: 2of3
	</div>
</div>

<h4 class="f:1 m-t:1 m-b:.1">4 column grid:</h4>
<div class="w:1of4">
	<div class="bg:white.2 m-t:.1">
		width: 1of4
	</div>
</div>
<div class="w:2of4">
	<div class="bg:white.2 m-t:.1">
		width: 2of4
	</div>
</div>
<div class="w:3of4">
	<div class="bg:white.2 m-t:.1">
		width: 3of4
	</div>
</div>

<h4 class="f:1 m-t:1 m-b:.1">5 column grid:</h4>
<div class="w:1of5">
	<div class="bg:white.2 m-t:.1">
		width: 1of5
	</div>
</div>
<div class="w:2of5">
	<div class="bg:white.2 m-t:.1">
		width: 2of5
	</div>
</div>
<div class="w:3of5">
	<div class="bg:white.2 m-t:.1">
		width: 3of5
	</div>
</div>
<div class="w:4of5">
	<div class="bg:white.2 m-t:.1">
		width: 4of5
	</div>
</div>

<h4 class="f:1 m-t:1 m-b:.1">6 column grid:</h4>
<div class="w:1of6">
	<div class="bg:white.2 m-t:.1">
		width: 1of6
	</div>
</div>
<div class="w:2of6">
	<div class="bg:white.2 m-t:.1">
		width: 2of6
	</div>
</div>
<div class="w:3of6">
	<div class="bg:white.2 m-t:.1">
		width: 3of6
	</div>
</div>
<div class="w:4of6">
	<div class="bg:white.2 m-t:.1">
		width: 4of6
	</div>
</div>
<div class="w:5of6">
	<div class="bg:white.2 m-t:.1">
		width: 5of6
	</div>
</div>

<h4 class="f:1 m-t:1 m-b:.1">8 column grid:</h4>
<div class="w:1of8">
	<div class="bg:white.2 m-t:.1">
		width: 1of8
	</div>
</div>
<div class="w:2of8">
	<div class="bg:white.2 m-t:.1">
		width: 2of8
	</div>
</div>
<div class="w:3of8">
	<div class="bg:white.2 m-t:.1">
		width: 3of8
	</div>
</div>
<div class="w:4of8">
	<div class="bg:white.2 m-t:.1">
		width: 4of8
	</div>
</div>
<div class="w:5of8">
	<div class="bg:white.2 m-t:.1">
		width: 5of8
	</div>
</div>
<div class="w:6of8">
	<div class="bg:white.2 m-t:.1">
		width: 6of8
	</div>
</div>
<div class="w:7of8">
	<div class="bg:white.2 m-t:.1">
		width: 7of8
	</div>
</div>

<h4 class="f:1 m-t:1 m-b:.1">10 column grid:</h4>
<div class="w:1of10">
	<div class="bg:white.2 m-t:.1">
		width: 1of10
	</div>
</div>
<div class="w:2of10">
	<div class="bg:white.2 m-t:.1">
		width: 2of10
	</div>
</div>
<div class="w:3of10">
	<div class="bg:white.2 m-t:.1">
		width: 3of10
	</div>
</div>
<div class="w:4of10">
	<div class="bg:white.2 m-t:.1">
		width: 4of10
	</div>
</div>
<div class="w:5of10">
	<div class="bg:white.2 m-t:.1">
		width: 5of10
	</div>
</div>
<div class="w:6of10">
	<div class="bg:white.2 m-t:.1">
		width: 6of10
	</div>
</div>
<div class="w:7of10">
	<div class="bg:white.2 m-t:.1">
		width: 7of10
	</div>
</div>
<div class="w:8of10">
	<div class="bg:white.2 m-t:.1">
		width: 8of10
	</div>
</div>
<div class="w:9of10">
	<div class="bg:white.2 m-t:.1">
		width: 9of10
	</div>
</div>

<h4 class="f:1 m-t:1 m-b:.1">12 column grid:</h4>
<div class="w:1of12">
	<div class="bg:white.2 m-t:.1">
		width: 1of12
	</div>
</div>
<div class="w:2of12">
	<div class="bg:white.2 m-t:.1">
		width: 2of12
	</div>
</div>
<div class="w:3of12">
	<div class="bg:white.2 m-t:.1">
		width: 3of12
	</div>
</div>
<div class="w:4of12">
	<div class="bg:white.2 m-t:.1">
		width: 4of12
	</div>
</div>
<div class="w:5of12">
	<div class="bg:white.2 m-t:.1">
		width: 5of12
	</div>
</div>
<div class="w:6of12">
	<div class="bg:white.2 m-t:.1">
		width: 6of12
	</div>
</div>
<div class="w:7of12">
	<div class="bg:white.2 m-t:.1">
		width: 7of12
	</div>
</div>
<div class="w:8of12">
	<div class="bg:white.2 m-t:.1">
		width: 8of12
	</div>
</div>
<div class="w:9of12">
	<div class="bg:white.2 m-t:.1">
		width: 9of12
	</div>
</div>
<div class="w:10of12">
	<div class="bg:white.2 m-t:.1">
		width: 10of12
	</div>
</div>
<div class="w:11of12">
	<div class="bg:white.2 m-t:.1">
		width: 11of12
	</div>
</div>

Height

A set of consistent heights based on the scale

height: 0
height: .1
height: .2
height: .3
height: .4
height: .5
height: .6
height: .7
height: .8
height: .9
height: 1
height: 2
height: 3
height: 4
height: 5
height: 6
height: 7
height: 8
height: 9
height: 10 
<div class="h:0">
	<div class="bg:white.2 h:full b o:h">
		height: 0
	</div>
</div>
<div class="h:.1">
	<div class="bg:white.2 h:full b o:h">
		height: .1
	</div>
</div>
<div class="h:.2">
	<div class="bg:white.2 h:full b o:h">
		height: .2
	</div>
</div>
<div class="h:.3">
	<div class="bg:white.2 h:full b o:h">
		height: .3
	</div>
</div>
<div class="h:.4">
	<div class="bg:white.2 h:full b o:h">
		height: .4
	</div>
</div>
<div class="h:.5">
	<div class="bg:white.2 h:full b o:h">
		height: .5
	</div>
</div>
<div class="h:.6">
	<div class="bg:white.2 h:full b o:h">
		height: .6
	</div>
</div>
<div class="h:.7">
	<div class="bg:white.2 h:full b o:h">
		height: .7
	</div>
</div>
<div class="h:.8">
	<div class="bg:white.2 h:full b o:h">
		height: .8
	</div>
</div>
<div class="h:.9">
	<div class="bg:white.2 h:full b o:h">
		height: .9
	</div>
</div>
<div class="h:1">
	<div class="bg:white.2 h:full b o:h">
		height: 1
	</div>
</div>
<div class="h:2">
	<div class="bg:white.2 h:full b o:h">
		height: 2
	</div>
</div>
<div class="h:3">
	<div class="bg:white.2 h:full b o:h">
		height: 3
	</div>
</div>
<div class="h:4">
	<div class="bg:white.2 h:full b o:h">
		height: 4
	</div>
</div>
<div class="h:5">
	<div class="bg:white.2 h:full b o:h">
		height: 5
	</div>
</div>
<div class="h:6">
	<div class="bg:white.2 h:full b o:h">
		height: 6
	</div>
</div>
<div class="h:7">
	<div class="bg:white.2 h:full b o:h">
		height: 7
	</div>
</div>
<div class="h:8">
	<div class="bg:white.2 h:full b o:h">
		height: 8
	</div>
</div>
<div class="h:9">
	<div class="bg:white.2 h:full b o:h">
		height: 9
	</div>
</div>
<div class="h:10">
	<div class="bg:white.2 h:full b o:h">
		height: 10
	</div>
</div>

Max Width

A set of width constraints based on the scale

max-width: 0
max-width: .1
max-width: .2
max-width: .3
max-width: .4
max-width: .5
max-width: .6
max-width: .7
max-width: .8
max-width: .9
max-width: 1
max-width: 2
max-width: 3
max-width: 4
max-width: 5
max-width: 6
max-width: 7
max-width: 8
max-width: 9
max-width: 10 
<div class="m-w:0">
	<div class="bg:white.2">
		max-width: 0
	</div>
</div>
<div class="m-w:.1">
	<div class="bg:white.2">
		max-width: .1
	</div>
</div>
<div class="m-w:.2">
	<div class="bg:white.2">
		max-width: .2
	</div>
</div>
<div class="m-w:.3">
	<div class="bg:white.2">
		max-width: .3
	</div>
</div>
<div class="m-w:.4">
	<div class="bg:white.2">
		max-width: .4
	</div>
</div>
<div class="m-w:.5">
	<div class="bg:white.2">
		max-width: .5
	</div>
</div>
<div class="m-w:.6">
	<div class="bg:white.2">
		max-width: .6
	</div>
</div>
<div class="m-w:.7">
	<div class="bg:white.2">
		max-width: .7
	</div>
</div>
<div class="m-w:.8">
	<div class="bg:white.2">
		max-width: .8
	</div>
</div>
<div class="m-w:.9">
	<div class="bg:white.2">
		max-width: .9
	</div>
</div>
<div class="m-w:1">
	<div class="bg:white.2">
		max-width: 1
	</div>
</div>
<div class="m-w:2">
	<div class="bg:white.2">
		max-width: 2
	</div>
</div>
<div class="m-w:3">
	<div class="bg:white.2">
		max-width: 3
	</div>
</div>
<div class="m-w:4">
	<div class="bg:white.2">
		max-width: 4
	</div>
</div>
<div class="m-w:5">
	<div class="bg:white.2">
		max-width: 5
	</div>
</div>
<div class="m-w:6">
	<div class="bg:white.2">
		max-width: 6
	</div>
</div>
<div class="m-w:7">
	<div class="bg:white.2">
		max-width: 7
	</div>
</div>
<div class="m-w:8">
	<div class="bg:white.2">
		max-width: 8
	</div>
</div>
<div class="m-w:9">
	<div class="bg:white.2">
		max-width: 9
	</div>
</div>
<div class="m-w:10">
	<div class="bg:white.2">
		max-width: 10
	</div>
</div>