Scooter logo

Utilities and Helpers

View on GitHub

Utility classes are used for layout and font helpers, clearfixes, and other helpful things.

Clearfix

View on GitHub

The clearfix helper is based on Thierry Koblentz's micro clearfix. Use it to ensure that elements with floated children correctly clear floats.

Either use the clearfix class in your markup or @extend %clearfix in your SCSS.

Layout

View on GitHub

Margins and padding have helpers with “tshirt” sizes for adding space between elements.

  • xxs: 4px
  • xs: 8px
  • s: 16px
  • m: 24px
  • l: 32px
  • xl: 64px
  • xxl: 96px
  • jumbo: 128px

Padding

Regular padding

Small padding

Extra-small padding

Double-extra-small padding

Large padding

Extra-large padding

Double-extra-large padding

Jumbo padding

<p>
  <span class="u-pad-m">Regular padding</span>
</p>
<p>
  <span class="u-pad-s">Small padding</span>
</p>
<p>
  <span class="u-pad-xs">Extra-small padding</span>
</p>
<p>
  <span class="u-pad-xxs">Double-extra-small padding</span>
</p>
<p>
  <span class="u-pad-l">Large padding</span>
</p>
<p>
  <span class="u-pad-xl">Extra-large padding</span>
</p>
<p>
  <span class="u-pad-xxl">Double-extra-large padding</span>
</p>
<p>
  <span class="u-pad-jumbo">Jumbo padding</span>
</p>

You can also add a vertical or horizontal keyword to apply vertical or horizontal padding, as well as edge keywords top, right, bottom or left to add padding to that edge:

Regular vertical padding

Extra-large left padding

<p>
  <span class="u-pad-vertical-m">Regular vertical padding</span>
</p>
<p>
  <span class="u-pad-left-xl">Extra-large left padding</span>
</p>

Margins

Margins have the same tshirt sizes available. (Note that paragraphs always get a margin-bottom by default in these demos).

This has a medium bottom margin


This has a large vertical margin


This has a small right margin


This paragraph has been trimmed of its margin

<div>
  <p class="u-mar-bottom-m">This has a medium bottom margin</p>
</div>

<hr/>

<div>
  <p class="u-mar-vertical-l">This has a large vertical margin</p>
</div>

<hr/>

<div>
  <p class="u-mar-right-s">This has a small right margin</p>
</div>

<hr/>

<div>
  <p class="u-trim-margin">This paragraph has been trimmed of its margin</p>
</div>

Floats

You can float things left and right with ease. Don't forget to put floated elements in a clearfix.

Kristen Spilman Daniel Eden
<div class="clearfix">
  <img class="u-l-fl" src="http://i.imgur.com/l2Gk1Q5.jpg" width="128" alt="Kristen Spilman" />
  <img class="u-l-fr" src="http://i.imgur.com/0tRX9MO.jpg" width="128" alt="Daniel Eden" />
</div>

Display helpers

There are display helper classes available to change box-model behaviour of elements.

  • u-l-b will set the element to display: block;
  • u-l-ib will set the element to display: inline-block;
    • There is an --m modifier available to set the element to vertical-align: middle;

Typography

View on GitHub

Use the typography helper classes to change text alignment, size, and color.

Center-aligned text


Left-aligned text


Right-aligned text


Small text


De-emphasised or "meta" text

Error message text

Success message text

<p class="u-font-center">Center-aligned text</p>
<hr/>
<p class="u-font-left">Left-aligned text</p>
<hr/>
<p class="u-font-right">Right-aligned text</p>
<hr/>
<p class="u-font-small">Small text</p>
<hr/>
<p class="u-font-meta">De-emphasised or "meta" text</p>
<p class="u-font-error">Error message text</p>
<p class="u-font-success">Success message text</p>

On this page