Utilities

Spacing Margin/Padding

Where property is one of:

  • m - margin
  • p - padding

Where sides is one of:

  • t - setting margin-top or padding-top
  • b - setting margin-bottom or padding-bottom
  • l - setting margin-left or padding-left
  • r - setting margin-right or padding-right
  • blank - setting margin or padding on all 4 sides of the element

Where size is one of (the factor of 8px):

  • 0 - 0px
  • 1 - 8px
  • 2 - 16px
  • 3 - 24px
  • 4 - 32px
  • 5 - 40px

Examples:

  • .fx-u-m-0 - setting the margin to 0px all 4 sides of the element
  • .fx-u-p-0 - setting the padding to 0px all 4 sides of the element
  • .fx-u-mt-1 - setting the margin-top to 8px
  • .fx-u-pb-2 - setting the padding-bottom to 16px
  • .fx-u-mr-3 - setting the margin-right to 24px
  • .fx-u-pl-4 - setting the padding-left to 32px
  • .fx-u-mb-5 - setting the margin-bottom to 40px

Colors

  • .fx-u-color-black
  • .fx-u-color-white
  • .fx-u-color-default
  • .fx-u-color-primary
  • .fx-u-color-danger
  • .fx-u-color-warning
  • .fx-u-color-success

Background Colors

  • .fx-u-bg-black
  • .fx-u-bg-white
  • .fx-u-bg-default
  • .fx-u-bg-primary
  • .fx-u-bg-danger
  • .fx-u-bg-warning
  • .fx-u-bg-success

Position

  • .fx-u-position-static
  • .fx-u-position-relative
  • .fx-u-position-absolute
  • .fx-u-position-fixed
  • .fx-u-position-sticky

Text

.fx-u-text-left
.fx-u-text-right
.fx-u-text-center
.fx-u-text-justify
.fx-u-text-nowrap
.fx-u-text-lowercase
.fx-u-text-uppercase
.fx-u-text-capitalize
.fx-u-text-truncate .fx-u-text-truncate .fx-u-text-truncate .fx-u-text-truncate .fx-u-text-truncate .fx-u-text-truncate .fx-u-text-truncate .fx-u-text-truncate .fx-u-text-truncate .fx-u-text-truncate .fx-u-text-truncate .fx-u-text-truncate
.fx-u-text-mute

Visibility

  • .fx-u-hide
  • .fx-u-show
  • .fx-u-invisible