Retícula
Breakpoints y retícula Enlace al apartado: Breakpoints y retícula
Tamaño de pantalla Enlace al apartado: 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 Enlace al apartado: Columnas
Usamos un sistema basado en 4 columnas, con un espacio de gap-lg
- 1.75rem
- 28px / 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 Enlace al apartado: Pantallas grandes. Escritorio
Mostrar código del ejemplo: ds/_ds.example.layout-sidebar.njk
Contenido
HTML del ejemplo: ds/_ds.example.layout-sidebar.njk
<div role="img" aria-label="Imagen de retícula de página con una barras que ocupan diferentes porcentajes de la anchura total disponible">
<!-- copiar a a partir de aqui -->
<div class="grid grid-cols-2 lg:grid-cols-4 gap-lg">
<div class="col-span-2 lg:col-span-3">
Zona de contenido (75% en escritorio, 100% en móvil)
</div>
<div class="col-span-2 lg:col-span-1">
Barra lateral (25% en escritorio, 100% en móvil)
</div>
</div>
<!-- copiar hasta aqui -->
</div>
Mostrar código del ejemplo: ds/_ds.example.layout-escritorio.njk
Contenido
HTML del ejemplo: ds/_ds.example.layout-escritorio.njk
<div role="img" aria-label="Imagen de retícula de página con una barras que ocupan diferentes porcentajes de la anchura total disponible en escritorio: hay una de 100%, dos de 50% una al lado de la otra y dos ejemplos de zona de contenido con zona de sidebar en el lateral y, por último, un ejemplo de 4 columnas contigual con misma anchura de un cuarto del espacio disponible.">
<!-- copiar a a partir de aqui -->
<div class="grid grid-cols-2 lg:grid-cols-4 gap-lg">
<div class="col-span-2 lg:col-span-4">
<span class="bg-primary-base text-white h-12 flex items-center justify-center">100%</span>
</div>
<div class="col-span-2 lg:col-span-2">
<span class="bg-primary-base text-white h-12 flex items-center justify-center">50%</span>
</div>
<div class="col-span-2 lg:col-span-2">
<span class="bg-primary-base text-white h-12 flex items-center justify-center">50%</span>
</div>
<div class="col-span-2 lg:col-span-3">
<span class="bg-primary-base text-white h-12 flex items-center justify-center">75%</span>
</div>
<div class="col-span-2 lg:col-span-1">
<span class="bg-primary-base text-white h-12 flex items-center justify-center">25%</span>
</div>
<div class="col-span-2 lg:col-span-1">
<span class="bg-primary-base text-white h-12 flex items-center justify-center">25%</span>
</div>
<div class="col-span-2 lg:col-span-3">
<span class="bg-primary-base text-white h-12 flex items-center justify-center">75%</span>
</div>
<div class="col-span-2 lg:col-span-1">
<span class="bg-primary-base text-white h-12 flex items-center justify-center">25%</span>
</div>
<div class="col-span-2 lg:col-span-1">
<span class="bg-primary-base text-white h-12 flex items-center justify-center">25%</span>
</div>
<div class="col-span-2 lg:col-span-1">
<span class="bg-primary-base text-white h-12 flex items-center justify-center">25%</span>
</div>
<div class="col-span-2 lg:col-span-1">
<span class="bg-primary-base text-white h-12 flex items-center justify-center">25%</span>
</div>
</div>
<!-- copiar hasta aqui -->
</div>
Pantallas pequeñas. Móvil Enlace al apartado: Pantallas pequeñas. Móvil
En móviles utilizamos solo 2 combinaciones:
- una columna (100%)
- dos columnas (50% + 50%)
Mostrar código del ejemplo: ds/_ds.example.layout-movil.njk
Contenido
HTML del ejemplo: ds/_ds.example.layout-movil.njk
<div role="img" aria-label="Imagen de retícula y 3 columnas, una que ocupa 100% de la anchura disponible, y otras dos que ocupan la mitad una al lado de la otra">
<!-- copiar a a partir de aqui -->
<div class="grid grid-cols-2 gap-lg col-span-1">
<div class="col-span-2">
<span class="bg-primary-base text-white h-12 flex items-center justify-center">100%</span>
</div>
<div class="col-span-1">
<span class="bg-primary-base text-white h-12 flex items-center justify-center">50%</span>
</div>
<div class="col-span-1">
<span class="bg-primary-base text-white h-12 flex items-center justify-center">50%</span>
</div>
</div>
<!-- copiar hasta aqui -->
</div>