CSS Utility Classes

[some of] 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.

Note: Some of these classes have been replaced with better options and may be crossed out below. Please do not use these classes in new development. They remain here only for legacy documentation.

Text Colours

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

Tyndale Brand Colour Classes

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

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)
  • bg-lighter (#f5f5f5)

Text

  • text-left
  • text-right
  • text-center
  • lowercase - makes text all lowercase
  • uppercase - makes text uppercase
  • capitalize - Capitalizes Every Word
  • text-larger (1.1em)
  • text-xl (1.3em)
  • text-xxl (1.5em)
  • text-small (0.9em)
  • text-smaller (0.8em)
  • line-height-plus - increases line height from 1.5 to 1.75
  • line-height-2 - increases line height from 1.5 to 2
  • white-text
  • serif - changes font to MinionPro and increases size

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
  • white, links-white
  • dark, links-dark
  • hover-reverse - parent elements only.

Floats

Floating elements (images or pullquotes) to the left or right. This should not be used for layout.

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

Margins & Padding

These are pretty self-explanatory… and depreciated - legacy only

  • 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

Adding Padding & Margin

These classes are not specific to the grid-column system, but work well in creating the right layout when using the grid-column system. (CSS box model docs)

Padding

Padding can be added [inside] any container on all sides using p-xl or on individual sides using pt-xl pr-xl pb-xl pl-xl (top, right, bottom, left). The values (ex. -xl) can be mixed as needed.

  • p[t|r|b|l]-0
  • p[t|r|b|l]-px
  • p[t|r|b|l]-sm
  • p[t|r|b|l]-md
  • p[t|r|b|l]-lg
  • p[t|r|b|l]-xl
  • p[t|r|b|l]-2xl
  • p[t|r|b|l]-3xl
  • p[t|r|b|l]-4xl

Margin

Margin can be added [outside] any container on all sides using m-xl or on individual sides using mt-xl mr-xl mb-xl ml-xl (top, right, bottom, left). The values (ex. -xl) can be mixed as needed

  • m[t|r|b|l]-0
  • m[t|r|b|l]-px
  • m[t|r|b|l]-sm
  • m[t|r|b|l]-md
  • m[t|r|b|l]-lg
  • m[t|r|b|l]-xl
  • m[t|r|b|l]-2xl
  • m[t|r|b|l]-3xl
  • m[t|r|b|l]-4xl

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.
  • 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

–
Note: The following border classes are generally used to create the Big Quotes component and may not be appropriate in other uses.

Border Colours

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

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

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