CSS Utility Classes

These CSS Utility Classes can be added to components on a page to override the default behaviour. The intent of these classes is to reuse code as much as possible and use these classes to tweak elements rather than writing specific CSS for each element.

SASS Structure Location: … /sass/_utility.scss

Text Colours

These classes will only be applied to text colour, not background or other elements.

Tyndale Brand Colours

  • blue (#215)
  • red (#b22)
  • gold (#EA0)
  • green (#790)
  • orange (#C31)
  • aqua (#3bb)
  • beige (#EAE4A9)

Other Colours

  • grey-dark (#555)
  • dark, ic-dark (#222; text colour)
  • light, ic-light (#efefef; light grey)

Background Colours

Note: darker colours have the text, link and heading colours altered to provide sufficient contrast.

  • bg-blue (#215)
  • bg-red (#b22)
  • bg-grey-dark (#555)
  • bg-dark (#222)
  • bg-light (#efefef)

Text

  • text-left - aligns text left. This is the default, so this is only needed if you’re overriding a piece of text inside something that aligns it otherwise
  • text-right, .more-link - aligns text right
  • text-center - centre-aligns text
  • lowercase - makes text all lowercase - this is probably almost never needed
  • uppercase - makes text uppercase - should be used sparingly as uppercase text is harder to read
  • capitalize - Capitalizes Every Word - probably should never be used
  • text-larger - increases text size slightly (1.1em)
  • text-xl - increases text size more (1.3em)
  • text-xxl - increases text size more (1.5em) (*new)
  • text-small - decreases text size slightly (0.9em)
  • text-smaller - decreases text size more (0.8em)
  • line-height-plus - increases line height (space between lines of text) slightly to 1.75 rather than 1.5 (default)
  • line-height-2 - sets line height to 2 instead of 1.5
  • white-text - makes all text, including headings, white inside whatever element has this class. This should only be used on suitably dark backgrounds for sufficient contrast. Note: this does not make links white, because links may need to be a different colour (e.g. gold). You can use one of the links utility classes to change the link colour.
  • serif - makes text the brand serif font (MinionPro)

These classes can be used on individual links or on containers to change the colour of all the links inside the element. In each case the first class is to put on individual links, the second on parent elements.

  • gold, links-gold
  • blue, links-blue (Tyndale brand royal blue) - switches to Tyndale red on hover, focus, active
  • white, links-white
  • dark, links-dark
  • hover-reverse - this cannot be used on individual links, only parent elements. Default link styling is underline with the underline being removed on hover. This reverses that behaviour and should be used with caution, only in situations and with suitable colour/styling that will indicate that the text is a link.

Floats

Floating elements to the left or right.

  • left - float an element left
  • right - float element right

Margins & Padding

These are pretty self-explanatory. The “space” classes add 1em of margin to whatever side of the element is specified in the class name; the “padding” classes add 1em of padding. “All” means it’s applied to all sides; “half” is 0.5em.

  • space-right
  • half-space-right
  • space-left
  • half-space-left
  • space-above
  • half-space-above
  • space-below
  • half-space-below
  • no-space
  • padding-right
  • padding-left
  • padding-top
  • padding-bottom
  • padding-all

Unordered list styles

These classes are added to the <ul> element.

  • menu - add this class to an unordered list to remove all padding, margin, and bullets
  • pipe - adds a vertical border to the right of each list item, with the appropriate spacing. This should be used rather than physically typing a pipe character (|). This should be combined with appropriate flexbox classes in order to align the ul horizontally.
  • borders-bottom - adds a light grey border to the bottom of the list items, with appropriate padding/margin
  • links-list - this creates a nicely styled list with borders at the bottom of each list item and a red right angle icon (>) at the right of each. Used to create lists of links, this is also available as a Paragraphs item.

Horizontal rule

  • red - makes the <hr> 4 pixels high and red

Borders

Regular “border” puts a solid light grey (#ccc) border on the element
Dotted “border” puts a dotted light grey (#777) border on the element

  • border-all
  • border-all-dotted
  • border-top
  • border-top-dotted
  • border-right
  • border-right-dotted
  • border-bottom
  • border-bottom-dotted
  • border-left
  • border-left-dotted

Border Colours

(*new) These classes override the border-color for that element

  • border-blue (#215)
  • border-gold (#EA0)
  • border-red (#b22)
  • border-dark (#222)
  • border-light (#efefef)

Border Widths

(*new) These classes override the border-width (px) for that element

  • border-0
  • border-1
  • border-5
  • border-10
  • border-15