Helper classes to use within templates, these are designed as ‘trump’ classes, so if applied to an element, they will be forcibly applied. There are numerous helper classes, most of which are outlined below.
By default, the helper classes have a prefix of u- to denote that it’s a utility class. This helps developers to debug where certain styling is coming from.
Floats elements within their container. The container should have .clearfix applied to ensure that the floats don’t break out of their parent.
Force text to a specific alignment. Please note that this is global across viewports, so use carefully.
Varying text sizes to keep consistency. The large text is generally the same size as the lede paragraph.
Set specific font weights on elements. This uses the primary typeface to pull the weights from.
Add margins to an element to force space around it. Ends denotes the top and bottom, while sides applies the margin to the left and right of the element.
Apply padding to an element – there are two kinds of padding accounted for in the base; standard, which uses the base spacing unit and half, which uses half of the base spacing unit.
Hide elements that are for accessibility reasons only, such as extra wording for screen readers to give better context.
Ensure a specific element uses the primary or secondary typeface.
Various utility classes to aid in positioning module elements. These are likely to be extended rather than used as drop-in classes.
This positions an element absolutely and sets the width and height to 100%, so it fills the relative parent container.
Center an element horizontally and vertically in it’s relative parent.
Vertically center an element to it’s relative parent.
Ensure an elements display type is set as block.
Center a block element within it’s parent.
Force an image to fill it’s parent, even if it has to stretch wider than the image source.
Set keylines on an element using the standard grey-ui colour. By default, the keyline appears on top.
Remove decorations from links.
Simple classes to force some form styling.
Force an image to display a block colour hover – this class needs to exist as a wrapper around the image.