Rejilla
Rejilla de 12 Columnas
La rejilla o grid con el que se distribuyen los elementos de las páginas de la ULPGC se compone de 12 columnas y una anchura máxima de 1440px. El margen entre columna (también conocido como canal o gutter) tiene un valor fijo de 64px para asegurar un diseño limpio y ordenado.
Los objetivos de la rejilla son: delimitar el área donde se muestran todos los elementos clave de la interfaz del usuario así como conseguir una distribución dinámica y fácilmente adaptable a los diferentes tamaños de dispositivos. La rejilla debe servir como punto de partida para la distribución del diseño así como ser la principal herramienta de cohesión entre todas las páginas diseñadas con respecto a este Sistema de Diseño.
Rejilla de diseño de 8 puntos
Con el objetivo de asegurar la consistencia y el ritmo de todos los elementos de la interfaz del usuario, el Sistema de Diseño de la ULPGC emplea un grid secundario compuesto con unidades pequeñas de 8x8 pixeles.
La proporcionalidad en base 8 que ofrece esta rejilla no solo establece una clara relación de aspecto de los componentes de la interfaz, sino que asegura una visualización óptima para la gran mayoría de dispositivos y resoluciones de pantalla.
Este grid secundario no se incorpora dentro de la estructura SASS ya que se emplea únicamente para definir los tamaños de los componentes durante la fase de diseño. Debe servir de referencia para cualquier otra adición o modificación de los componentes de este Sistema de Diseño.
Uso de la rejilla
Es importante destacar que el grid dispone de diferente número de columnas según la resolución de pantalla o dispositivo:
- Grid de 12 columnas: Resoluciones de pantallas de escritorio. Las clases de las columnas serán en formato col-X
- Grid de 8 columnas: Resoluciones de pantallas para tablets o resoluciones de pantalla de escritorio reducidas. Las clases de las columnas serán en la forma col-md-X
- Grid de 4 columnas: Resoluciones de pantallas de móviles. Las clases de las columnas serán en la forma col-sm-X
Por definición, el uso de la rejilla siempre tendrá un contenedor principal y posteriormente una fila que contendrá las columnas que se distribuirían en el conjunto de columnas que se desee según la resolución, quedando como ejemplo:
<div class="row">
<div class="col-3 col-md-4">Texto 1</div>
<div class="col-3 col-md-4">Texto 2</div>
<div class="col-3 col-md-4">Texto 3</div>
<div class="col-3 col-md-4">Texto 4</div>
</div>Siendo su visualización estructural como sigue (se añade clase extra para utilizar fondo de color):
Algunos ejemplos se distribución básico se muestran a continuación:
En el caso de que no se especifiquen las columnas para tablets y móvil, el grid llevará automáticamente el ancho de cada columna al 100% en esas resoluciones
Ejemplo común
- HTML
- JS
<div class="ulpgcds-grid">
<div class="row">
<div class="col-4">
<article class="ulpgcds-article"><a href="/accesibilidad"><img alt="" src="/sites/default/files/ULPGCDS_Basic_accessibility.jpg"><h3>Accesibilidad</h3></a>
</article>
</div>
<div class="col-4">
<article class="ulpgcds-article"><a href="/colores"><img alt="" src="/sites/default/files/ULPGCDS_Basic_colors.jpg"><h3>Colores</h3></a>
</article>
</div>
<div class="col-4">
<article class="ulpgcds-article"><a href="/rejilla"><img alt="" src="/sites/default/files/ULPGCDS_Basic_grid.jpg"><h3>Rejilla</h3></a>
</article>
</div>
</div>
<div class="row">
<div class="col-4">
<article class="ulpgcds-article"><a href="/iconografia"><img alt="" src="/sites/default/files/ULPGCDS_Basic_icons.jpg"><h3>Iconografía</h3></a>
</article>
</div>
<div class="col-4">
<article class="ulpgcds-article"><a href="/imagenes"><img alt="" src="/sites/default/files/ULPGCDS_Basic_images.jpg"><h3>Imágenes</h3></a>
</article>
</div>
<div class="col-4"> <article class="ulpgcds-article"><a href="/espaciado"><img alt="" src="/sites/default/files/ULPGCDS_Basic_spacing.jpg"><h3>Espaciado</h3></a>
</article>
</div>
</div>
</div>