4 #utility Utility Classes

These are 'helper classes' that can provide some additional options for editors.

4.1 #utility.backgrounds Backgrounds

  • .bg-textured
    Provides a helper

Helper classes to add backgrounds to elements

4.2 #utility.margin Margin

  • .margin-1
     
  • .margin-1-5
     
  • .margin-2
     
  • .margin-2-5
     
  • .margin-4
     
  • .margin-top-1
     
  • .margin-top-1-5
     
  • .margin-top-2
     
  • .margin-top-2-5
     
  • .margin-top-3
     
  • .margin-top-4
     
  • .margin-bottom-1
     
  • .margin-bottom-1-5
     
  • .margin-bottom-2
     
  • .margin-bottom-2-5
     
  • .margin-bottom-3
     
  • .margin-bottom-4
     
  • .margin-left-1
     
  • .margin-left-1-5
     
  • .margin-left-2
     
  • .margin-left-2-5
     
  • .margin-left-3
     
  • .margin-left-4
     
  • .margin-right-1
     
  • .margin-right-1-5
     
  • .margin-right-2
     
  • .margin-right-2-5
     
  • .margin-right-3
     
  • .margin-right-4
     

These utility (helper) classes provide ways to add margin to an element. The number following the class indicates how much margin. For example: margin-1 = margin: 1rem, margin-1-5 = margin: 1.5rem

4.3 #utility.padding Padding

  • .padding-1
     
  • .padding-1-5
     
  • .padding-2
     
  • .padding-2-5
     
  • .padding-4
     
  • .padding-top-1
     
  • .padding-top-1-5
     
  • .padding-top-2
     
  • .padding-top-2-5
     
  • .padding-top-3
     
  • .padding-top-4
     
  • .padding-bottom-1
     
  • .padding-bottom-1-5
     
  • .padding-bottom-2
     
  • .padding-bottom-2-5
     
  • .padding-bottom-3
     
  • .padding-bottom-4
     
  • .padding-left-1
     
  • .padding-left-1-5
     
  • .padding-left-2
     
  • .padding-left-2-5
     
  • .padding-left-3
     
  • .padding-left-4
     
  • .padding-right-1
     
  • .padding-right-1-5
     
  • .padding-right-2
     
  • .padding-right-2-5
     
  • .padding-right-3
     
  • .padding-right-4
     

These utility (helper) classes provide ways to modify text elements.

4.4 #utility.text Text

  • .sentinel
    Makes the element use the Sentinel font
  • .whitney
    Makes the element use the Whitney font
  • .italic
    Makes the element italic
  • .text-center
    Centers text within the element
  • .text-right
    Right aligns the text
  • .text-size-1
    Makes the font size 1rem (18px) -- This is the default font size
  • .text-size-1-5
    Makes the font size 1.5rem (27px)
  • .text-size-2
    Makes the font size 2rem (36px)
  • .text-size-3
    Makes the font size 3rem (54px)
  • .text-weight-500
    Makes the font weight 500 (Medium)
  • .text-weight-600
    Makes the font weight 600 (Semi-Bold)
  • .text-weight-700
    Makes the font weight 700 (Bold)
  • .text-weight-800
    Makes the font weight 800 (Black)
  • .text-color-gold
    Makes the text color Oswego gold.

These utility (helper) classes provide ways to modify text elements.