_base.helpers.scss

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

Floats elements within their container. The container should have .clearfix applied to ensure that the floats don’t break out of their parent.

  • .u-float–right
  • .u-float–left
  • .u-float–none
Text alignment

Force text to a specific alignment. Please note that this is global across viewports, so use carefully.

  • .u-text–center
  • .u-text–left
  • .u-text–right
Text Size

Varying text sizes to keep consistency. The large text is generally the same size as the lede paragraph.

  • .u-text–small
  • .u-text–tiny
  • .u-text–large
Text transform
  • .u-text–uppercase
  • .u-text–lowercase
Font Weights

Set specific font weights on elements. This uses the primary typeface to pull the weights from.

  • .u-weight–light
  • .u-weight–normal
  • .u-weight–semi-bold
  • .u-weight–bold
Add margins

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.

  • .u-push
  • .u-push–top
  • .u-push–right
  • .u-push–bottom
  • .u-push–left
  • .u-push–ends
  • .u-push–sides
Remove margins
  • .u-flush
  • .u-flush–top
  • .u-flush–right
  • .u-flush–bottom
  • .u-flush–left
  • .u-flush–ends
  • .u-flush–sides
Add Padding

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.

  • .u-soft
  • .u-soft–top
  • .u-soft–right
  • .u-soft–bottom
  • .u-soft–left
  • .u-soft–ends
  • .u-soft–sides
  • .u-soft-half
  • .u-soft-half–top
  • .u-soft-half–right
  • .u-soft-half–bottom
  • .u-soft-half–left
  • .u-soft-half–ends
  • .u-soft-half–sides
Remove padding
  • .u-hard
  • .u-hard–top
  • .u-hard–right
  • .u-hard–bottom
  • .u-hard–left
  • .u-hard–ends
  • .u-hard–sides
Accessibility Items

Hide elements that are for accessibility reasons only, such as extra wording for screen readers to give better context.

  • .u-accessibility
  • .u-screen-reader-text
  • .u-visuallyhidden
Typefaces

Ensure a specific element uses the primary or secondary typeface.

  • .u-typeface–primary
  • .u-typeface–secondary
Positioning Elements

Various utility classes to aid in positioning module elements. These are likely to be extended rather than used as drop-in classes.

  • .u-fill
    This positions an element absolutely and sets the width and height to 100%, so it fills the relative parent container.
  • .u-center
    Center an element horizontally and vertically in it’s relative parent.
  • .u-vertical-center
    Vertically center an element to it’s relative parent.
  • .u-block
    Ensure an elements display type is set as block.
  • .u-block–center
    Center a block element within it’s parent.
  • .u-image-fill
    Force an image to fill it’s parent, even if it has to stretch wider than the image source.
Keylines

Set keylines on an element using the standard grey-ui colour. By default, the keyline appears on top.

  • .u-keyline
  • .u-keyline–bottom
  • .u-keyline–white
Links

Remove decorations from links.

  • .u-link–no-decoration
Forms

Simple classes to force some form styling.

  • .u-hide-labels
  • .u-btn-fill
Image Link

Force an image to display a block colour hover – this class needs to exist as a wrapper around the image.

  • .u-image-link