Layout, grilla y espaciado
Ally utiliza contenedores, flexbox y una grilla de 12 columnas. El orden visual nunca debe alterar el orden lógico del DOM.
Contenedores
.box-d limita el ancho y centra el contenido. .box-f ocupa todo el ancho con padding seguro.
Contenido dentro de .box-d
Contenido fluido con .box-f
<div class="box-d docs-demo-outline">
<p class="ally-m-0">Contenido dentro de <code>.box-d</code>
</p>
</div>
<div class="box-f docs-demo-outline">
<p class="ally-m-0">Contenido fluido con <code>.box-f</code>
</p>
</div>Stacks
.stack-r distribuye elementos horizontalmente y permite wrap. .stack-c organiza contenido vertical.
<div class="stack-r">...</div>\n<div class="stack-c">...</div>Grilla de 12 columnas
Usa columnas base y modificadores sm, md, lg y xl. Una clase responsive sola ocupa 12 columnas antes de su breakpoint; no necesita una clase base para apilarse en móvil.
La forma de los nombres es col-ally-{span} o col-ally-{breakpoint}-{span}. El span va de 1 a 12; los breakpoints comienzan en sm: 36rem, md: 48rem, lg: 64rem, xl: 80rem y xxl: 90rem. En Grid el span indica cuántas pistas ocupa. En Flex usa .ally-row y las mismas clases para repartir el ancho con gutters.
<div class="ally-grid">
<article class="ally-card col-ally-12 col-ally-md-4">
<strong>4 columnas</strong>
</article>
<article class="ally-card col-ally-12 col-ally-md-4">
<strong>4 columnas</strong>
</article>
<article class="ally-card col-ally-12 col-ally-md-4">
<strong>4 columnas</strong>
</article>
</div>Columnas responsive
<div class="stack-r ally-row">
<article class="ally-card col-ally-12 col-ally-md-8">Contenido principal</article>
<aside class="ally-panel col-ally-12 col-ally-md-4">Contenido lateral</aside>
</div>.ally-row junto a .stack-r cuando combines columnas porcentuales. Ally también detecta automáticamente hijos .col-ally* en navegadores modernos para evitar que el gap horizontal fuerce un salto de línea.Breakpoints
| Nombre | Desde | Prefijo |
|---|---|---|
| Base | 0 px | .col-ally-* |
| sm | 36rem (576 px con raíz de 16 px) | .col-ally-sm-* |
| md | 48rem (768 px con raíz de 16 px) | .col-ally-md-* |
| lg | 64rem (1024 px con raíz de 16 px) | .col-ally-lg-* |
| xl | 80rem (1280 px con raíz de 16 px) | .col-ally-xl-* |
| xxl | 90rem (1440 px con raíz de 16 px) | .col-ally-xxl-* |
Filas, offsets, orden y gutters
Usa .ally-row-cols-3 para repartir hijos en tres columnas iguales; añade un breakpoint, por ejemplo .ally-row-cols-md-4, para cambiar el número de columnas desde ese tamaño. Los modificadores .col-ally-offset-2 y .col-ally-md-offset-1 reservan espacio antes de una columna. .ally-order-first, .ally-order-2 y sus variantes por breakpoint cambian el orden visual; mantén el orden del DOM lógico para teclado y lector de pantalla.
Controla separación con .ally-g-0–.ally-g-12, .ally-gx-* para el eje horizontal y .ally-gy-* para el vertical. Las clases .box-sm–.box-xxl aplican anchos máximos progresivos.
Utilidades visuales responsive
Clases como .ally-d-none, .ally-d-md-flex, .ally-p-4, .ally-mt-3, .ally-gap-6, .ally-text-2xl, .ally-text-primary, .ally-items-center y .ally-justify-between cubren ajustes comunes. Úsalas como ayudas de layout; reserva las clases de componente para patrones completos.
Enfoque el control para ver el tooltip: Los gutters se pueden adaptar por eje y breakpoint.
La navbar reutiliza el disclosure accesible existente: sin JavaScript los enlaces permanecen visibles; con Ally se colapsan en móvil y quedan expandidos desde md.
Tokens visuales
Personaliza la identidad sin recompilar sobrescribiendo variables CSS.
--ally-color-primaryAcciones principales--ally-color-successÉxito--ally-color-warningAdvertencia--ally-color-dangerError