Core Framework v1.4.1 – Documentation

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 (Background colors added for demonstrational purposes.)
<div class="one-half">
    1⁄2
</div>
1⁄2
<div class="float-left one-fifth">
    1⁄5
</div>
<div class="float-left one-fifth">
    1⁄5
</div>
<div class="float-left one-fifth">
    1⁄5
</div>
1⁄5
1⁄5
1⁄5
<a href="#" class="button-orange 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-orange palm-one-whole">
    Palm: 100%, others: auto
</a>