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-).

Bloque de layout con flex

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-flexarea. Un área puede contener a su vez otro bloque de layout: <sxh html>


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



</sxh>

===== Bloques de layout con grid =====
==== Bloque de Layout por columnas ====
Ejemplo de Layout con BEM por columnas.

<sxh css>
.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);
}



</sxh>

<sxh html>

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

</sxh> ==== span ==== Para que un área ocupe dos columnas se usa el modificador l-columnsarea--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>

Reglas de Layout

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-button">Pulsar Izquierda</div>
    </div>
    <div class="l-extremo__area-derecha">
        <div class="c-button">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-button">Pulsar Izquierda</div>
    <div class="l-extremo__area-derecha c-button">Pulsar Derecha</div>    
</div>

Mejorando el layout con SASS

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;
    }
  }
}

Ejercicios

Ejercicio 1

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>