Helper classes

For consistent spacing and margin, we use a sizing system for both margin and padding. Padding can be applied by using the classes padding-(direction)--xs through padding-(direction)--xl, while margin uses the margin-(direction)--xs through margin-(direction)--xl scale. All paddings and margins are set in intervals of 10px.

Padding & Margins

padding-all--xs: 10px
padding-all--sm: 20px
padding-all--md: 30px
padding-all--lg: 40px
padding-all--xl: 50px

padding helpers:

  • padding-all--xs for a padding all sides of 10px
  • padding-all--sm for a padding all sides of 20px
  • padding-all--md for a padding all sides of 30px
  • padding-all--lg for a padding all sides of 40px
  • padding-all--xl for a padding all sides of 50px
  • padding-top-btm--xs for a padding top and bottom of 10px
  • padding-top-btm--sm for a padding top and bottom of 20px
  • padding-top-btm--md for a padding top and bottom of 30px
  • padding-top-btm--lg for a padding top and bottom of 40px
  • padding-top-btm--xl for a padding top and bottom of 50px
  • padding-rght-lft--xs for a padding right and left of 10px
  • padding-rght-lft--sm for a padding right and left of 20px
  • padding-rght-lft--md for a padding right and left of 30px
  • padding-rght-lft--lg for a padding right and left of 40px
  • padding-rght-lft--xl for a padding right and left of 50px

margin helpers:

  • margin-all--xs for a margin all sides of 10px
  • margin-all--sm for a margin all sides of 20px
  • margin-all--md for a margin all sides of 30px
  • margin-all--lg for a margin all sides of 40px
  • margin-all--xl for a margin all sides of 50px
  • margin-top-btm--xs for a margin top and bottom of 10px
  • margin-top-btm--sm for a margin top and bottom of 20px
  • margin-top-btm--md for a margin top and bottom of 30px
  • margin-top-btm--lg for a margin top and bottom of 40px
  • margin-top-btm--xl for a margin top and bottom of 50px
  • margin-rght-lft--xs for a margin right and left of 10px
  • margin-rght-lft--sm for a margin right and left of 20px
  • margin-rght-lft--mdfor a margin right and left of 30px
  • margin-rght-lft--lg for a margin right and left of 40px
  • margin-rght-lft--xl for a margin right and left of 50px

padding & margin removal:

  • padding-all--0 or margin-all--0 for no space on all sides
  • padding-top--0 or margin-top--0 for no space on top
  • padding-rght--0 or margin-rght--0 for no space on right
  • padding-btm--0 or margin-btm--0 for no space on bottom
  • padding-lft--0 or margin-lft--0 for no space on left
  • padding-top-btm--0 or margin-top-btm--0 for no space on top or bottom
  • padding-rght-lft--0 or margin-rght-lft--0 for no space on on right or left

Typography

class name discription
txt-algn--lft Align text to the left
txt-algn--rght Align text to the right
txt-algn--cntr Align text to the center
txt-capital Capitalize all of the text
txt-upper Transform all of the text to uppercase
txt-lower Transform all of the text to lowercase