Maquetación

Cuatro primitivas cubren casi todas las páginas. Cada una expone una propiedad personalizada local, y las utilidades finitas ajustan columnas, huecos y alineación por punto de ruptura.

CSS: maquetación y utilidades (en ivolt.css y en core.css). Sin JavaScript. Utilidades: una matriz finita, sin escáner ni purga.

Container

iv-container centra el contenido con márgenes fluidos. --narrow usa la medida de lectura y --wide permite 1440px.

El contenedorfixtures/layout/container.htmlAbrir sola

<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 y cluster

iv-stack dispone los hijos en vertical con --iv-stack-gap; iv-cluster distribuye elementos en línea que se ajustan con --iv-cluster-gap.

Pila y racimofixtures/layout/stack-cluster.htmlAbrir sola

<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 es una rejilla CSS de una columna por defecto. Fija las columnas con iv-u-grid-cols-N y sus prefijos adaptables, o usa iv-grid--auto con --iv-grid-min para columnas con auto-fit.

La primitiva de rejillafixtures/layout/grid.htmlAbrir sola

<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;
}

Utilidades

La matriz es finita y generada; no hay valores arbitrarios, escáner ni paso de purga. Los prefijos adaptables existen solo para sm md lg xl y solo en los grupos marcados abajo.

Grupo	Clases	Adaptable
Display	`iv-u-block inline inline-block flex inline-flex grid hidden`	sí
Flex	`iv-u-flex-row\|col`, `flex-wrap\|nowrap`, `items-`, `justify-`, `grow`, `shrink-0`	solo la dirección
Grid	`iv-u-grid-cols-1…6,12`, `col-span-1…6,12,full`	sí
Gap	`iv-u-gap-0…12`, `gap-x-`, `gap-y-`	solo gap
Espaciado	`iv-u-m\|mt\|mb\|ms\|me\|mx\|my-0…12,auto`, `p\|pt\|pb\|ps\|pe\|px\|py-0…12` (lados lógicos)	no
Ancho	`iv-u-w-full w-auto max-w-measure max-w-content`	no
Texto	`iv-u-text-start\|center\|end`, `text-xs…2xl`, `font-normal…bold`, `text-muted`, `truncate`	solo la alineación
Visibilidad	`iv-u-sr-only`, `iv-u-sr-only-focusable`	no

Las utilidades se emiten con el selector duplicado (especificidad 0,2,0) y se cargan las últimas, así que ganan a los modificadores de componente tanto en la hoja en capas como en la plana.

Índice de clases

Partes y modificadores de esta familia que los ejemplos de arriba no muestran. La lista completa por hoja está en la referencia.

Clase	Qué hace
`iv-stack--center`	Centra los hijos de una pila en el eje en línea.

Todos los componentes de contenido