Breakpoints y retícula #
Tamaño de pantalla #
Diseñamos para un tamaño de pantalla mínimo de 1024px
correspondiente a nuestro breakpoint lg
con un contenedor centrado y de anchura máxima 1280px
, correspondiente a nuestras clases container mx-auto px-base
.
Comienza diseñando para dispositivos móviles o pantallas pequeñas, resuelve su navegación con las opciones que te da el componente header y luego reposiciona los elementos para anchuras mayores. Tenemos configurados varios saltos de breakpoint, pero recomendamos usar sólo el breakpoint por defecto y el lg
.
Breakpoints:
- (Sin prefijo): de
0px
para arriba (Recomendado) sm
:640px
md
:768px
lg
:1024px
(Recomendado)xl
:1280px
Columnas #
Usamos un sistema basado en 4 columnas, con un espacio de gap-xl
- 2.5rem
- 40px / 16px
. Utiliza las combinaciones reflejadas a continuación. Evita utilizar el layout a una columna (100%) para textos en pantallas de gran tamaño, afectaría negativamente a la legibilidad.
Pantallas grandes - escritorio #
Pantallas pequeñas - mobile #
En móviles utilizamos solo 2 combinaciones:
- una columna (100%)
- dos columnas (50% + 50%)
Mostrar códigodel ejemplo: layout
Contenido
HTML
<div class="grid grid-cols-2 lg:grid-cols-4 gap-xl mt-base">
<div class="col-span-2 lg:col-span-4 bg-neutral-light h-12 flex items-center justify-center">100%</div>
<div class="col-span-2 lg:col-span-2 bg-neutral-light h-12 flex items-center justify-center">50%</div>
<div class="col-span-2 lg:col-span-2 bg-neutral-light h-12 flex items-center justify-center">50%</div>
<div class="col-span-2 lg:col-span-3 bg-primary-light h-12 flex items-center justify-center">75%</div>
<div class="col-span-2 lg:col-span-1 bg-primary-light h-12 flex items-center justify-center">25%</div>
<div class="col-span-2 lg:col-span-1 bg-neutral-light h-12 flex items-center justify-center">25%</div>
<div class="col-span-2 lg:col-span-3 bg-neutral-light h-12 flex items-center justify-center">75%</div>
<div class="col-span-2 lg:col-span-1 bg-neutral-light h-12 flex items-center justify-center">25%</div>
<div class="col-span-2 lg:col-span-1 bg-neutral-light h-12 flex items-center justify-center">25%</div>
<div class="col-span-2 lg:col-span-1 bg-neutral-light h-12 flex items-center justify-center">25%</div>
<div class="col-span-2 lg:col-span-1 bg-neutral-light h-12 flex items-center justify-center">25%</div>
</div>
<div class="grid grid-cols-2 gap-xl col-span-1 mt-base">
<div class="col-span-2 bg-neutral-light h-12 flex items-center justify-center">100%</div>
<div class="col-span-1 bg-neutral-light h-12 flex items-center justify-center">50%</div>
<div class="col-span-1 bg-neutral-light h-12 flex items-center justify-center">50%</div>
</div>