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

• Uso de breakpoints según tu proyecto
• Disposición de bloques de página
• Disposición de inputs

Uso de breakpoints según tu proyecto #

Los breakpoints definidos en DESY están pensados para optimizar la legibilidad, la composición de la página y la adaptación a anchuras pequeñas. No obstante, es posible configurar tus propios breakpoints para adaptarlo a las necesidades de tu poyecto.

• 
  Correcto

  Utiliza la configuración de breakpoints por defecto cuando tu proyecto esté basado en texto y contenido.

• 
  Correcto

  Puedes configurar los nuevos valores de breakpoint 2xl y 3xl cuando tu aplicación requiere visualizar más datos en pantalla, como un mayor número de columnas en tablas avanzadas.

  Ten en cuenta que dificultarás la experiencia en móviles. Asegúrate de que las personas que utilizan tu aplicación sólo trabajan en escritorio.

• 
  Incorrecto

  No añadas los valores de breakpoint 2xl y 3xl cuando tu proyecto tenga páginas de contenido. Aunque la experiencia en móvil sea satisfactoria, tendrá problemas de legibilidad y usabilidad en escritorio.

Disposición de bloques de página #

Es posible que necesites mostrar un contenido, un menú lateral, una subcabecera u otros componentes que se adapten a distintas anchuras. Nuestras plantillas constan de distintos bloques en los que definimos áreas seguras para encajar tu contenido, utilízalas como base.

Disposición de inputs #

Colocamos grupos de entradas de texto a lo largo de la suma de varias columnas, respetando el espaciado entre estos elementos y sus proporciones. Evitamos su colocación tipo "ladrillos" encajados en las columnas de la retícula.

Consulta nuestro apartado de patrones de componentes para conocer la manera correcta de pedir o mostrar información.