Sistema de Layout para contenedores de 3x3
Definiciones
Se detallan a continuación las definiciones de los elementos que componen el sistema.
.Container
- Es el componente padre de un sistema de 3x3.
- Define el ancho máximo del contenido en la pantalla en 1280px y lo centra horizontalmente.
.Module
- Se sugiere declararlo como hijo inmediato de
.Container. - Tiene un alto definido en píxeles.
- El alto está dado por una de las siguientes clases:
.Module--[xs|sm|md|lg|xl|xxl]o.Module--[VALOR_NUMERICO]. - Los valores numéricos pueden ser: 120, 240, 360, 450, 510, 615, 720, 840, 960, 1200, 1440, 1680, 1920, 2400.
- Por defecto el alto es del tamaño
.Module--md(ver tabla 1).
.Module-item
- Son hijos de
.Moduley representan las filas. - El alto que ocupan es relativo al alto total del módulo y se define con una de las siguientes clases:
.Module-item--[1of3|2of3|full]. - El caso de
--fullpuede omitirse. - Dentro de cada elemento se admite un solo contenedor.
- Incluye la separación entre filas.
| Tamaño | y3 (px) | y2 (px) | y1 (px) |
|---|---|---|---|
| 120 | 120 | ~68 | ~28 |
| 240 | 240 | ~148 | ~68 |
| xs | 282 | 176 | 82 |
| 360 ó sm | 360 | 228 | 108 |
| 450 | 450 | ~288 | ~138 |
| 510 ó md | 510 | 328 | 158 |
| 615 ó lg | 615 | 398 | 193 |
| 720 ó xl | 720 | 468 | 228 |
| 840 ó xxl | 840 | ~548 | ~268 |
| 960 | 960 | ~628 | ~308 |
| 1200 | 1200 | 788 | 388 |
| 1440 | 1440 | 948 | 468 |
| 1680 | 1680 | ~1108 | ~548 |
| 1920 | 1920 | ~1268 | ~628 |
| 2400 | 2400 | 1588 | 788 |
Tabla 1
Nota: Los altos predefinidos están sujetos a modificaciones.
Las ecuaciones que definen el alto en píxeles de cada fila o .Module-item son de la siguiente manera:
Precaución: esta fórmula está en revisión.
y1 = (y - (m * 2)) / 3
y2 = ((y - (m * 1)) / 3) * 2
y3 = yDonde y es el alto total del módulo y m = 24px el margen inferior de cada item de módulo.
.Grid
- Es el elemento padre del sistema de grilla.
- Guía rápida para el uso de la Grilla de Portal Tipo
.Grid-item
- Son hijos inmediatos de
.Grid. - Deben incluir una clase con el ancho, dado por
.u-sizeXofY. - Incluye la separación entre columnas.
- Dentro de cada
.Grid-itempueden existir de 1 a 3 elementos del tipo.Module-item.
.Box
- Son los contenedores.
- Por estar dentro de
.Moduleautomáticamente ajustarán el alto y ancho para ocupar el total del espacio de un.Module-item. - Los contenedores que requieran centrar el contenido verticalmente lo harán automáticamente.
Nota: el contenedor Destacado 4 requiere una modificación en el marcado HTML.
Errores conocidos
- Las imágenes de contenedores del tipo Destacado 1 y 2 se estiran desproporcionalmente.
Ejemplo
<div class="Container">
<div class="Module Module--sm">
<div class="Grid">
<div class="Grid-item u-size1of3">
<div class="Module-item Module-item--1of2">
<div class="Box"></div>
</div>
<div class="Module-item Module-item--1of2">
<div class="Box"></div>
</div>
</div>
<div class="Grid-item u-size2of3">
<div class="Module-item Module-item--2of3">
<div class="Box"></div>
</div>
<div class="Module-item Module-item--1of3">
<div class="Box"></div>
</div>
</div>
</div>
</div>
</div>