Display utilities across breakpoints
<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 utilities across breakpoints
<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>
Utilities for vertical alignment across breakpoints
<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 modifiers across breakpoints
<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>
Flexbox wrap modifiers across breakpoints
<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>
Flexbox content justification modifiers across breakpoints
<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>
Flexbox item alignment modifiers across breakpoints
<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>
Flexbox content alignment modifiers across breakpoints
<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>
Flexbox self alignment modifiers across breakpoints
<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>
Flexbox grow modifiers across breakpoints
<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>
Flexbox shrink modifiers across breakpoints
<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>
Flexbox basis modifiers across breakpoints
<div class="d:f">
<div class="flx-b:a">flex-basis: auto</div>
</div>
A set of widths on grids up to 12 columns, with names for each ratio.
<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>
A set of consistent heights based on the scale
<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>
A set of width constraints based on the scale
<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>