CSS

Getting started

The standalone stylesheet and generated kits already include the layout utilities. In an existing framework application, import the scoped utilities alongside the components stylesheet.

import '@layout-ui/core/components.css';
import '@layout-ui/core/utilities.css';

Scoped styles apply inside data-layout-theme. Do not load both the standalone and scoped stylesheets. See framework setup.

Utility reference

Choose a topic for its class reference, examples and related guidance.

• Layout — Compose containers, stacks, wrapping rows and responsive grids.
• Spacing — Keep related content and separate groups spaced consistently.
• Sizing — Control widths and center content without fixed mobile dimensions.
• Alignment and text — Align content and apply readable emphasis with theme-aware utilities.
• Form layout — Build responsive forms with shared fields and layout utilities.
• Custom CSS — Extend your interface with ordinary CSS and shared theme tokens.