> ## Documentation Index
> Fetch the complete documentation index at: https://skelementorcss.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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)`.

```css Fluid value example lines theme={null}
.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](/typography/font-size) |
| **`m-*`** family   | Outer spacing should stay proportional.                   | [Margin](/spacing/margin)          |
| **`p-*`** family   | Inner spacing benefits from the same gradual rhythm.      | [Padding](/spacing/padding)        |
| **`gap-*`** family | Space between items often needs to scale with the layout. | [Gap](/flexbox/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

<CardGroup cols={2}>
  <Card title="Font size" icon="text-size" href="/typography/font-size">
    Bundled `text-*` classes with fluid `clamp()` ranges
  </Card>

  <Card title="Line height" icon="line-height" href="/typography/line-height">
    Fixed `leading-*` utilities and why they stay stable
  </Card>
</CardGroup>