📏 Gap

The gap foundation provides a consistent way to apply vertical spacing between elements using row-gap.

Each gap variation is defined through a mixin and compiled into a foundation class. These follow the naming convention:

.f--gap-{variation}

🔧 How to use it

In HTML

<div class="f--gap-a">
  <div>Item A</div>
  <div>Item A</div>
</div>

In SCSS

Extending the generated foundation class — preferred method:

.c--component-a {
    @extend .f--gap-a;
}

Using the mixin directly — only if strictly necessary:

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

📱 Responsive logic inside the mixin

Using media queries inside the mixin gives you fine control over spacing across breakpoints. You can define different gap values per breakpoint by injecting @media blocks directly into each mixin, as shown in the following example:

@mixin make-gap-a {
    row-gap: 24px;
    @media all and ($viewport-type: $tablets) {
      row-gap: 16px;
    }
}

Codepen example:

Link to Codepen