Utilities

.u-*

Utilities are single use classes that can be used to apply some very targeted styling.

The utilities are included at the bottom of the stylesheet and many of them have !important applied, so they will trump other styles where they are added.

Text align

  • u-left-text: align left
  • u-right-text: align right
  • u-center-text: align center

Example

Left

Center

Right

Markup

<p class="u-left-text">Left</p>
<p class="u-center-text">Center</p>
<p class="u-right-text">Right</p>

Cover

  • u-cover: Makes element cover other elements

Custom text

  • u-locked: render a lock icon before the text
  • u-fine-print: make the text small

Example

Locked text smaller

Markup

<p class="u-locked">Locked text <span class="u-fine-print">smaller</span></p>

Display

  • u-inline-block: Set display to inline block.

Flexbox container

  • u-flexbox-container: Container element for flexbox-items.

Floating

Utilities are single use classes that can be used to override some settings.

  • u-left: float left
  • u-right: float right
  • u-clear: clearfix for container

Example

Left
Right

Markup

<div class="u-clear" style="background-color: white;">
    <div class="u-left" style="background-color: #C90062; padding: 1rem;">Left</div>
    <div class="u-right" style="background-color: #C90062; padding: 1rem;">Right</div>
</div>

Input border

  • u-input-border: put a border around an input field.

Useful when background color is the same as input field color.

Example

Markup

<div style="background-color: white; padding: 5rem;">
    <label for="input-border-example">Label</label>
    <input id="input-border-example" class="u-input-border" placeholder="I have a border!"/>
</div>

Margin

  • u-margin-top: Set a margin above the element
  • u-margin-left: Set a margin to the left of the element
  • u-margin-right: Set a margin to the right of the element
  • u-margin-bottom: Set a margin below the element

Example

Some text.
Some text with a top margin.

Some other text.Text with a margin to the left.

Text with a margin to the right.Some other text.

Some text with a bottom margin.
Some text.

Markup

<div style="background: #FFF">
    Some text.
</div>

<div class="u-margin-top" style="background: #FFF">
    Some text with a top margin.
</div>

<br />

<div style="background: #FFF">
    Some other text.<span class="u-margin-left">Text with a margin to the left.</span>
</div>

<br />

<div style="background: #FFF">
    <span class="u-margin-right">Text with a margin to the right.</span>Some other text.
</div>

<br />

<div class="u-margin-bottom" style="background: #FFF">
    Some text with a bottom margin.
</div>

<div style="background: #FFF">
    Some text.
</div>

Text modifiers

  • u-large-text: larger font size
  • u-success-text: success color text
  • u-warning-text: warning color text
  • u-error-text: error color text

Example

Large text

Success text

Warning text

Error text

Link inherit color Underline text

Markup

<p class="u-large-text">Large text</p>
<p class="u-success-text">Success text</p>
<p class="u-warning-text">Warning text</p>
<p class="u-error-text">Error text</p>
<a class="u-inherit-text">Link inherit color</a>
<a class="u-underline-text">Underline text</a>