📏 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.

All spacing classes follow the naming convention:

.f--{prefixes}-{value}
.f--{prefixes}-{breakpoint}-{value}

Available {prefixes} options:

$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 {value} options:

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

Available {breakpoint} options:

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

🔧 How to use it

In HTML

<div class="f--pt-4 f--pb-2">Vertical padding</div>
<div class="f--ml-tabletl-5">Left margin on tablet large</div>

In SCSS

.c--component-a {
  @extend .f--pt-4;
  @extend .f--ml-tabletl-5;
}

Codepen example:

Link to Codepen