====== 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í:
<sxh html>
<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>
</sxh>


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

El padre es el bloque ''l-flex'' y cada hijo es un área ''l-flex<nowiki>__</nowiki>area''. Un área puede contener a su vez otro bloque de layout:

<sxh html>
<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>
</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 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>
</sxh>

==== span ====
Para que un área ocupe dos columnas se usa el modificador ''l-columns<nowiki>__</nowiki>area--span2'' (ver ''span'' en [[clase:daw:diw:css-flex-grid#span|CSS: Flex y Grid]]).

<sxh css>
.l-columns {
  display: grid;
}

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

.l-columns__area--span2 {
  grid-column: span 2;
}
</sxh>


<sxh html>
  <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>
</sxh>

===== 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á ''<nowiki>__area</nowiki>'' o ''<nowiki>__area-YYYY</nowiki>''.


<sxh css>
.l-extremo {
  display: flex;
}

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

.l-extremo__area-derecha {
  margin-left: auto;
}
</sxh>

<sxh html>
<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>
</sxh>

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

<sxh html>
<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>
</sxh>



===== Mejorando el layout con SASS =====
Los bloques de layout con el selector padre ''&'':

<sxh sass>
.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;
  }
}
</sxh>

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

<sxh sass>
.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;
    }
  }
}
</sxh>

===== Ejercicios =====

==== Ejercicio 1 ====
Crea los componentes que necesites para que funcione lo siguiente:

<sxh html>
<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>
</sxh>