Diseño
Pila, Línea y Rejilla: el espacio entre piezas proviene del padre y solo puede ser un paso de la escala.
En esta página
Por qué
Escribir espacios a mano en cada lugar termina fuera de la escala: un margen extra aquí, uno ceroado allí. En Feitio, el espacio entre piezas siempre pertenece al padre y solo puede ser un paso de la escala. Tres componentes se encargan de ello, y nadie escribe margen, gap o padding nuevamente.
Los tres
Apilar
Ponen piezas una debajo de otra, con el mismo espacio entre todas ellas.
Mostrar código
<div class="feitio-stack" data-gap="3">
…
</div><Stack gap={3}>
…
</Stack>En línea
Pone piezas lado a lado y envuelve la línea cuando no caben.
Mostrar código
<div class="feitio-inline" data-gap="2">
…
</div><Inline gap={2}>
…
</Inline>Rejilla
Columnas que se adaptan al ancho: cada una tiene un ancho mínimo y, por debajo de él, pasa a la siguiente fila. Nunca va más allá de la pantalla.
Mostrar código
<div class="feitio-grid" data-gap="3" style="--feitio-grid-min: 9rem">
…
</div><Grid gap={3} min="9rem">
…
</Grid>Juntos
Un formulario completo sin ningún margen: el Stack exterior separa campos con space-5, el interior une etiqueta, pista y campo con space-1, e Inline alinea los botones.
<Stack gap={5}>
<Stack gap={1}>
<Label htmlFor="nome">Nome do lembrete</Label>
<Hint id="nome-dica">Aparece na notificação</Hint>
<TextInput id="nome" aria-describedby="nome-dica" />
</Stack>
<Inline gap={2}>
<Button variant="primary" type="submit">Salvar lembrete</Button>
<Button>Cancelar</Button>
</Inline>
</Stack>Atributos
| Atributo | Valores | Para qué sirve |
|---|---|---|
gap | 1 a 7 (predeterminado: 4) | El espacio entre piezas, un paso de la escala. No se acepta ningún otro valor. |
align | "start", "center" | In Stack: cómo se alinean las piezas horizontalmente. |
justify | "between", "end" | In Inline: cómo se expanden las piezas a lo largo de la línea. |
min | un ancho, como "15rem" | In Grid: el ancho mínimo de cada columna. Por debajo, la columna se envuelve. |
In React, gap tiene el tipo 1 | 2 | 3 | 4 | 5 | 6 | 7: un valor fuera de la escala ni siquiera se compila.
Reglas
- El espacio pertenece al padre. Un componente no tiene margen exterior; el Stack, Inline o Grid que lo rodea decide la distancia a su vecino.
- No hay espaciador vacío entre dos elementos. El espacio vive en el gap del padre.
- El relleno interior pertenece al componente: el relleno de un botón o bloque está listo y no se cambia a mano.
- Una verificación automática falla si se escribe margen, gap o relleno a mano en el código de quien usa Feitio.
Los tres funcionan en esta página en CSS puro, y también vienen como componentes de Astro y de React (@feitio/astro, @feitio/react).