'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Maquetación
Diseño responsive
Valores por breakpoint para columnas, spans, espacios y dirección, Show y Hide, y hooks para el breakpoint actual. Todo en CSS, así el servidor y el navegador muestran lo mismo.
import { Grid, GridItem, Flex, Show, Hide, useBreakpoint, useMediaQuery } from '@alea/ui';
Ejemplos
Columnas por breakpoint
Una columna en teléfonos, dos en tablets, cuatro en escritorio. Cambia el tamaño de la ventana.
Tokens
Components
Figma kit
Templates
Spans de 12 columnas
La barra lateral ocupa todo el ancho en teléfonos y 4 de 12 desde md.
Main
span base 12, md 8
Aside
span base 12, md 4
6 / lg 3
6 / lg 3
12 / lg 6
Dirección, Show y el hook
Se apila en teléfonos, se alinea desde md; Show cambia el contenido con CSS; useBreakpoint dice dónde estás.
Current breakpoint: base
Shown from md up
Shown below md
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Component
--alea-dir-base…--alea-dir-lg…--alea-dir-md…--alea-dir-sm…--alea-dir-xl…--alea-gap-base…--alea-gap-lg…--alea-gap-md…--alea-gap-sm…--alea-gap-xl…
Props
Flex props
Una fila o columna flex cuya dirección y espacio pueden cambiar por breakpoint.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
align | "start" | "end" | "center" | "stretch" | "baseline" | - | Alineación en el eje cruzado: start, center, end, stretch o baseline. |
as | ElementType | 'div' | El elemento a usar. Por defecto div. |
direction | Responsive<"row" | "column" | "row-reverse" | "column-reverse"> | 'row' | row o column, por breakpoint: { base: 'column', md: 'row' } se apila en teléfonos y se alinea en tablets. |
gap | Responsive<Space> | 4 | Espacio entre hijos, de la escala de espaciado. Por defecto 4 (16 px). Puede cambiar por breakpoint. |
justify | "start" | "end" | "center" | "between" | - | Distribución en el eje principal: start, center, end o between. |
wrap | boolean | - | Pasa a nuevas líneas. Por defecto false. |
GridItem props
Una celda de un Grid que ocupa varias columnas, con un valor por breakpoint.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
as | ElementType | 'div' | El elemento a usar. Por defecto div. |
span | Responsive<number | "full"> | - | Columnas que ocupa (de las columnas de la grilla, normalmente 12), por breakpoint: { base: 12, md: 6, lg: 4 }. 'full' las ocupa todas. |
start | Responsive<number> | - | Columna en la que empieza, por breakpoint. |
Show props
Muestra sus hijos solo por encima o por debajo de un breakpoint, con CSS (sin parpadeo, el mismo marcado en el servidor).
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
above | "sm" | "md" | "lg" | "xl" | - | Muestra desde este breakpoint hacia arriba. |
below | "sm" | "md" | "lg" | "xl" | - | Muestra por debajo de este breakpoint. |
Hide props
Lo opuesto a Show: oculta sus hijos por encima o por debajo de un breakpoint.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
above | "sm" | "md" | "lg" | "xl" | - | Muestra desde este breakpoint hacia arriba. |
below | "sm" | "md" | "lg" | "xl" | - | Muestra por debajo de este breakpoint. |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
Flex
- Variantes
alignstartendcenterstretchbaselinejustifystartendcenterbetween- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-flex.alea-r-gap.alea-r-dir.alea-gap.alea-dir- Atributos data
data-wrapdata-align=startdata-align=centerdata-align=enddata-align=stretchdata-align=baselinedata-justify=startdata-justify=centerdata-justify=enddata-justify=between
GridItem
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-grid-item.alea-r-span.alea-r-start.alea-span.alea-start
Show
- Variantes
abovesmmdlgxlbelowsmmdlgxl- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-show- Atributos data
data-abovedata-belowdata-above=smdata-below=smdata-above=mddata-below=mddata-above=lgdata-below=lgdata-above=xldata-below=xl
Hide
- Variantes
abovesmmdlgxlbelowsmmdlgxl- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-show- Atributos data
data-abovedata-belowdata-above=smdata-below=smdata-above=mddata-below=mddata-above=lgdata-below=lgdata-above=xldata-below=xl
Accesibilidad
- Show y Hide usan display: none, así que el contenido oculto también queda oculto para lectores de pantalla. No escondas contenido que se necesita en teléfonos: reacomódalo.
- La dirección de flex solo cambia el orden visual; mantén el orden del DOM como orden de lectura.
Qué hacer y qué evitar
Hacer
- Escribe primero para móvil: base es el teléfono, luego agrega md y lg.
- Usa Grid columns={12} con spans de GridItem para el diseño de páginas.
Evitar
- No uses useBreakpoint para el diseño: las props de CSS evitan un parpadeo al cargar.
- No inviertas la dirección cuando el orden tiene significado.