Our SASS package 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}.

Where property is one of:

  • m - for classes that set margin
  • p - for classes that set padding

Where sides is one of:

  • t - for classes that set margin-top or padding-top
  • b - for classes that set margin-bottom or padding-bottom
  • l - for classes that set margin-left or padding-left
  • r - for classes that set margin-right or padding-right
  • blank - for classes that set a margin or padding on all 4 sides of the element

Where size is one of:

  • 0 - for classes that eliminate the margin or padding by setting it to 0

Example html

<button class="primary btn p-0">Button</button>
<button class="primary btn pt-0" >Button</button>
<button class="primary btn ml-0">Button</button>