Current version: 1.9.8Components

Utility classes

Utility classes help you to add some common behaviors to elements. We decided to used Emmet syntax to make them shorter and accessible. They are prefixed with u- to make them more readable.

Text alignment

Class value desc.
.u-tac center centers text
.u-tar right aligns text on the right
.u-tal left aligns text on the left

Floating

Class value desc.
.u-push right floats to the right
.u-pull left floats to the left

Clearfix

Class desc.
.u-cf applies clearfix hack on element

Clearfix

Class desc.
.u-ellipsis applies ellipsis on element

Overflow

Class desc.
.u-ovh hide overflow

Flex

Class property value desc.
.u-fl display flex sets flex display on element
.u-fld--r flex-direction row sets row flex-direction on element
.u-fld--c flex-direction column sets column flex-direction on element
.u-flw flex-wrap wrap allows children wrapping
.u-flw--n flex-wrap nowrap disables children wrapping
.u-fl--n flex none flex-grow: 0, flex-shrink: 0, flex-basis: auto
.u-fl--a flex auto flex-grow: 1, flex-shrink: 1, flex-basis: auto

Hide

  • .is-hidden
  • .u-hidden
  • .u-vhidden

Vertical alignment

Class value desc.
.u-vam middle sets vertical alignment in the middle
.u-vat top sets vertical alignment at the top
.u-vabl baseline sets vertical alignment at the baseline
.u-vab bottom sets vertical alignment at the bottom

Reset default style

You can reset styles for <ul>

  • Foo
  • Bar
  • Baz
  • Foobar
<ul class="r-list">
  <li>Foo</li>
  <li>Bar</li>
</ul>
<ul class="r-list">
  <li>Baz</li>
  <li>Foobar</li>
</ul>

Spacing

  • Size values: 0 | xs | s | m | l | xl
  • Direction values (optional): t (top) | r (right) | b (bottom) | l (left)
Syntax/class desc.
.u + -property (+ direction) + --size -
.u-mg--0 No margin
.u-pdt--s Small padding-top

Sass helpers

Helper desc.
r(x) to set vertical rhythm of a module, where X is an integer for vertical unit
rb(x,y,z) to set vertical rhythm of a module if it has a border, where X is an integer for vertical unit, Y the border width and Z the font size
fz(x) to set font size if $fz--modifiers are not enough and keep vertical rhythm

Div colorizers

Class desc.
.u-neutral adds a neutral layout: white text, grey background
.u-validate adds a validation-related layout: white text, green background
.u-info adds a informative layout: white text, orange background
.u-error adds a error-related layout: white text, red background