Utilities

Utility classes are single responsibility classes designed to reduce duplication in our code.

Alignment

Our alignment utilities will help position elements on the page.

Floats

Force element to float to the left.

<div class="am-pull--left">Element to float left</div>

Force element to float to the right.

<div class="am-pull--right">Element to float right</div>

Text Alignments

Align text to the right

<div class="am-align--right">Align text to the right</div>

Align text to the center

<div class="am-align--center">Align text to the center</div>

Z-index

We have designed a Z-index map which lets us set a z-index value based on a set list of values. Instead of setting arbitrary z-index values which is difficult to maintain, we can select from the following list;

$z-indexes: (
  'negative': -1,
  'lower': 1,
  'low': 3,
  'mid': 5,
  'high': 7,
  'higher': 9
);

Usage

/*  Any element that needs to sit on top of another element should use the 'lower' or 'low' value */
.shape {
    position: relative;
    z-index: z-index('lower');
}

/*  Any element that needs to sit above many elements on the page, such as a sticky header,
    can use the 'mid' value */
.header--sticky {
    position: fixed;
    z-index: z-index('mid');
}

/*  There shouldn't be a need to use the 'higher' value, except for instances where we know that an element
    has to sit above all other elements. */
.modal--full-page {
    position: fixed;
    z-index: z-index('higher');
}

Spacing

Non-breaking

AIR MILES®

<span class="nobr">AIR MILES<sup>&reg;</sup></span>

Lightness/Darkness

We can use lightness and/or darkness functions to provide a variation of our set brand colours.

Lighter 20%
Normal (blue-accent)
Darker 20%


/*  Lightness
    The parameters are: color and percentage 0% - 100% */

.modal--light {
    background-color: lighter(color('blue'), 20%);
}

/*  Darkness */
.modal--dark {
    background-color: darker(color('red'), 20%);
}