Aspect ratio

The aspect ratio utility 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.

---

Naming conventions

.u--ar-{ratio}               // For all breakpoints
.u--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:

$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="u--ar-a"></div>

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

In SCSS

// using @extend (recommended)
.c--media-a {
    @extend .u--ar-a;
}

// using the mixin directly (only if necessary)
.c--media-a {
    @include make-ar(map-get($media-sizes, a));
}