Truco rápido: crear un diseño adaptable con Floats

() translation by (you can also view the original English article)

En el truco rápido de hoy, aprenderemos cómo crear diseños adaptables usando floats de CSS, un método antiguo pero eficaz. Una vez hecho ésto, veremos cómo hacerlo con Bootstrap. Los floats no estaban pensados inicialmente para formar la estructura básica de una página (para eso tenemos los nuevos estándares CSS como flexbox y las rejillas), por lo que trabajar con floats a veces puede resultar complicado. Veamos un ejemplo para ilustrarlo.

Creando un diseño adaptable

Supongamos que queremos crear este diseño de tarjetas:

Echa un vistazo a la versión completa para hacerte una idea.

Estilos básicos

No queremos establecer una altura fija para el texto de las tarjetas. Tampoco queremos que sean de ancho fijo. Por lo tanto, para que las tarjetas sean utilizables y no se aplasten demasiado, necesitamos mostrar un número diferente de columnas dependiendo del tamaño de la ventana.

Hemos creado algunos media queries, de forma que se cumpla lo siguiente:

Ventana	Nº de columnas
<400px	1
≥400px	2
≥768px	3
≥1024px	4

Este es el código; los elementos de lista contienen imágenes y textos encerrados en la etiqueta figure:

<ul class="clearfix">
  <li>
    <figure>
      <img src="path-to-the-image" alt="">
      <figcaption>Some description here</figcaption>
    </figure>
  </li>
       
  <!-- more list items here -->
</ul>

Este es el CSS que da estilo al diseño:

/* stylistic styles */
body {
  width: 80%;
  max-width: 1200px;
  margin: 40px auto;
  font: normal 14px/1.5 "Montserrat", "Helvetica Neue", sans-serif;
  background: #cfd8dc;
  color: #37474f;
}

figure {
  background: whitesmoke;
  margin: 0 0 40px;
  box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
}

figcaption {
  padding: 20px;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

ul {
  margin: 0;
  padding: 0;
}

/* structural styles */

li {
  list-style-type: none;
  float: left;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}

/* media queries */

@media screen and (min-width: 400px) {
  li {
    width: 50%;
  }
}

@media screen and (min-width: 768px) {
  li {
    width: 33.333%;
  }
}

@media screen and (min-width: 1024px) {
  li {
    width: 25%;  
  }    
}

Fíjate en los media queries al final. Se encargan de indicar el ancho de las tarjetas en los diferentes tamaños de ventana. Este es el resultado:

El problema de este diseño fluido es que, al no despejar cada nueva fila, algunas tarjetas se quedan atascadas cuando tratan de encontrar su camino hacia el lado izquierdo.

Identificando las tarjetas a despejar

Según el ejemplo anterior, cuando la fila contiene cuatro tarjetas, tenemos que despejar la quinta, la novena, y así sucesivamente. Para conseguirlo, usaremos la pseudo-clase CSS :nth-of-type(an+b) donde el parámetro an+b representa el patrón de repetición deseado. Por ejemplo, en pantallas grandes (ej: ≥1024px), usaremos 4n+1. Esta fórmula busca cada elemento que sea factor de cuatro, y entonces selecciona el siguiente elemento.

Así es como podemos cambiar nuestros media queries para alterar qué tarjetas deben ser despejadas:

Ventana	Nº de columnas	Patrón de repetición
<400px	1	-
≥400px	2	2n+1
≥768px	3	3n+1
≥1024px	4	4n+1

Y aquí está el CSS que lo hace. Date cuenta que nuestros media queries son acumulativos, por lo que tenemos que reiniciar la última tarjeta despejada cada vez que vayamos a definir una nueva:

 
@media screen and (min-width: 400px) {
  li {
    width: 50%;
  }
    
  li:nth-of-type(2n+1) {
    clear: left;
  }
}
	
@media screen and (min-width: 768px) {
  li {
    width: 33.333%;
  }
  
  li:nth-of-type(2n+1) {
    clear: none;
  }
  
  li:nth-of-type(3n+1) {
    clear: left;
  }
}

@media screen and (min-width: 1024px) {
  li {
    width: 25%;  
  }    
  
  li:nth-of-type(3n+1) {
    clear: none;
  }
  
  li:nth-of-type(4n+1) {
    clear: left;
  }
}

Por último, cabe destacar lo siguiente:

En vez de usar la propiedad clear:left, podemos usar clear:both que es más genérica.
En vez de usar la pseudo-clase CSS :nth-of-type(an+b), podemos usar :nth-child(an+b).

Ahora que hemos analizado uno de los métodos para despejar los floats, para ampliar nuestros conocimientos vamos a echar un vistazo al método que usa Bootstrap.

Usando el método de Bootstrap

Aprovechándonos del sistema de rejilla de Bootstrap, podremos crear un diseño adaptable similar al anterior. Una vez más, dependiendo del tamaño de la ventana, nuestro diseño será diferente:

Ventana	Nº de columnas
<768px	2
≥768px	3
≥992px	3
≥1200px	4

Aquí está el código HTML necesario, indicando que nuestros elementos de lista deben ocupar seis de las doce columnas en ventanas muy pequeñas, cuatro columnas en ventanas pequeñas, y tres columnas en ventanas grandes:

<div class="container">
  <ul class="row">
    <li class="col-xs-6 col-sm-4 col-lg-3">
      <figure>
        <img src="path-to-the-image" alt="" class="img-responsive">
        <figcaption>Some description here</figcaption>
      </figure>
    </li>
    
    <!-- more list items here -->
  </ul>
</div>

Normalmente, este código es todo lo que necesitamos, suponiendo que todas las columnas tengan la misma altura. Sin embargo, en nuestro ejemplo las columnas tienen diferentes alturas, así que necesitaremos despejar los floats. Para ello, usaremos la clase clearfix, así como las clases preparadas para diseños adaptables.

Primero, en pantallas muy pequeñas (<768px), tenemos un diseño de dos columnas, por lo tanto debemos despejar los floats después de cada segundo elemento de lista. Añade el siguiente código después de cada segundo elemento de lista:

1	<li class="clearfix visible-xs-block"></li>

A continuación, en pantallas pequeñas y medianas (≥768px y <1200px), tenemos un diseño de tres columnas, por lo que necesitamos despejar los floats después de cada tercer elemento de lista. Para ello, añadiremos algo de código adicional después de cada tercer elemento de lista (no es necesario para el último elemento):

1	<li class="clearfix visible-sm-block visible-md-block"></li>

Por último, en pantallas grandes (≥1200px), tenemos un diseño de cuatro columnas, por lo que debemos despejar los floats después de cada cuarto elemento de lista. De nuevo, añade algo más de código, esta vez después de cada cuarto elemento de lista:

1	<li class="clearfix visible-lg-block"></li>

Estos bloques adicionales ensucian un poco el código (a mucha gente no le gusta usar código para organizar los estilos), pero se consigue el mismo resultado final que en nuestro método inicial. Cada uno de estos elementos de lista está oculto, excepto bajo ciertos puntos de ruptura que asumen display:block; entonces es cuando actúan eficazmente como divisores horizontales invisibles entre nuestras filas.

Aquí está la demostración asociada:

Conclusión

En este pequeño artículo, hemos visto dos sencillas ténicas para crear diseños adaptables con floats. A pesar de que los floats no vayan a ser (y no deberían serlo) la primera opción en tus diseños adaptables, espero que estas técnicas te resulten útiles en algún momento. Si estás usando cualquier otra técnica, ¡asegúrate de compartirla con nosotros!