Zero-configuration, dependency-free structural CSS that responds to the width and height a layout actually receives.
layout-style-css@3.0.1 is the current v3 patch release and preserves the clean-break structural contract introduced in 3.0.0. It provides intrinsic wrappers, composition primitives, seven semantic recipes, and sixteen spatial personalities. Layout owns structure; UI Style Kit owns paint; Interactive Surface owns interaction styling.
- Node.js 20 or newer for development and package scripts
- Current evergreen Chromium, Firefox, or WebKit for consumers
- No runtime or peer dependencies
npm install layout-style-css@3.0.1Most applications need one import:
import"layout-style-css";The full bundle includes the core modules and all personality profiles. No breakpoint configuration, wrapper, JavaScript, or companion library is required.
Package and bundler defaults (main, style, and the root export) resolve to the readable dist/layout-style-css.css bundle for straightforward inspection and debugging. The unpkg and jsdelivr convenience fields remain minified, and layout-style-css/min.css is the explicit minified package import.
Use .ly-root as the responsive boundary and keep the mobile DOM order authoritative:
<bodyclass="ly-root" data-ly-layout="minimal-saas"><maindata-ly-recipe="docs"><headerdata-ly-area="header">Documentation</header><navdata-ly-area="nav" aria-label="Documentation">Navigation</nav><articledata-ly-area="main">Guide</article><asidedata-ly-area="aside">On this page</aside><footerdata-ly-area="footer">Next steps</footer></main></body>.ly-root, wrappers, and recipe roots establish the named ly-scope inline-size container. A recipe works directly in the root; when it is nested in a wrapper, it responds to that nearest wrapper.
Wrappers are optional measure and nesting controls. Every wrapper uses logical properties, fluid container-relative gutters, safe-area compensation, and shrink-safe sizing.
| Wrapper | Purpose |
|---|---|
.ly-wrapper | Personality-aware content measure |
.ly-wrapper--compact | 40rem compact measure |
.ly-wrapper--prose | 68ch reading measure |
.ly-wrapper--content | 72rem content measure |
.ly-wrapper--wide | 112rem wide measure |
.ly-wrapper--full | Full available inline size |
.ly-wrapper--breakout | Clamped content, feature, and full lanes |
<mainclass="ly-wrapper ly-wrapper--breakout"><articledata-ly-lane="content">Readable content</article><figuredata-ly-lane="feature">Feature media</figure><sectiondata-ly-lane="full">Full-width stage</section></main>All lanes clamp to the available inline size, including allocations from 320px through ultrawide screens.
The core includes:
.ly-stack,.ly-cluster,.ly-center, and.ly-cover.ly-switcher,.ly-sidebar,.ly-grid, and.ly-split.ly-panesand.ly-media.ly-reel,.ly-frame, and.ly-scroll
Grid and flex primitives wrap intrinsically whenever track wrapping can replace a query. Page, cover, and bounded-scroll sizing use vh fallbacks followed by 100dvh-aware behavior. Only .ly-reel deliberately scrolls horizontally; only .ly-scroll deliberately creates a bounded vertical scroll region.
Recipes use attributes only. The stacked semantic source order is always safe, and automatic enhancement is the default.
| Recipe | Automatic topology |
|---|---|
data-ly-recipe="split-hero" | Two tracks at 42rem |
data-ly-recipe="list-detail" | Two tracks at 44rem |
data-ly-recipe="docs" | Documentation rail at 48rem |
data-ly-recipe="app-shell" | Medium at 52rem, wide at 72rem |
data-ly-recipe="dashboard" | Medium at 52rem, wide at 72rem |
data-ly-recipe="gallery" | Intrinsic tracks; no topology breakpoint |
data-ly-recipe="card-grid" | Intrinsic tracks; no topology breakpoint |
Canonical regions use data-ly-area, including header, sidebar, nav, main, aside, footer, content, media, actions, primary, and secondary.
Recipe class aliases such as .ly-dashboard no longer exist. Use:
<sectiondata-ly-recipe="dashboard"><headerdata-ly-area="header">Dashboard</header><navdata-ly-area="nav" aria-label="Dashboard">Navigation</nav><maindata-ly-area="main">Primary workspace</main><asidedata-ly-area="aside">Supporting details</aside><footerdata-ly-area="footer">Status</footer></section>Add data-ly-responsive="manual" to retain the safe stack and disable built-in topology enhancement. Application CSS can then use the same named container:
@container ly-scope (min-width:56rem) {
[data-ly-recipe="docs"][data-ly-responsive="manual"] {
/* Application-owned topology. */
}
}This opt-out changes topology ownership, not the semantic DOM, shrink safety, gaps, or named regions.
The system responds to available block size without orientation queries:
- At viewport heights of
44remor less, gaps, section padding, header height, and bounded-scroll maxima tighten. - At viewport heights of
30remor less, recipe-owned sticky behavior becomes normal flow, and cover/shell minimums stop forcing full-height regions. - Safe-area block insets remain available, and required regions are never hidden solely because the viewport is short.
Use the public height, gap, measure, ratio, rail, media, card, and grid-minimum custom properties for advanced tuning. Defaults use 100vh fallbacks followed by 100dvh.
Set one of sixteen canonical data-ly-layout values on .ly-root:
minimal-saas, bauhaus, tactile, cyberpunk, f-pattern, brutalism, neumorphism, y2k, retro-glass, z-pattern, retrofuturism, mondrian, synthwave, bento, maximalist, or split-screen.
Each personality is a token/topology profile consumed by the shared recipe engine. A profile changes at least two spatial characteristics—such as measure, gap, rail, media size, card minimum, or ratio—but does not declare its own container or viewport breakpoint system.
| Import | Contents |
|---|---|
layout-style-css | Full v3 bundle |
layout-style-css/min.css | Minified full v3 bundle |
layout-style-css/core.css | Foundation, wrappers, primitives, recipes, and utilities |
layout-style-css/foundation.css | Reset, shared tokens, containment, and vertical responsiveness |
layout-style-css/wrappers.css | Semantic wrappers and breakout lanes |
layout-style-css/primitives.css | Intrinsic composition primitives |
layout-style-css/recipes.css | Seven attribute-only recipes |
layout-style-css/utilities.css | Small structural utility set |
layout-style-css/personalities.css | All sixteen profiles |
layout-style-css/personalities/minimal-saas.css | One profile; substitute any public personality name |
layout-style-css/personalities.json | Public layout-to-visual pairing recommendations |
layout-style-css/package.json | Package metadata |
The cascade order is ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, and ly.personalities.
Companion libraries are optional and explicit. Layout does not import them.
import"ui-style-kit-css/visual.css";import"ui-style-kit-css/interactive-surface-theme.css";import"interactive-surface-css/state-core.css";import"layout-style-css";This order lets UI Style Kit establish paint and theme roles, Interactive Surface add interaction states, and Layout apply structure.
data-ly-layout, data-ui, data-theme, and data-mode are independently selectable. See Layout Styles for the full recommendation matrix; pairings are never dependencies.
<linkrel="stylesheet" href="https://unpkg.com/layout-style-css@3.0.1/dist/layout-style-css.min.css"><linkrel="stylesheet" href="https://cdn.jsdelivr.net/npm/layout-style-css@3.0.1/dist/layout-style-css.min.css">v3 has no compatibility bundle. It removes legacy.css, the deprecated UI Style Kit structural bridge, v1/v2 aliases, responsive ly-md-* and ly-lg-* utilities, and all visual-order utilities. See Migrating To 3.0 for exact mappings.
The demo provides independent width and height controls plus phone, tablet, and desktop portrait/landscape presets. It displays rendered dimensions and active topology, compares automatic with manual responsiveness, and generates canonical copy-ready markup.
npm ci
npm run build
npm run lint
npm run check:demo-js
npm test
npm run test:full
npm run release:verifynpm test runs the quick Chromium gate. npm run test:full exercises the rendered matrix in Chromium, Firefox, and WebKit. npm run release:verify includes the full build and test gate, tarball verification, npm audit --audit-level=moderate, and publish dry-run; it does not publish.
- Getting Started
- Installation And CDN
- Layout Primitives
- Layout Recipes
- Layout Styles
- Migrating To 3.0
- Demo And GitHub Pages
- Release And Publishing
- Security And Support
- Changelog
Authored CSS lives in styles/; dist/ is generated. Keep application markup in correct DOM, reading, keyboard, and focus order.
MIT