Spacing

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

How it works

Assign responsive-friendly padding or margin values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. Classes are ranging from .25rem to 5rem.

Notation

Spacing utilities that apply to all breakpoints, from xs to xl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0 and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

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 one of:

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

Where sides is one of:

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

Where size is one of:

  • 0 - for classes that eliminate the padding or margin by setting it to 0
  • 1 - (by default) for classes that set the padding or margin to .25rem
  • 2 - (by default) for classes that set the padding or margin to .5rem
  • 3 - (by default) for classes that set the padding or margin to 1rem
  • 4 - (by default) for classes that set the padding or margin to 1.5rem
  • 5 - (by default) for classes that set the padding or margin to 2rem
  • 6 - (by default) for classes that set the padding or margin to 5rem
  • auto - (by default) for classes that set the margin to auto

Horizontal centering

Additionally, Grayshift also includes an .mx-auto class for horizontally centering fixed-width block level content—that is, content that has display: block and a width set—by setting the horizontal margins to auto.

<div class="mx-auto"></div>