CSS utility classes

The styleguide provides a bunch of CSS utility classes designed to allow you to style your markup directly without the need for writing custom CSS.

These classes all use !important to overwrite any custom CSS already applied to an element. All available classes can be found on Github.

Use utility classes with caution!

Most classes are self explanatory but some, like paddings and margins which are the most commonly used classes needs some explanation for how they are contructed.

How the classes are contructed

All classes start with "u" for "utility"

u = utility

"m" is for "margin"

m = margin

"p" is for "padding"

p = padding

Next is directions

t = top
r = right
b = bottom
l = left
x = x-axis
y = y-axis

And finally numerical value

0 - 8

This means a complete utility class would look something like this giving this class a bottom margin with the value 4

u-m-b-4

The values are typography baselines. 1 baseline = ½ of the document line-height meaning a value of 4 equals twice the document line-height.