📐 Aspect ratio

The aspect ratio foundation allows you to define and maintain consistent proportions for elements (like images, videos, or containers) across multiple breakpoints. It automatically generates responsive classes using predefined ratio values and breakpoint rules. These classes follow the naming convention:

.f--ar-{ratio}               // For all breakpoints
.f--ar-{breakpoint}-{ratio} // For specific breakpoints

🔁 How it works

The media-sizes mixin loops through:

A map of aspect ratios ($media-sizes)
A map of breakpoints ($ar-breakpoints)

⚙️ Example ratio values ($media-sizes)

$media-sizes: (
  a: 1.77777777,  // 16:9
  b: 1.33333333,  // 4:3
  c: 1.5,         // 3:2
  d: 1,           // 1:1
  e: 0.75,        // 3:4
  f: 0.33333333   // 1:3
);

🔧 How to use it

In HTML

<!-- Global 16:9 ratio -->
<div class="f--ar-a"></div>

<!-- 1:1 ratio applied only on tablets -->
<div class="f--ar-tabletm-d"></div>

In SCSS

Extending the generated foundation class — preferred method:

.c--media-a {
    @extend .f--fr-a;
}

Using the mixin directly — only if strictly necessary:

.c--media-a {
      @include make-ar(map-get($media-sizes, a));
}

Codepen example:

Link to Codepen