Grilla

La grilla es una estructura base que organiza elementos en una interfaz. Sirve para definir las secciones de un producto digital y distribuir los elementos internos asegurando la legibilidad, la usabilidad y la accesibilidad del contenido.

¿Por qué usar una grilla?

Coherencia visual: estandariza la disposición y alineación de los elementos de una interfaz.
Escalabilidad: facilita la adaptación de la interfaz en diferentes dispositivos y resoluciones.
Familiaridad: proporciona caminos claros e intuitivos a la persona usuaria al interactuar con el producto.
Legibilidad: genera jerarquías para la percepción de los contenidos en grupos o módulos.

Fundamentos UX

Creamos una grilla que sigue principios de diseño centrados en el usuario, utilizando patrones conocidos y validados que aseguran que la información sea comprensible. Al idear nuestros estilos, nos apoyamos en leyes UX y en principios de la Gestalt.

Ley de Fitts: Estandariza la disposición y alineación de los elementos de una interfaz.
Ley de Miller: Facilita la adaptación de la interfaz en diferentes dispositivos y resoluciones.
Ley de Hick: Proporciona caminos claros e intuitivos a la persona usuaria al interactuar con el producto.
Ley de Proximidad: Genera jerarquías para la percepción de los contenidos en grupos o módulos.

Anatomía

Utilizamos una grilla de columnas para las interfaces de sus productos digitales. La grilla se compone de:

Columnas: es la unidad vertical de la grilla donde se colocan y organizan los contenidos.
Calles (Gutters en Inglés): es el espacio que sirve para separar las columnas entre sí, y por lo tanto, modulan el contenido de forma horizontal. En Obelisco, el ancho de las calles está definido según cada breakpoint.
Márgenes: mantienen centrado el contenedor visible y evitan que elementos clave estén demasiado cerca del borde de una ventana.

Referencia visual de la anatomia de grillas

Usos

La mayoría de los componentes están construidos en función de la grilla y se deben colocar sobre las columnas.

Referencia visual reglas de uso de grillas

check

Colocar los componentes sobre las columnas.

No colocar componentes sobre las calles.

check

Ubicar los componentes dentro del área de columnas

No colocar componentes sobre los márgenes.

Breakpoints

Un breakpoint es un punto específico en el que el diseño de una página cambia para adaptarse a diferentes tamaños de pantalla (viewports). Esto permite que el contenido se ajuste de manera adecuada a dispositivos grandes y pequeños, asegurando que la experiencia del usuario sea siempre óptima.

Breakpoint	Dimensiones	Ancho máximo	Columnas	Espaciado (Gutter)
Extra small `(xs)`	<576px	100%	2	16px
Small `(sm)`	≥576px	540px	2	16px
Medium `(md)`	≥768px	720px	6	24px
Large `(lg)`	≥992px	720px	6	24px
Extra large `(xl)`	≥1200px	1140px	12	32px
Extra extra large `(xxl)`	≥1400px	1140px	12	32px

Dispositivos

Si bien la grilla se adapta a cualquier tamaño de pantalla, contamos con medidas estándar que facilitan proceso de diseño e implementación.

Desktop (1366 x 1024 px): 12 columnas
Tablet (768 x 1194 px): 6 columnas
Mobile (360 x 640 px): 2 columnas

Referencia visual de uso de grillas en diferentes dispositivos.

Comportamiento

La grilla de Obelisco tiene un comportamiento responsivo basado en porcentajes, donde existen secciones definidas que ocupan siempre el mismo espacio, y otras secciones que van cambiando según el tamaño de la ventana, asegurando la distribución del contenido.

Páginas de ancho completo

En esta distribución, el contenido de una página utilizando la grilla de Obelisco ocupa el 100 % del ancho del contenedor.

Referencia visual de uso de grillas en pantalla ancho completo

Páginas con una sección lateral

En esta distribución, el contenido de una página utilizando la grilla de Obelisco está dividido en 2 secciones: una columna lateral que ocupa un tercio (1/3) de la página, y el cuerpo de la página que ocupa dos tercios (2/3).

Referencia visual reglas de uso de grillas en disposicion lateral.

Páginas en dispositivos móviles

En dispositivos móviles, el contenido de una página se organiza con otra estructura para asegurar el entendimiento de la información. En pantallas de tamaños tablet o mobile, las secciones se colocan una debajo de la otra y no existen secciones laterales.

Referencia visual de uso de grillas en pantallas de dispositivos mobiles

Accesibilidad

De acuerdo al Criterio de Éxito 1.4.10 Reflow, es requisito que las grillas responsivas respondan al tamaño de la ventana del navegador sin perder información o funcionalidad.

Contenido en esta página

¿Por qué usar una grilla?
Fundamentos UX
Anatomía
Usos
Breakpoints
Dispositivos
Comportamiento
Páginas de ancho completo
Páginas con una sección lateral
Páginas en dispositivos móviles
Accesibilidad

Contenedores de la página

La grilla de Obelisco cuenta con distintos anchos posibles para los contenedores de las páginas. Para cada ancho, hay que considerar cuál es el mejor para consumir e interactuar con los elementos de la página.

Container (100%)

col-12 col-xl-8

col-12 col-xl-4


  <div class="container">
    <div>Container 100%</div>
  </div>

  <div class="container">
    <div class="row">
      <div class="col-12 col-xl-8">
        <div>col-12 col-xl-8</div>
      </div>
      <div class="col-12 col-xl-4">
        <div>col-12 col-xl-4</div>
      </div>
    </div>
  </div>

Ancho completo (100%): Excepción para páginas donde la interacción se beneficia de más espacio en pantalla, como gráficos y otras visualizaciones de datos o tableros.
Ancho predeterminado (col-8): De manera predeterminada, todas las páginas utilizan este ancho que ocupa 2/3 de la página. Es ideal para formularios, tablas con pocas columnas o páginas que se centran en contenido escrito.
Ancho mínimo (col-4): Corresponde a una columna lateral que ocupa 1/3 de la página. Puede contener componentes tales como Bloque de trámite o Mapa.

Sistema de columnas

Para el breakpoint xs (extra small), se puede utilizar como clase, el formato:

.col-{quantity}

En este caso, {quantity} es el número de columnas que ocupará el elemento, y puede ser un valor entre 1 y 12.

Para los otros breakpoints como por ejemplo sm, md, lg, xl y xxl, se puede utilizar como clase, el formato:

.col-{breakpoint}-{quantity}

Por ejemplo, las clases .col-12.col-xl-8 indican que el elemento ocupará 12 columnas y que a partir del breakpoint xl (viewport de 1200px) ocupará 8 columnas.

Disposición en la página

A continuacion, se mencionan las disposiciones de los elementos en una página. Para componentes especificos como Accesos, Tarjetas, Destacado, o Calendario, existen clases específicas para su disposición.

Disposición en 4 columnas

La disposición de los elementos es responsive, es decir que, en mobile se visualiza 1 columna, en tablet 2 columnas, a partir del viewport de 1200px 3 columnas y a partir del viewport de 1400px 4 columnas.


<div class="container">
    <div class="max-items-4">
        <div class="col"> <div>1</div> </div>
        <div class="col"> <div>2</div> </div>
        <div class="col"> <div>3</div> </div>
        <div class="col"> <div>4</div> </div>
        <div class="col"> <div>5</div> </div>
    </div>
</div>

Disposición en 3 columnas

La disposición de los elementos es responsive, es decir que, en mobile se visualiza 1 columna, en tablet 2 columnas, y en desktop 3 columnas.


<div class="container">
    <div class="max-items-3">
        <div class="col"> <div>1</div> </div>
        <div class="col"> <div>2</div> </div>
        <div class="col"> <div>3</div> </div>
        <div class="col"> <div>4</div> </div>
        <div class="col"> <div>5</div> </div>
    </div>
</div>

Disposición en 2 columnas

La disposición de los elementos es responsive, es decir que, en mobile se visualiza 1 columna, y en tablet y desktop 2 columnas.


<div class="container">
    <div class="max-items-2">
        <div class="col"> <div>1</div> </div>
        <div class="col"> <div>2</div> </div>
        <div class="col"> <div>3</div> </div>
    </div>
</div>

Disposición en 1 columna

En mobile, tablet y desktop se visualiza 1 columna.


<div class="container">
    <div class="max-items-1">
        <div class="col"> <div>1</div> </div>
        <div class="col"> <div>2</div> </div>
        <div class="col"> <div>3</div> </div>
    </div>
</div>

Variantes

Contenedores de la página
Sistema de columnas
Disposición en la página
Disposición en 4 columnas
Disposición en 3 columnas
Disposición en 2 columnas
Disposición en 1 columna