Lógica de uso del espacio en pantalla, en distintos tamaños de pantalla.
Esta es la distancia entre elementos de una sección, ubicados en filas o columnas:
Desktop: 32px
Tablet: 24px
Mobile: 16px
1
1
1
1
1
1
1
1
1
1
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed orci condimentum, condimentum turpis in, dapibus arcu.
Item A
Item B
Esta es la distancia entre elementos internos de un componente.
Desktop: 16px
Tablet: 12px
Mobile: 8px
Escala completa de espaciados disponibles, para aplicar como relleno interno de elementos, márgenes y distancias entre filas y columnas.
/* Global spacing */
:root {
--spacing-0: 0rem;
--spacing-4: 0.25rem;
--spacing-8: 0.5rem;
--spacing-12: 0.75rem;
--spacing-16: 1rem;
--spacing-20: 1.25rem;
--spacing-24: 1.5rem;
--spacing-28: 1.75rem;
--spacing-32: 2rem;
--spacing-36: 2.25rem;
--spacing-40: 2.5rem;
--spacing-44: 2.75rem;
--spacing-48: 3rem;
--spacing-60: 3.75rem;
--spacing-64: 4rem;
--spacing-80: 5rem;
--spacing-100: 6.25rem;
--spacing-160: 10rem;}4
OBJETO
OBJETO
8
OBJETO
OBJETO
16
OBJETO
OBJETO
24
OBJETO
OBJETO
32
OBJETO
OBJETO
40
OBJETO
OBJETO
60
OBJETO
OBJETO
80
OBJETO
OBJETO
160
OBJETO
OBJETO