DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Retícula

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

Índice de apartados de esta página

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

Puedes añadir breakpoints extra para aprovechar más la anchura del viewport. Esto es útil para aplicaciones web basadas en tablas donde se necesite más anchura para que quepan más columnas en las tablas. Basta con añadir al archivo tailwind.config.js de tu proyecto alguna de estas líneas de código:

  • 2xl: '1536px',
  • 3xl: '1900px',

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>