Layout

Four primitives cover most pages. Each exposes a local custom property, and the finite utilities adjust columns, gaps and alignment per breakpoint.

CSS: layout and utilities (in ivolt.css and in core.css). No JavaScript. Utilities: a finite matrix, no scanner and no purge.

Container

iv-container centres content with fluid gutters. --narrow uses the reading measure, --wide allows 1440px.

The containerfixtures/layout/container.htmlOpen alone

<div class="iv-container iv-container--narrow iv-card iv-card--flat"><div class="iv-card__body">Narrow: reading measure (68ch).</div></div>
<div class="iv-container iv-card iv-card--flat iv-u-mt-4"><div class="iv-card__body">Default: 75rem max.</div></div>
<div class="iv-container iv-container--wide iv-card iv-card--flat iv-u-mt-4"><div class="iv-card__body">Wide: 90rem (1440px) max.</div></div>

Stack and cluster

iv-stack lays children vertically with --iv-stack-gap; iv-cluster wraps inline items with --iv-cluster-gap.

Stack and clusterfixtures/layout/stack-cluster.htmlOpen alone

<div class="iv-stack" style="--iv-stack-gap: var(--iv-space-6)">
  <h3 class="iv-u-m-0">Stack (vertical rhythm)</h3>
  <p class="iv-u-m-0">Children are spaced with <code>--iv-stack-gap</code>. Nested layouts keep their own gap.</p>
  <div class="iv-cluster">
    <span class="iv-button iv-button--secondary iv-button--sm">Cluster item</span>
    <span class="iv-button iv-button--secondary iv-button--sm">Wraps</span>
    <span class="iv-button iv-button--secondary iv-button--sm">On narrow</span>
    <span class="iv-button iv-button--secondary iv-button--sm">Viewports</span>
  </div>
</div>

.iv-root {
  --iv-stack-gap: var(--iv-space-6);
}

Grid

iv-grid is a CSS grid with one column by default. Set columns with iv-u-grid-cols-N and responsive prefixes, or use iv-grid--auto with --iv-grid-min for auto-fit columns.

The grid primitivefixtures/layout/grid.htmlOpen alone

<div class="iv-grid iv-u-gap-4 iv-u-grid-cols-1 iv-u-md-grid-cols-2 iv-u-lg-grid-cols-4">
  <div class="iv-card iv-card--flat"><div class="iv-card__body">1</div></div>
  <div class="iv-card iv-card--flat"><div class="iv-card__body">2</div></div>
  <div class="iv-card iv-card--flat"><div class="iv-card__body">3</div></div>
  <div class="iv-card iv-card--flat"><div class="iv-card__body">4</div></div>
</div>
<div class="iv-grid iv-grid--auto iv-u-gap-4 iv-u-mt-6" style="--iv-grid-min: 14rem">
  <div class="iv-card iv-card--flat"><div class="iv-card__body">auto</div></div>
  <div class="iv-card iv-card--flat"><div class="iv-card__body">auto</div></div>
  <div class="iv-card iv-card--flat"><div class="iv-card__body">auto</div></div>
</div>

.iv-root {
  --iv-grid-min: 14rem;
}

Utilities

The matrix is finite and generated; no arbitrary values, scanner or purge step. Responsive prefixes exist only for sm md lg xl and only on the groups marked below.

Group	Classes	Responsive
Display	`iv-u-block inline inline-block flex inline-flex grid hidden`	yes
Flex	`iv-u-flex-row\|col`, `flex-wrap\|nowrap`, `items-`, `justify-`, `grow`, `shrink-0`	direction only
Grid	`iv-u-grid-cols-1…6,12`, `col-span-1…6,12,full`	yes
Gap	`iv-u-gap-0…12`, `gap-x-`, `gap-y-`	gap only
Spacing	`iv-u-m\|mt\|mb\|ms\|me\|mx\|my-0…12,auto`, `p\|pt\|pb\|ps\|pe\|px\|py-0…12` (logical sides)	no
Width	`iv-u-w-full w-auto max-w-measure max-w-content`	no
Text	`iv-u-text-start\|center\|end`, `text-xs…2xl`, `font-normal…bold`, `text-muted`, `truncate`	alignment only
Visibility	`iv-u-sr-only`, `iv-u-sr-only-focusable`	no

Utilities are emitted with a doubled selector (specificity 0,2,0) and loaded last, so they win over component modifiers in both the layered and the flat stylesheet.

Class index

Parts and modifiers of this family that the examples above do not show. The full list per stylesheet lives in the reference.

Class	What it does
`iv-stack--center`	Centres the children of a stack on the inline axis.

Every content component