Componentes reutilizables

Sistema de layout para contenedores de 3x3

Sistema de layout para contenedores de 3x3 y definiciones de los elementos que lo componen

.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 .Module y 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 --full puede omitirse.
• Dentro de cada elemento se admite un solo contenedor.
• Incluye la separación entre filas.

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 = y

Donde 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-item pueden existir de 1 a 3 elementos del tipo .Module-item.

.Box

• Son los contenedores.
• Por estar dentro de .Module automá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.

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>