DESY

Sistema de Diseño del Gobierno de Aragón.

Índice de apartados de esta página

Volver

Retícula

Combinaciones basadas en una retícula de 4 columnas para escritorio y 2 para móviles.

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-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

Zona de contenido (75% en escritorio, 100% en móvil)
Barra lateral (25% en escritorio, 100% en móvil)
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>
100%
50%
50%
75%
25%
25%
75%
25%
25%
25%
25%
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

100%
50%
50%

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>