Foundation

Foundations are the pillars of our design system. They define the core styling rules applied globally across a project. They establish the visual consistency and structure that everything else builds upon.

They’re applied to a wide range of elements, from the most generic (like spacing or font size) to the very specific (like grid behavior or aspect ratios). All foundations follow the naming convention:

.f--{foundation-name}-{variation}

Types of Foundations

🧱 How do we create them?

To create them, we can use the mixins we have declared and/or use loops that pull from variables or parameters we have determined. This way, we ensure that only the CSS we use will be generated.

🧭 Best Practices: Using Foundations in Order

A key rule is to maintain a logical and progressive order when applying foundations within a component.

This isn’t just about readability — it’s essential for @extend to work properly.

Why does the order matter?

When a component has multiple variations or modifiers (such as different colors, spacings, or sizes), it’s recommended to:

Use the default foundation first
Follow with progressive modifiers

If you reverse the order (for example, extending .f—color-b before .f—color-a), the default foundation class (.f—color-a) may never apply — even if you try to extend it later.

This is because SCSS @extend only works if the class you’re extending has already been included earlier in the cascade. It cannot “go back” and include a foundation that was skipped or applied after the fact.

Example

Let’s say a component can use colors A, B, and C through modifiers. You should apply the foundation classes in this order:

.c--content-a {
  @extend .f--color-a;
  &--second {
    @extend .f--color-b;
  }
  &--third {
    @extend .f--color-c;
  }
}

This works because:

.f—color-a is applied as the base
.f—color-b and .f—color-c are layered progressively
The compiler knows how to resolve each @extend in the right sequence