General CSS Classes

Utility classes available to developers for common tasks.

Clearfix

.u-clearfix

Clear the current element so it always appears on a new line. Can also use the clearfix mixin – @include clearfix() in your CSS.

<span class="u-clearfix">Lorem</span>
<span>Ipsum</span>

Colour Utilities

.u-lightenBg

Add the lightest background colour to the element

<div style="background-color: #f5f5f5; padding: 10px">
    <div class="u-lightenBg">Lorem</div>
    <div>Ipsum</div>
</div>

.u-bordered,
%u-bordered

Add default padding, border and border radius to the element.

Can also use the bordered mixin – @include bordered(borderRadius, padding, borderColour) in your CSS.

<div class="u-bordered">Lorem Ipsum</div>

.u-bordered--mid

Add default padding, border and border radius to the element for medium(> 768px) screen size

<div class="u-bordered--mid">Lorem Ipsum</div>

Display Utilities

.is-hidden,
.no-js .is-hidden--noJS
.is-shown,
.no-js .is-shown--noJS

Hide/Show from both screenreaders and browsers

<span class="is-hidden">Lorem</span>
<span>Ipsum</span>

.is-visuallyHidden

Hide only visually, but have it available for screenreaders

<span class="is-visuallyHidden">Lorem</span>
<span>Ipsum</span>

&.focusable:active,
&.focusable:focus

Extends the .is-visuallyhidden class to allow the element to be focusable when navigated to via the keyboard

<div class="is-visuallyHidden focusable:active">Lorem</div>
<div class="is-visuallyHidden focusable:focus">Ipsum</div>
<div>Dolor</div>

.is-invisible

Hide visually and from screenreaders, but maintain layout

<div class="is-invisible">Lorem</div>
<div>Ipsum</div>

.u-pointer

<div class="u-pointer">Lorem Ipsum</div>

Position Utilities

.is-sticky

Fixed position for the element

.u-sticky

Sticky position for the element with doubled default spacing at the top

Typographic Utilities

.u-noWrap

Ensure text inside helper never wraps

<div class="u-noWrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>

.u-uppercase

<div class="u-uppercase">Lorem Ipsum</div>

.u-textPad

Add tab indentation (spacing(x4))

<div>Lorem</div>
<div class="u-textPad">Ipsum</div>

.u-text-truncate

Forces overly long lines of text to truncate. Can also use the truncate mixin – @include truncate(); in your CSS.

<div class="u-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

.u-noUnderline

Add underline text decoration for hover, active and focus satates

<div class="u-noUnderline">Lorem Ipsum</div>

.u-text-centre
.u-text-left
.u-text-right

<div class="u-text-centre">I am centered positioned</div>
<div class="u-text-left">I am left positioned</div>
<div class="u-text-right">I am right positioned</div>

.u-text-highlight

<span class="u-text-highlight">Lorem Ipsum</span>

.u-text-indent

Add text indentation (spacing(x2))

<div>Lorem</div>
<div class="u-text-indent">Ipsum</div>

Spacing Utilities (margins)

.u-noSpacing

Remove all margins from the element

.u-spacingTop

Adds default marging to the top (spacing())

.u-spacingTop--small

Add half of default marging to the top (spacing(x0.5))

.u-spacingTop--large

Add doubled default marging to the top (spacing(x2))

.u-spacingRight

Add default marging to the right (spacing())

.u-spacingBottom

Add default marging to the bottom (spacing())

.u-spacingBottom--large

Add doubled default marging to the bottom (spacing(x2))

.u-spacingLeft

Add default marging to the left (spacing())

<div class="u-noSpacing">NoSpacing</div>
<div class="u-spacingTop">SpacingTop</div>
<div class="u-spacingTop--small">Small SpacingTop</div>
<div class="u-spacingTop--large">Large SpacingTop</div>
<div class="u-spacingRight">SpacingRight</div>
<div class="u-spacingBottom">SpacingBottom</div>
<div class="u-spacingBottom--large">Large SpacingBottom</div>
<div class="u-spacingLeft">SpacingLeft</div>

Padding Utilities

.u-noPad

Remove all paddings from the element

.u-padTop

Add default padding to the top (spacing())

.u-padTop--large

Add doubled default padding to the top (spacing(x2))

.u-padTop--large--aboveMid

Add doubled default padding to the top for medium(> 768px) media query (spacing(x2))

<div class="u-noPad">NoPadding</div>
<div class="u-padTop">PaddingTop</div>
<div class="u-padTop--large">Large PaddingTop</div>
<div class="u-padTop--large--aboveMid">Large PaddingTop for screens more than 768px</div>

Image Replacement Techniques

%u-ir,
.u-ir

Background image replacement

.u-hideText,
%u-hideText

Alternative image replacement technique

List Helper

.u-unstyled,
%u-unstyled

<ul class="u-unstyled">
    <li>Unstyled list element</li>
    <li>Unstyled list element</li>
    <li>Unstyled list element</li>
</ul>

Helper classes for focus accessibility

%u-elementFocus,
.u-elementFocus

Custom outline styling for elements that have a focus state

%u-elementFocus--boxShadow,
.u-elementFocus--boxShadow

Custom visual outline emulation for better appearance on elements with rounded corners