Skip to main content

​
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

​
Why some families are fluid

These families benefit from fluid scaling because they control proportional measurements that usually need to breathe with the viewport:
FamilyWhy fluid hereRead more
text-*Reading scale should adapt gradually.Font size
m-* familyOuter spacing should stay proportional.Margin
p-* familyInner spacing benefits from the same gradual rhythm.Padding
gap-* familySpace 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.

Font size

Bundled text-* classes with fluid clamp() ranges

Line height

Fixed leading-* utilities and why they stay stable