Spacings

Front includes a wide range of shorthand responsive margin and padding utility classes to modify an element's appearance.

Notation

The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.

Where property is:

  • space - for class that set padding-top and padding-bottom

Where sides is:

  • space-top - for class that set padding-top
  • space-bottom - for class that set padding-bottom
  • blank - for classes that set a padding on top and bottom sides of the element

Where size is one of:

  • 0 - for classes that eliminate the padding-top and padding-bottom by setting it to 0
  • 1 - (by default) for classes that set the padding-top and padding-bottom to $content-space * 2
  • 2 - (by default) for classes that set the padding-top and padding-bottom to $content-space * 4
  • 3 - (by default) for classes that set the padding-top and padding-bottom to $content-space * 8
  • 4 - (by default) for classes that set the padding-top and padding-bottom to $content-space * 12.5
  • 5 - (by default) for classes that set the padding-top and padding-bottom to $content-space * 15

(You can add more sizes by adding entries to the $content-space Sass map variable via: _theme-variables.scss.)

Contact Us