Logo Gobierno de España Logo DINTEL · Sistema de diseño Diseño Normalizado de Trámites Electrónicos Inicio Primeros pasos Primeros pasos ¿Qué es DINTEL? Diseñadores Desarrolladores Recursos Preguntas frecuentes Fundamentos Fundamentos Color Tipografía Elevaciones Espaciado Retícula Borde Radio Iconografía Ilustraciones Animación Accesibilidad Tokens de diseño Contenidos digitales Visualización de datos Elementos de interfaz Elementos de interfaz Módulos Plantillas Componentes Actualizaciones Contacto
Fundamentos Retícula

Retícula

Mediante la definición de una retrícula, los contenidos se ubican construyendo la pantallas, manteniendo la homogeneidad en toda la estructura.

Además de tratarse de un requisito indispensable para permitir una correcta distribución de los elementos en las diferentes resoluciones pantalla. Los componentes se ubican y adaptan a la retrícula, como si de las piesas de un puzzle se trataran, componiendo las pantallas.

Puntos de corte

Los puntos de corte son saltos en los que la pantalla puede cambiar su layout. Establecer unos estándares garantiza la integridad en el diseño para todos los tamaños de pantalla.

Extra Large

Entre 1025px y 1280px

Extra large - Entre1025px y1280px

Large - LG

Entre 1025px y 1280px

Large - Entre 1025px y 1280px

Medium - MD

Entre 874px y 1024px

Medium - Entre 874px y 1024px

Small - SM

Entre 600px y 873px

Small - Entre 600px y 873px

Extra small - XS

Hasta 599px

Extra small - Hasta 599px

Retícula

Nuestra retícula se compone de 12 columnas para resoluciones de escritorio, 8 columnas para tablet y 4 columnas para móvil

Extra Large

Nuestra retícula se compone de 12 columnas para resoluciones de escritorio, 8 columnas para tablet y 4 columnas para móvil

Esquema de retícula Extra Large

Large

Se compone de 12 columnas. El contenido irá integrado dentro de un contenedor con un ancho máximo de 1200px, margen entre columnas de 24px, y margen en la propia pantalla de 24px

Esquema de Retícula Large

Medium

Se compone de 8 columnas. Consta de un margen entre columnas de 16px, y margen en la propia pantalla de 16px

Esquema de retícula Medium

Small

Se compone de 4 columnas. El margen entre columnas es de 16px con un margen en la propia pantalla de 16px.

Esquema de retícula Small

Extra Small

Se compone de 4 columnas. El margen entre columnas es de 16px con un margen en la propia pantalla de 16px

Esquema de retícula Extra Small
*XS Hasta 599 360x800 Móvil Vert. -- 4 16px SM Entre 600 y 873 393x851 Móvil Hor. y Tablet Vert. -- 4 16px *MD Entre 874 y 1024 768x1024 Tablet Hor. -- 8 16px LG Entre 1025 y 1280 1024x768 Tablet Hor. Escritorio 1200px 12 24px *XL Mayor que 1280 1440x1024 Escritorio grande 1200px 12 24px

Este sitio web utiliza cookies propias y de terceros para ofrecer un mejor servicio. Si continúa navegando consideramos que acepta su uso.

Logo de Financiación por la Unión Europea NextGenerationEU Logo de Plan de Recuperación Transformación y Resiliencia Logo España digital Aviso legal Accesibilidad Política de Cookies Contacto Mapa web