Styleframe Logo
Utilities

Layout

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

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;

Default Display Values

KeyValueDescription
blockblockBlock-level element
inline-blockinline-blockInline with block properties
inlineinlineInline element
flexflexFlex container
inline-flexinline-flexInline flex container
gridgridGrid container
inline-gridinline-gridInline grid container
hiddennoneHidden element
contentscontentsRemove 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;

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;

useZIndexUtility

Control the stacking order of elements.

styleframe.config.ts
import { styleframe } from "styleframe";
import { useZIndexUtility } from "@styleframe/theme";

const s = styleframe();

useZIndexUtility(s, {
    '0': '0',
    '10': '10',
    '20': '20',
    '30': '30',
    '40': '40',
    '50': '50',
    auto: 'auto',
});

export default s;

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;

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;

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

Modal Overlay

styleframe.config.ts
import { styleframe } from "styleframe";
import { useDisplayUtility, usePositionUtility, useInsetUtility, useZIndexUtility } from "@styleframe/theme";

const s = styleframe();

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

export default s;

Usage in HTML:

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

Sticky Header

styleframe.config.ts
import { styleframe } from "styleframe";
import { usePositionUtility, useTopUtility, useZIndexUtility } from "@styleframe/theme";

const s = styleframe();

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

export default s;

Usage in HTML:

<header class="_position:sticky _top:0 _z-index:40">
    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

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.