Advanced Utilities

Special-purpose helpers for full-bleed layouts, aspect ratios, sticky positioning, motion, and shape clipping.

Full-bleed

ms-full-bleed makes an element span the full viewport width while remaining centered within the layout.

<div class="ms-full-bleed">...</div>

Aspect ratio

Constrain an element's proportions with ms-ratio-16-9, ms-ratio-4-3, or ms-ratio-1-1.

<div class="ms-ratio-16-9">...</div>
<div class="ms-ratio-4-3">...</div>
<div class="ms-ratio-1-1">...</div>

Sticky positioning

ms-sticky-top and ms-sticky-bottom apply sticky positioning. Override the offset with --ms-sticky-offset.

<div class="ms-sticky-top" style="--ms-sticky-offset: 1rem;">...</div>
<div class="ms-sticky-bottom">...</div>

Fade transitions

ms-fade-in and ms-fade-out transition opacity over 300ms. Toggle the class to show or hide an element smoothly.

<div id="fade-box" class="ms-fade-in">...</div>

document.getElementById('fade-toggle').addEventListener('click', () => {
  document.getElementById('fade-box').classList.toggle('ms-fade-out');
});

Glow border

ms-glow-border draws an inset and outer border for a subtle glow effect.

<div class="ms-glow-border">...</div>

Clip shapes

Clip an element into a shape with ms-clip-circle or ms-clip-polygon.

<div class="ms-clip-circle">...</div>
<div class="ms-clip-polygon">...</div>

Container fixed & slide-in

ms-container-fixed centers content at a max width (override with --ms-container-width). ms-animate-slide-in animates content in from below.

<div class="ms-container-fixed" style="--ms-container-width: 1080px;">...</div>
<div class="ms-animate-slide-in">...</div>