Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
data-layout-density
Page-wide density variant. Set on or
to compress or expand the entire VB spacing scale (--size-3xs through --size-3xl) without touching individual layouts. Compact for dashboards/admin UIs, spacious for marketing/landing pages.Overview
The data-layout-density attribute is a single-knob switch over VB's spacing scale. Set it once on <html> (or any ancestor) and every --size-* token in scope shifts in lockstep. Layouts already using data-layout-gap, --size-m, --size-l, etc. recompute automatically — no per-component changes.
Two values:
compact— tighter spacing for dashboards, data tables, admin UIs.spacious— generous spacing for marketing pages, hero-heavy landings.- Omitting the attribute is the default scale.
Usage
Whole-page compact dashboard
<html lang="en" data-layout-density="compact"> <body data-page-layout="dashboard"> ... </body></html>Density on a single section
<body> <main>...</main> <section data-layout-density="spacious" class="marketing"> <h2>Pricing</h2> ... </section></body>What changes
The attribute redefines the size scale within its subtree. The full --size-3xs through --size-3xl scale is replaced; everything that consumes those tokens (gap, padding, margin, layout primitives, components) shifts by the same factor.
| Token | Default | compact | spacious |
|---|---|---|---|
--size-3xs | 2px | 1px | 4px |
--size-2xs | 4px | 2px | 8px |
--size-xs | 8px | 4px | 12px |
--size-s | 12px | 8px | 16px |
--size-m | 16px | 12px | 24px |
--size-l | 24px | 16px | 32px |
--size-xl | 32px | 24px | 48px |
... | ... | ... | ... |
The exact values are defined in src/custom-elements/layout-attributes.css — consult the source for the canonical scale.
What does NOT change
- Typography —
--font-size-*and--line-height-*are independent. - Color tokens — unaffected.
- Border-radius / shadow — unaffected.
- Component-specific tokens like
--button-padding-inline— unaffected unless they reference--size-*.
If you want a "denser feel" everywhere including type, layer this attribute with a smaller --font-size-md in your theme.
Composition
data-page-layout— commonly paired (compact density on a dashboard page-layout).data-layout+data-layout-gap— the gap scale recomputes automatically.- VB themes — orthogonal; density is structural, themes are decorative.
When to use vs theming
Pick data-layout-density when the whole information density of a region needs to shift — admin dashboards, data-heavy tables, signed-in app shells. Pick a custom theme when only the look (colors, typography, shadows) should change. The two compose: an admin section can use data-layout-density="compact" with the standard brand theme above it.