Widths
There is a set of predefined widths that you can use to form your layout. All widths are percentage based and will shrink and grow according to the space available.
Fractions
The width classes come in fractions of one, two, three, four, five, six, eight, ten, and twelve.
- 1⁄1
-
one-whole
- 1⁄2
-
one-half - 1⁄3
-
one-third,two-thirds - 1⁄4
-
one-fourth,two-fourths,three-fourths - 1⁄5
-
one-fifth, …,n-fifths, …,four-fifths - 1⁄6
-
one-sixth, …,n-sixths, …,five-sixths - 1⁄8
-
one-eighth, …,n-eighths, …,seven-eighths - 1⁄10
-
one-tenth, …,n-tenths, …,nine-tenths - 1⁄12
-
one-twelfth, …,n-twelfths, …,eleven-twelfths
<div class="one-half demo-box-1">
1⁄2
</div>
1⁄2
<div class="float-left one-fifth demo-box-1">
1⁄5
</div>
<div class="float-left one-fifth demo-box-2">
1⁄5
</div>
<div class="float-left one-fifth demo-box-3">
1⁄5
</div>
1⁄5
1⁄5
1⁄5
<a href="#" class="button-primary one-whole">
1⁄1
</a>
State-specific Widths
It is sometimes necessary to further adjust the widths across different devices in favor of usability.
If you want an element to have a certain size in one state and another size in another state, you can use
the state-specific width classes by adding one or more of the usual state prefixes palm-,
lap- or desk-.
<a href="#" class="button-primary palm-one-whole">
Palm: 100%, others: auto
</a>