📐 Spaces

The spaces foundation provides bottom margins to manage vertical rhythm across components.
Each spacing variation is defined through a mixin and compiled into a foundation class that follows the naming convention:

.f--sp-{variation}

🔧 How to use it

In HTML

<div class="f--sp-a">Spacing A</div>
<div class="f--sp-c">Spacing C</div>

In SCSS

Extending the generated foundation class — preferred method:

.c--component-a {
  @extend .f--sp-b;
}

Using the mixin directly — only if strictly necessary:

.c--component-a {
    @include make-sp-b();
}