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
Large - LG
Entre 1025px y 1280px
Medium - MD
Entre 874px y 1024px
Small - SM
Entre 600px y 873px
Extra small - XS
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
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
Medium
Se compone de 8 columnas. Consta de un margen entre columnas de 16px, y margen en la propia pantalla de 16px
Small
Se compone de 4 columnas. El margen entre columnas es de 16px con un margen en la propia pantalla de 16px.
Extra Small
Se compone de 4 columnas. El margen entre columnas es de 16px con un margen en la propia pantalla de 16px
*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.