Preview 04 · Espaciado

Escala de 4px y filas declaradas

Base de 4px sin pasos intermedios. 16px es el valor de trabajo: relleno de tarjeta y separación entre tarjetas. La densidad es una característica del producto, no un descuido: quien concilia cinco centros de una sentada paga cada scroll evitable.

tokens.css · spacingassets/siga.css:44–54, 627–634

Escala

--space-1 · 4px --space-2 · 8px --space-3 · 12px --space-4 · 16px --space-5 · 20px --space-6 · 24px --space-8 · 32px --space-12 · 48px

Densidad aplicada

relleno de tarjeta
16px · encabezado 12px 16px · pie 10px 16px
celda de tabla
10px 14px · th 9px 14px
separación de rejilla
16px entre tarjetas, siempre
relleno de página
22px 24px 72px · 16px 14px 64px por debajo de 760px
alto de control
32px estándar · 27px --sm · 44px --lg (táctil)
campo de formulario
34px mínimo · 6px 10px de relleno
elemento del carril
7px 9px · grupo 8px 12px
contador de raciones
46px de botón · 52px en .stepper--lg, pensado para tableta

Filas declaradas, nunca auto-fill

Cuando un grupo de tarjetas mezcla anchos, la fila se declara. Un auto-fill inventa una columna de más en un monitor ancho y deja la tarjeta que abarca dos columnas lejos de aquella con la que debe leerse.

.row4
1fr
1fr
1fr
.row3
1fr
1fr
.row-2-1 · contenido principal
panel lateral
.row-3-2 · tabla
resumen

Puntos de quiebre

≤ 1180px
.row4 pasa a 2 columnas; las filas asimétricas se apilan
≤ 1024px
el carril colapsa a 68px solo con iconos; se ocultan etiquetas, contadores y la nota de entorno; el pie del carril se apila
≤ 760px
el carril pasa a tira horizontal sobre el contenido; todas las filas a una columna; .itemrow pierde la columna de kcal

Reduce el ancho de esta ventana para verlo: la rejilla de arriba responde en vivo.