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.

  1. Fractions
  2. State-specific Widths

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
Elements with different widths
<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-.

Element with state-specific width declaration (Resize browser window to see it change.) 
<a href="#" class="button-primary palm-one-whole">
    Palm: 100%, others: auto
</a>