Spacing

The spacing foundation provides a flexible system for applying margin and padding to elements using class-based utilities. It uses SCSS loops to generate classes for multiple spacing directions, values, and responsive breakpoints.

Base Measure Unit

$measure: 0.5rem; /* 0.5rem = 8px (when root font-size is 16px) */

All spacing values in the system are multiples of this base measure, creating a harmonious spacing scale that maintains consistency across all components and layouts.

Naming conventions

.f--{prefix}-{value}
.f--{prefix}-{breakpoint}-{value}

Available prefixes:

$space-prefixes: (
  p  : padding,
  pt : padding-top,
  pr : padding-right,
  pb : padding-bottom,
  pl : padding-left,
  mt : margin-top,
  mr : margin-right,
  mb : margin-bottom,
  ml : margin-left,
);

Available values:

$space-values: (
  0, 1, 2, 3, 4, 5, 7, 10, 15, 17, 25
);

Available breakpoints:

$space-breakpoints: (
  all: $all,
  tabletl: $tabletl,
  tabletm: $tabletm,
  tablets: $tablets,
  mobile: $mobile,
);

How it works

Spacing foundation classes are generated using loops that iterate over three maps:

Spacing prefixes (direction and property)
Spacing values (numeric multipliers)
Breakpoints (responsive rules)

The loop structure creates combinations like:

.f--pt-4 → padding-top: 32px (4 × 8px base measure)
.f--ml-tabletl-5 → margin-left: 40px on tablet large

This generates hundreds of utility classes automatically, ensuring consistency across the entire spacing system.

How to use it

In HTML

<!-- Vertical padding -->
<div class="f--pt-4 f--pb-2">Content with padding</div>

<!-- Responsive margin -->
<div class="f--ml-tabletl-5">Left margin on tablet large</div>

<!-- Multiple spacing utilities -->
<div class="f--p-3 f--mt-mobile-2">Padding all sides + top margin on mobile</div>

Codepen example:

Best Practices

Do’s ✅

✅ Always use measure multiples: Use spacing utilities or calc($measure * X) in SCSS
✅ Prefer utility classes: Use .u--pt-10 instead of writing custom CSS when possible
✅ Use responsive spacing: Reduce spacing on smaller screens for better mobile UX
✅ Follow the scale: Stick to available values (0, 1, 2, 3, 4, 5, 7, 8, 10, 15)
✅ Reference Figma: Verify spacing values match design specifications using Developer Mode
✅ Think in multiples of 8: Makes calculations predictable and maintainable

Don’ts ❌

❌ Don’t use arbitrary pixel values like padding: 23px
❌ Don’t create spacing values outside the defined scale
❌ Don’t forget responsive spacing adjustments
❌ Don’t mix spacing systems (always use measure-based values)
❌ Don’t use spacing values that aren’t in the available list (stick to 0, 1, 2, 3, 4, 5, 7, 8, 10, 15)

Knowledge Check

Test your understanding of this section

Loading questions...