Utilities

Layout Utilities

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

Part of the Utilities Preset: The utilities on this page are registered by the Utilities Preset (useUtilitiesPreset). For most projects, applying them via the preset is the recommended approach.

Overview

Layout utilities help you control how elements are displayed and positioned on the page including display types, positioning modes, overflow behavior, visibility, and z-index stacking.

Why Use Layout Utilities?

Layout utilities help you:

Control element display: Switch between block, flex, grid, and other display modes
Manage positioning: Control how elements are positioned in the document flow
Handle overflow: Manage content that exceeds element boundaries
Control visibility: Show or hide elements while managing their space

`useDisplayUtility`

The useDisplayUtility() function creates utility classes for the display property with comprehensive defaults.

styleframe.config.ts

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

const s = styleframe();

// Uses built-in defaults
useDisplayUtility(s);

export default s;

styleframe/index.css

._display\:block { display: block; }
._display\:inline-block { display: inline-block; }
._display\:inline { display: inline; }
._display\:flex { display: flex; }
._display\:inline-flex { display: inline-flex; }
._display\:grid { display: grid; }
._display\:inline-grid { display: inline-grid; }
._display\:table { display: table; }
._display\:contents { display: contents; }
._display\:flow-root { display: flow-root; }
._display\:list-item { display: list-item; }
._display\:hidden { display: none; }
/* ... more values */

<div class="_display:flex">Flex container</div>
<div class="_display:grid">Grid container</div>
<div class="_display:hidden">Hidden element</div>

Default Display Values

Key	Value	Description
`block`	`block`	Block-level element
`inline-block`	`inline-block`	Inline with block properties
`inline`	`inline`	Inline element
`flex`	`flex`	Flex container
`inline-flex`	`inline-flex`	Inline flex container
`grid`	`grid`	Grid container
`inline-grid`	`inline-grid`	Inline grid container
`hidden`	`none`	Hidden element
`contents`	`contents`	Remove element from box tree

`usePositionUtility`

Control how an element is positioned in the document.

styleframe.config.ts

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

const s = styleframe();

usePositionUtility(s, {
    static: 'static',
    fixed: 'fixed',
    absolute: 'absolute',
    relative: 'relative',
    sticky: 'sticky',
});

export default s;

styleframe/index.css

._position\:static { position: static; }
._position\:fixed { position: fixed; }
._position\:absolute { position: absolute; }
._position\:relative { position: relative; }
._position\:sticky { position: sticky; }

<div class="_position:relative">Relative container</div>
<div class="_position:absolute">Absolutely positioned</div>
<header class="_position:sticky">Sticky header</header>

`useInsetUtility`

Control the position of positioned elements.

styleframe.config.ts

import { styleframe } from "styleframe";
import { useInsetUtility, useInsetXUtility, useInsetYUtility, useTopUtility, useRightUtility, useBottomUtility, useLeftUtility } from "@styleframe/theme";

const s = styleframe();

const insetValues = {
    '0': '0',
    '1': '0.25rem',
    '2': '0.5rem',
    '4': '1rem',
    auto: 'auto',
    full: '100%',
};

useInsetUtility(s, insetValues);   // All sides
useInsetXUtility(s, insetValues);  // Left and right
useInsetYUtility(s, insetValues);  // Top and bottom
useTopUtility(s, insetValues);
useRightUtility(s, insetValues);
useBottomUtility(s, insetValues);
useLeftUtility(s, insetValues);

export default s;

styleframe/index.css

._inset\:0 { inset: 0; }
._inset\:1 { inset: 0.25rem; }
._inset\:auto { inset: auto; }
._inset\:full { inset: 100%; }

._inset-x\:0 { left: 0; right: 0; }
._inset-y\:0 { top: 0; bottom: 0; }

._top\:0 { top: 0; }
._right\:0 { right: 0; }
._bottom\:0 { bottom: 0; }
._left\:0 { left: 0; }
/* ... more values */

<div class="_position:absolute _inset:0">Full coverage overlay</div>
<div class="_position:absolute _top:0 _right:0">Top-right positioned</div>

`useZIndexUtility`

Control the stacking order of elements. For a consistent stacking scale, use the z-index design tokens which provide semantic names like dropdown, modal, and toast.

styleframe.config.ts

import { styleframe } from "styleframe";
import { useZIndexUtility, zIndexValues } from "@styleframe/theme";

const s = styleframe();

// Use semantic z-index tokens
useZIndexUtility(s, zIndexValues);

export default s;

styleframe/index.css

._z-index\:hide { z-index: -1; }
._z-index\:base { z-index: 0; }
._z-index\:dropdown { z-index: 100; }
._z-index\:sticky { z-index: 200; }
._z-index\:overlay { z-index: 300; }
._z-index\:modal { z-index: 400; }
._z-index\:popover { z-index: 500; }
._z-index\:toast { z-index: 600; }
._z-index\:max { z-index: 9999; }
._z-index\:auto { z-index: auto; }

<nav class="_z-index:sticky">Sticky navbar</nav>
<div class="_z-index:modal">Modal above navbar</div>
<div class="_z-index:toast">Toast above everything</div>

`useOverflowUtility`

Control how content overflows element boundaries.

styleframe.config.ts

import { styleframe } from "styleframe";
import { useOverflowUtility, useOverflowXUtility, useOverflowYUtility } from "@styleframe/theme";

const s = styleframe();

const overflowValues = {
    auto: 'auto',
    hidden: 'hidden',
    clip: 'clip',
    visible: 'visible',
    scroll: 'scroll',
};

useOverflowUtility(s, overflowValues);
useOverflowXUtility(s, overflowValues);
useOverflowYUtility(s, overflowValues);

export default s;

styleframe/index.css

._overflow\:auto { overflow: auto; }
._overflow\:hidden { overflow: hidden; }
._overflow\:clip { overflow: clip; }
._overflow\:visible { overflow: visible; }
._overflow\:scroll { overflow: scroll; }

._overflow-x\:auto { overflow-x: auto; }
._overflow-y\:auto { overflow-y: auto; }
/* ... more values */

<div class="_overflow:hidden">Clip overflow content</div>
<div class="_overflow:auto">Scrollable when needed</div>
<div class="_overflow-x:auto _overflow-y:hidden">Horizontal scroll only</div>

`useVisibilityUtility`

Control element visibility without affecting layout.

styleframe.config.ts

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

const s = styleframe();

useVisibilityUtility(s, {
    visible: 'visible',
    hidden: 'hidden',
    collapse: 'collapse',
});

export default s;

styleframe/index.css

._visibility\:visible { visibility: visible; }
._visibility\:hidden { visibility: hidden; }
._visibility\:collapse { visibility: collapse; }

<div class="_visibility:hidden">Hidden but takes up space</div>
<div class="_visibility:visible">Visible element</div>

More Layout Utilities

`useAspectRatioUtility`

Set aspect ratios for elements.

useAspectRatioUtility(s, {
    auto: 'auto',
    square: '1 / 1',
    video: '16 / 9',
    '4/3': '4 / 3',
});

`useObjectFitUtility`

Control how replaced elements (images, videos) fit their container.

useObjectFitUtility(s, {
    contain: 'contain',
    cover: 'cover',
    fill: 'fill',
    none: 'none',
    'scale-down': 'scale-down',
});

`useObjectPositionUtility`

Control the position of replaced elements within their container.

useObjectPositionUtility(s, {
    bottom: 'bottom',
    center: 'center',
    left: 'left',
    right: 'right',
    top: 'top',
});

`useBoxUtility`

Control box-sizing behavior.

useBoxUtility(s, {
    border: 'border-box',
    content: 'content-box',
});

Examples

styleframe.config.ts

import { styleframe } from "styleframe";
import { useDisplayUtility, usePositionUtility, useInsetUtility, useZIndexUtility, zIndexValues } from "@styleframe/theme";

const s = styleframe();

useDisplayUtility(s);
usePositionUtility(s, { fixed: 'fixed' });
useInsetUtility(s, { '0': '0' });
useZIndexUtility(s, zIndexValues);

export default s;

styleframe/index.css

._display\:flex { display: flex; }
._position\:fixed { position: fixed; }
._inset\:0 { inset: 0; }
._z-index\:modal { z-index: 400; }

Usage in HTML:

<div class="_position:fixed _inset:0 _z-index:modal _display:flex">
    <div class="modal-content">Modal content here</div>
</div>

Sticky Header

styleframe.config.ts

import { styleframe } from "styleframe";
import { usePositionUtility, useTopUtility, useZIndexUtility, zIndexValues } from "@styleframe/theme";

const s = styleframe();

usePositionUtility(s, { sticky: 'sticky' });
useTopUtility(s, { '0': '0' });
useZIndexUtility(s, zIndexValues);

export default s;

styleframe/index.css

._position\:sticky { position: sticky; }
._top\:0 { top: 0; }
._z-index\:sticky { z-index: 200; }

Usage in HTML:

<header class="_position:sticky _top:0 _z-index:sticky">
    Navigation content
</header>

Best Practices

Use z-index sparingly: Create a z-index scale and stick to it to avoid stacking conflicts
Prefer overflow-hidden for containers: Prevents unexpected scrollbars and layout shifts
Use visibility for animations: Unlike display: none, visibility: hidden can be animated
Set box-sizing globally: Most designs work better with box-sizing: border-box
Test overflow on all browsers: Scrollbar behavior varies between browsers

FAQ

Edit this pageorReport an issue

Interactivity

Create interactivity utilities for cursor styles, pointer events, user selection, and scroll behavior with full type safety.

Sizing

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