Fluid scaling

How the bundled fluid families scale smoothly and where fixed utilities still make more sense.

Overview

Fluid scaling means a value changes smoothly as the viewport changes instead of jumping only at a few breakpoints. In Skelementor, selected utility families use that approach so one class can stay proportional across more screen sizes.

Why it helps

• A heading can feel oversized until the next breakpoint suddenly shrinks it.
• Spacing can feel cramped or too loose between thresholds.
• Repeated breakpoint overrides are often needed just to keep a scale feeling balanced.

How fluid scaling works

Bundled fluid families are typically powered by clamp(min, preferred, max).

Fluid value example

.hero-title {
  font-size: clamp(2rem, calc(1.5rem + 2vw), 4rem);
}

Why some families are fluid

These families benefit from fluid scaling because they control proportional measurements that usually need to breathe with the viewport:

Family	Why fluid here	Read more
text-*	Reading scale should adapt gradually.	Font size
m-* family	Outer spacing should stay proportional.	Margin
p-* family	Inner spacing benefits from the same gradual rhythm.	Padding
gap-* family	Space between items often needs to scale with the layout.	Gap

Why some families stay fixed

• Colors and font weights are semantic choices, not proportional measurements.
• Display, positioning, and similar helpers are structural states.
• maximum-width-* and border width utilities stay fixed in this bundle.
• Component presets should stay predictable.
• leading-* stays fixed so line-height remains stable with the text system.

Related

Font size

Bundled text-* classes with fluid clamp() ranges

Line height

Fixed leading-* utilities and why they stay stable