Alignment utilities

u-align-left
u-align-center
u-align-right
= text-align: [left/center/right]

u-align-left--sml-only
u-align-center--sml-only
u-align-right--sml-only
= text-align: [left/center/right] for tablet portrait size and down

u-align-left--lrg-only
u-align-center--lrg-only
u-align-right--lrg-only
= text-align: [left/center/right] for tablet landscape size and up

Margin and padding utilities

u-pad-[ top / btm / l / r / lr / all]--x[0 to 25] – based on a standard 6px baseline e.g…

  • u-pad-btm--x0 { padding-bottom: 0px !important; }
  • u-pad-top--x1 { padding-top: 6px !important; }
  • u-pad-lr--x3 { padding-left: 18px !important; padding-right: 18px !important; }
  • u-pad-all--x10 { padding: 60px !important; }

u-pad-[ top / btm / l / r / lr / all]--sml-only--x[0 to 25] – Applies to sml scrn only

  • u-pad-btm--sml-only--x0 { padding-bottom: 0px !important; }
  • u-pad-top--sml-only--x1 { padding-top: 6px !important; }
  • u-pad-lr--sml-only--x3 { padding-left: 18px !important; padding-right: 18px !important; }
  • u-pad-all--sml-only--x10 { padding: 60px !important; }

u-mrgn-[ top / btm / l / r / lr ]--x[0 to 25] – based on a standard 6px baseline e.g…

  • u-mrgn-btm--x0 { margin-bottom: 0px !important; }
  • u-mrgn-top--x1 { margin-top: 6px !important; }
  • u-mrgn-lr--x3 { margin-left: 18px !important; margin-right: 18px !important; }
  • u-mrgn-r--x10 { margin-right: 60px !important; }

u-mrgn-[ top / btm / l / r / lr / all]--sml-only--x[0 to 25] – Applies to sml scrn only

  • u-mrgn-btm--sml-only--x0 { margin-bottom: 0px !important; }
  • u-mrgn-top--sml-only--x1 { margin-top: 6px !important; }
  • u-mrgn-lr--sml-only--x3 { margin-left: 18px !important; margin-right: 18px !important; }
  • u-mrgn-all--sml-only--x10 { margin: 60px !important; }