15. Sistema de diseño: Layout

En los temas de CSS vimos flex y grid. En este tema vamos a ver cómo se usan en nuestro sistema de diseño con bloques de layout de BEM (prefijo l-).

Un bloque de layout con flex sería así:

<div class="l-flex l-flex--direction-row l-flex--justify-content-center">
  <div class="l-flex__area">Item1</div>
  <div class="l-flex__area">Item2</div>
  <div class="l-flex__area l-flex__area--grow2">Item3</div>
  <div class="l-flex__area">Item4</div>
  <div class="l-flex__area">Item5</div>
</div>

.l-flex {
  display: flex;
}

.l-flex--direction-row {
  flex-direction: row;
}

.l-flex--justify-content-center {
  justify-content: center;
}

.l-flex__area--grow2 {
  flex-grow: 2;
}

El padre es el bloque l-flex y cada hijo es un área l-flex__area. Un área puede contener a su vez otro bloque de layout:

<div class="l-flex l-flex--direction-row l-flex--justify-content-center">
  <div class="l-flex__area">
    <div class="l-flex l-flex--direction-row l-flex--justify-content-center">
      <div class="l-flex__area"></div>
      <div class="l-flex__area"></div>    
    </div>
  </div>
  <div class="l-flex__area">Item2</div>
  <div class="l-flex__area l-flex__area--grow2">Item3</div>
  <div class="l-flex__area">Item4</div>
  <div class="l-flex__area">Item5</div>
</div>

Ejemplo de Layout con BEM por columnas.

.l-columns {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
}

.l-columns--2 {
  grid-template-columns: repeat(2, 1fr);
}
.l-columns--3 {
  grid-template-columns: repeat(3, 1fr);
}
.l-columns--4 {
  grid-template-columns: repeat(4, 1fr);
}

<div class="l-columns l-columns--3">
  <div>
    <h2>Column A </h2>
  </div>
  <div >
    <h2>Column B</h2>
  </div>
  <div>
    <h2>Column C </h2>
  </div>
  <div>
    <h2>Column D</h2>
  </div>
  <div>
    <h2>Column E</h2>
  </div>
  <div>
    <h2>Column F</h2>
  </div>
</div>

Para que un área ocupe dos columnas se usa el modificador l-columns__area--span2 (ver span en CSS: Flex y Grid).

.l-columns {
  display: grid;
}

.l-columns--4 {
  grid-template-columns: repeat(4, 1fr);
}

.l-columns__area--span2 {
  grid-column: span 2;
}

  <div class="l-columns l-columns--4">
    <div class="l-columns__area"></div>
    <div class="l-columns__area"></div>
    <div class="l-columns__area"></div>
    <div class="l-columns__area"></div>
    <div class="l-columns__area"></div>
    <div class="l-columns__area l-columns__area--span2"></div>
    <div class="l-columns__area"></div>                   
  </div>

Para hacer una clase de Layout hay que seguir las siguientes reglas:

• Siempre con dos elementos.
  • El div principal, al que llamaremos "padre"
  • Los div hijos que llamaremos "áreas" (Es para seguir la nomenclatura de grid)
• El CSS solo debe tener cosas para modificar la posición (y a veces tamaño) de las Áreas pero no cambiar ni sus colores, fuentes, etc.
• Puede ser optativo poner en las areas la clase del elemento si no tiene utilidad.
• Las clases CSS de los elementos que son area se llamará __area o __area-YYYY.

.l-extremo {
  display: flex;
}

.l-extremo__area-izquierda {
  margin-right: auto;
}

.l-extremo__area-derecha {
  margin-left: auto;
}

<div class="l-extremo">
    <div class="l-extremo__area-izquierda">
        <div class="c-boton">Pulsar Izquierda</div>
    </div>
    <div class="l-extremo__area-derecha">
        <div class="c-boton">Pulsar Derecha</div>
    </div>    
</div>

• En un área se podría poner un componente ya que sus propiedades CSS no van a chocar.

<div class="l-extremo">
    <div class="l-extremo__area-izquierda c-boton">Pulsar Izquierda</div>
    <div class="l-extremo__area-derecha c-boton">Pulsar Derecha</div>    
</div>

Los bloques de layout con el selector padre &:

.l-flex {
  display: flex;

  &--direction-row {
    flex-direction: row;
  }

  &--justify-content-center {
    justify-content: center;
  }

  &__area {
    &--grow2 {
      flex-grow: 2;
    }
  }
}

.l-extremo {
  display: flex;

  &__area-izquierda {
    margin-right: auto;
  }

  &__area-derecha {
    margin-left: auto;
  }
}

Y en l-columns los modificadores de 1 a 12 columnas se generan con un bucle en vez de escribirlos uno a uno:

.l-columns {
  display: grid;
  grid-template-columns: repeat(1, 1fr);

  @for $i from 1 through 12 {
    &--#{$i} {
      grid-template-columns: repeat($i, 1fr);
    }
  }

  &__area {
    &--span2 {
      grid-column: span 2;
    }
  }
}

Crea los componentes que necesites para que funcione lo siguiente:

<landing-page>
  <landing-page__cabecera>CABECERA</landing-page__cabecera>
  <landing-page__lateral-izquierdo>IZQUIERDA</landing-page__lateral-izquierdo>
  <landing-page__cuerpo>CUERPO</landing-page__cuerpo>
  <landing-page__lateral-derecho>DERECHA</landing-page__lateral-derecho>
  <landing-page__pie>PIE</landing-page__pie>
</landing-page>