Utilities

Sizing

Create sizing utilities for width, height, min/max dimensions with full type safety.

Overview

Sizing utilities help you control element dimensions including width, height, and their minimum and maximum constraints.

Why Use Sizing Utilities?

Sizing utilities help you:

Control dimensions: Set precise widths and heights for elements
Create responsive layouts: Use percentage-based and viewport-based values
Integrate with design tokens: Reference spacing values for consistent sizing
Set constraints: Define minimum and maximum dimensions

`useWidthUtility`

The useWidthUtility() function creates utility classes for setting element width.

styleframe.config.ts

import { styleframe } from "styleframe";
import { useWidthUtility } from "@styleframe/theme";

const s = styleframe();

useWidthUtility(s, {
    '0': '0px',
    '1': '0.25rem',
    '2': '0.5rem',
    '4': '1rem',
    '8': '2rem',
    '16': '4rem',
    '32': '8rem',
    '64': '16rem',
    auto: 'auto',
    '1/2': '50%',
    '1/3': '33.333333%',
    '2/3': '66.666667%',
    '1/4': '25%',
    '3/4': '75%',
    full: '100%',
    screen: '100vw',
    min: 'min-content',
    max: 'max-content',
    fit: 'fit-content',
});

export default s;

styleframe/index.css

._width\:0 { width: 0px; }
._width\:1 { width: 0.25rem; }
._width\:2 { width: 0.5rem; }
._width\:4 { width: 1rem; }
._width\:8 { width: 2rem; }
._width\:16 { width: 4rem; }
._width\:32 { width: 8rem; }
._width\:64 { width: 16rem; }
._width\:auto { width: auto; }
._width\:1\/2 { width: 50%; }
._width\:1\/3 { width: 33.333333%; }
._width\:2\/3 { width: 66.666667%; }
._width\:1\/4 { width: 25%; }
._width\:3\/4 { width: 75%; }
._width\:full { width: 100%; }
._width\:screen { width: 100vw; }
._width\:min { width: min-content; }
._width\:max { width: max-content; }
._width\:fit { width: fit-content; }

<div class="_width:full">Full width</div>
<div class="_width:1/2">Half width</div>
<div class="_width:screen">Viewport width</div>

`useMinWidthUtility` & `useMaxWidthUtility`

Control minimum and maximum width constraints.

styleframe.config.ts

import { styleframe } from "styleframe";
import { useMinWidthUtility, useMaxWidthUtility } from "@styleframe/theme";

const s = styleframe();

useMinWidthUtility(s, {
    '0': '0px',
    full: '100%',
    min: 'min-content',
    max: 'max-content',
    fit: 'fit-content',
});

useMaxWidthUtility(s, {
    '0': '0px',
    none: 'none',
    xs: '20rem',
    sm: '24rem',
    md: '28rem',
    lg: '32rem',
    xl: '36rem',
    '2xl': '42rem',
    '3xl': '48rem',
    '4xl': '56rem',
    '5xl': '64rem',
    '6xl': '72rem',
    '7xl': '80rem',
    full: '100%',
    prose: '65ch',
    'screen-sm': '640px',
    'screen-md': '768px',
    'screen-lg': '1024px',
    'screen-xl': '1280px',
});

export default s;

styleframe/index.css

._min-width\:0 { min-width: 0px; }
._min-width\:full { min-width: 100%; }
._min-width\:min { min-width: min-content; }
._min-width\:max { min-width: max-content; }
._min-width\:fit { min-width: fit-content; }

._max-width\:0 { max-width: 0px; }
._max-width\:none { max-width: none; }
._max-width\:xs { max-width: 20rem; }
._max-width\:sm { max-width: 24rem; }
._max-width\:md { max-width: 28rem; }
._max-width\:lg { max-width: 32rem; }
._max-width\:xl { max-width: 36rem; }
._max-width\:prose { max-width: 65ch; }
/* ... more values */

<div class="_max-width:screen-lg">Responsive container</div>
<article class="_max-width:prose">Readable text content</article>

Pro tip: Use max-width: prose (65ch) for optimal reading line length in text-heavy content.

`useHeightUtility`

The useHeightUtility() function creates utility classes for setting element height.

styleframe.config.ts

import { styleframe } from "styleframe";
import { useHeightUtility } from "@styleframe/theme";

const s = styleframe();

useHeightUtility(s, {
    '0': '0px',
    '1': '0.25rem',
    '2': '0.5rem',
    '4': '1rem',
    '8': '2rem',
    '16': '4rem',
    '32': '8rem',
    '64': '16rem',
    auto: 'auto',
    '1/2': '50%',
    '1/3': '33.333333%',
    '2/3': '66.666667%',
    full: '100%',
    screen: '100vh',
    svh: '100svh',
    lvh: '100lvh',
    dvh: '100dvh',
    min: 'min-content',
    max: 'max-content',
    fit: 'fit-content',
});

export default s;

styleframe/index.css

._height\:0 { height: 0px; }
._height\:auto { height: auto; }
._height\:1\/2 { height: 50%; }
._height\:full { height: 100%; }
._height\:screen { height: 100vh; }
._height\:svh { height: 100svh; }
._height\:lvh { height: 100lvh; }
._height\:dvh { height: 100dvh; }
._height\:min { height: min-content; }
._height\:max { height: max-content; }
._height\:fit { height: fit-content; }
/* ... more values */

<div class="_height:screen">Full viewport height</div>
<div class="_height:dvh">Dynamic viewport height (mobile-friendly)</div>
<div class="_height:1/2">Half height</div>

`useMinHeightUtility` & `useMaxHeightUtility`

Control minimum and maximum height constraints.

import { useMinHeightUtility, useMaxHeightUtility } from "@styleframe/theme";

useMinHeightUtility(s, {
    '0': '0px',
    full: '100%',
    screen: '100vh',
    svh: '100svh',
    lvh: '100lvh',
    dvh: '100dvh',
    min: 'min-content',
    max: 'max-content',
    fit: 'fit-content',
});

useMaxHeightUtility(s, {
    '0': '0px',
    none: 'none',
    full: '100%',
    screen: '100vh',
    svh: '100svh',
    lvh: '100lvh',
    dvh: '100dvh',
    min: 'min-content',
    max: 'max-content',
    fit: 'fit-content',
});

`useSizeUtility`

Set both width and height simultaneously.

styleframe.config.ts

import { styleframe } from "styleframe";
import { useSizeUtility } from "@styleframe/theme";

const s = styleframe();

useSizeUtility(s, {
    '4': '1rem',
    '6': '1.5rem',
    '8': '2rem',
    '10': '2.5rem',
    '12': '3rem',
    '16': '4rem',
    full: '100%',
});

export default s;

styleframe/index.css

._size\:4 { width: 1rem; height: 1rem; }
._size\:6 { width: 1.5rem; height: 1.5rem; }
._size\:8 { width: 2rem; height: 2rem; }
._size\:10 { width: 2.5rem; height: 2.5rem; }
._size\:12 { width: 3rem; height: 3rem; }
._size\:16 { width: 4rem; height: 4rem; }
._size\:full { width: 100%; height: 100%; }

<svg class="_size:6"><!-- 24px icon --></svg>
<div class="_size:full">Full width and height</div>

Examples

Responsive Container

styleframe.config.ts

import { styleframe } from "styleframe";
import { useWidthUtility, useMaxWidthUtility } from "@styleframe/theme";

const s = styleframe();

useWidthUtility(s, { full: '100%' });
useMaxWidthUtility(s, {
    'screen-sm': '640px',
    'screen-md': '768px',
    'screen-lg': '1024px',
    'screen-xl': '1280px',
});

export default s;

styleframe/index.css

._width\:full { width: 100%; }

._max-width\:screen-sm { max-width: 640px; }
._max-width\:screen-md { max-width: 768px; }
._max-width\:screen-lg { max-width: 1024px; }
._max-width\:screen-xl { max-width: 1280px; }

Usage in HTML:

<div class="_width:full _max-width:screen-lg" style="margin: 0 auto;">
    Container content
</div>

Icon Sizes

styleframe.config.ts

import { styleframe } from "styleframe";
import { useSizeUtility } from "@styleframe/theme";

const s = styleframe();

useSizeUtility(s, {
    '4': '1rem',      // 16px - small icon
    '5': '1.25rem',   // 20px - default icon
    '6': '1.5rem',    // 24px - medium icon
    '8': '2rem',      // 32px - large icon
    '10': '2.5rem',   // 40px - extra large
});

export default s;

styleframe/index.css

._size\:4 { width: 1rem; height: 1rem; }
._size\:5 { width: 1.25rem; height: 1.25rem; }
._size\:6 { width: 1.5rem; height: 1.5rem; }
._size\:8 { width: 2rem; height: 2rem; }
._size\:10 { width: 2.5rem; height: 2.5rem; }

Usage in HTML:

<svg class="_size:6"><!-- icon --></svg>
<svg class="_size:8"><!-- larger icon --></svg>

Best Practices

Use percentage widths for responsive layouts: 1/2, 1/3, 2/3 scale with parent
Use max-width for containers: Prevents content from becoming too wide on large screens
Use dvh for mobile: 100dvh accounts for mobile browser chrome better than 100vh
Integrate with design tokens: Reference your spacing scale for consistent sizing
Use fit-content sparingly: It can cause unexpected layouts; test thoroughly

FAQ

Edit this pageorReport an issue

Layout

Create layout utilities for display, position, overflow, visibility, and more with full type safety.

Spacing

Create spacing utilities for margin and padding with directional variants and full type safety.