Utilities

Naming convention

The naming convention for any utility class is u-[class-name].

Borders

These utility classes set different types of borders.

Setting Borders - Border Width

<div class="u-border-none"></div>
<div class="u-border"></div>
<div class="u-border-medium"></div>
<div class="u-border-large"></div>

Setting Borders - Border Style

<div class="u-border-dashed-light"></div>
<div class="u-border-dashed-medium"></div>
<div class="u-border-dotted-light"></div>
<div class="u-border-dotted-medium"></div>

Setting Borders - Border Directions

<div class="u-border-top"></div>
<div class="u-border-right"></div>
<div class="u-border-bottom"></div>
<div class="u-border-left"></div>

Setting Borders - Border Radius

<div class="u-border-radius-small"></div>
<div class="u-border-radius-medium"></div>
<div class="u-border-radius-large"></div>
<div class="u-border-radius-xl"></div>
<div class="u-border-radius-round"></div>

Setting Borders - Border Colours

<div class="u-border u-border-primary"></div>
<div class="u-border u-border-secondary"></div>
<div class="u-border u-border-highlight"></div>

Colours

Background Colours

These are the classes used for background colours

<div class="u-primary-bg-color">Primary background colour</div>
<div class="u-secondary-bg-color">Secondary background colour</div>
<div class="u-highlight-bg-color">Highlight background colour</div>
<div class="u-success-bg-color">Success background colour</div>
<div class="u-info-bg-color">Info background colour</div>
<div class="u-alert-bg-color">Alert background colour</div>
<div class="u-error-bg-color">Error background colour</div>

Text Colours

These are text colours

<div class="u-secondary-bg-color u-primary-txt-color">Primary text colour</div>
<div class="u-primary-bg-color u-secondary-txt-color">Secondary text colour</div>

Display

These utility classes set different display properties

<div class="u-display-none"></div>
<div class="u-display-block"></div>
<div class="u-display-flex"></div>
<div class="u-display-inline"></div>
<div class="u-display-inline-block"></div>
<div class="u-display-table"></div>

Flex

Flex is used to manage layouts and alignment and covers a set of responsive flexbox utilities. For more detail about flexbox used in the grid system please have a look at the layouts section

Float

These utility classes float an element to the left or right but they need to be wrapped around a div with the class u-clear so that the layout is not broken.

<div class="u-clear">
    <div class="u-float-left">Float Left</div>
    <div class="u-float-right">Float Right</div>
</div>

Margins and Paddings

These utility classes set different paddings and margins. The naming convention for these classes are as follows:

u-[property]-[side]-[size]

where [property] is one of

• mar for margin
• pad for padding

where [sides] is one of

• t for top
• b for bottom
• l for left
• r for right
• x for both the left and right
• y for the top and bottom

where [size] is

• 0 for zero - 0px
• s for small - 5px
• m for medium - 10px
• l for large - 15px
• xl for extra large - 20px

The first example is a class which adds padding to the left of 5px, the second example is a class which adds margin to the top of 15px

<div class="u-pad-l-s"></div>
<div class="u-mar-t-l"></div>

Overflow

These utility classes set the overflow

<div class="u-overflow-hidden"></div>
<div class="u-overflow-auto"></div>

Positioning

These utility classes set positioning on the page

<div class="u-position-absolute"></div>
<div class="u-position-fixed"></div>
<div class="u-position-relative"></div>
<div class="u-position-static"></div>

Text

These utility classes set different text styles and control text alignment and wrapping

Text Alignment

<div class="u-txt-center">Centred Text</div>
<div class="u-txt-left">Left Aligned Text</div>
<div class="u-txt-right">Right Aligned Text</div>

Text Wrapping

<div class="u-txt-wrap">This is wrapping text</div>
<div class="u-txt-nowrap">This is not wrapping text</div>
<div class="u-txt-ellipsis">This is text with ellipsis</div>

Text Styles

<div class="u-txt-uppercase">Uppercase Text</div>
<div class="u-txt-strong">Strong Text</div>
<div class="u-txt-light">Light Text</div>
<div class="u-txt-italic">Italic Text</div>