Spacing

Spacing properties ensure unified spacing throughout components.

Spacing Unit

All components align to an 8px square baseline grid for mobile, tablet, and desktop.

Spacing Utility Classes

To enable adherence to this grid, a set of breakpoint-friendly spacing utilities are available. These apply either margin or padding relative to 8x the value provided at a range of 0-8.

You can completely customize the spacing classes produced by modifying the $u-spacers map. Modifications will get merged with the default map.

// Increase range
$u-spacers: (
  9: 9 * 8px,
  10: 10 * 8px
);

// Modify
$u-spacers: (
  1: 4px,
  2: 8px
);

// Custom keys
$u-spacers: (
  sm: 24px,
  lg: 56px
);

Utility Class Format

Spacing classes are defined in the following format:

.u-[m|p][side]-[breakpoint]-[size]

Where:

• m = margin
• p = padding
• side = t|b|l|r|x|y
• breakpoint = the breakpoint key, such a sm
• size = a value defined in $u-spacers, by default 0-8, plus auto for use with margin classes

<section>
  <div class="u-paper u-px-xs-4">Increase horizontal (x) padding for all breakpoints</div>
  <div class="u-paper u-mt-xs-4 u-mt-md-6">Breakpoint specific top margin</div>
  <div class="u-paper u-py-xs-0 u-mt-xs-3">
    Remove vertical (y) padding for all breakpoints, combo with top margin
  </div>
  <div class="u-grid-container u-mt-xs-4">
    <div class="u-grid-item u-xs-auto"><div class="u-paper">Grid Item</div></div>
    <div class="u-grid-item u-xs-8 u-lg-5 u-ml-lg-auto">
      <div class="u-paper">Grid Item using `auto` margin behavior</div>
    </div>
    <div class="u-grid-item u-xs-auto"><div class="u-paper">Grid Item</div></div>
  </div>
</section>