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.

Naming conventions

.f--gap-{variation}

{variation} represents a specific gap size (e.g., a, b, c)
Each variation is generated from a mixin with predefined spacing values

How it works

Gap foundation classes are generated from individual mixins. Each mixin defines:

A row-gap value
Optional responsive adjustments via media queries

Example of a gap mixin:

@mixin make-gap-a {
  row-gap: 24px;

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

These mixins are then compiled into classes like .f--gap-a, .f--gap-b, etc.

How to use it

In HTML

<div class="f--gap-a" style="display: flex; flex-direction: column;">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

In SCSS

// using @extend (recommended)
.c--component-a {
  @extend .f--gap-a;
}

// using the mixin directly (only if necessary)
.c--component-a {
  @include make-gap-b();
}

Codepen example:

Knowledge Check

Test your understanding of this section

Loading questions...