Bootstrap: El arte de maquetar para cualquier dispositivo

En el mercado del desarrollo web se encuentra una gran variedad de frameworks de CSS que facilitan el trabajo al momento de convertir un diseño en HTML para su exposición al público. Uno de estos es Bootstrap, creado por los desarrolladores de Twitter y lanzado al mercado en 2011, es el framework de código abierto más usado a nivel mundial.

Hoy en día, la maquetación web se centra en la necesidad de entregar sitios que respondan de forma efectiva a contenidos adaptables (responsive) teniendo en cuenta que, por lo menos en USA, un 56% del tráfico web se realiza a través de dispositivos móviles y la buena visibilidad móvil de los sitios web en un factor importante para Google en su calificación.

Existen varios factores a tener en cuenta al momento de elegir un framework CSS específico, algunos de ellos son: diseño adaptable, uso de preprocesadores CSS (Sass o LESS), facilidad de adaptación al flujo de trabajo, entre otros. En Bluecell hemos adoptado Bootstrap para nuestra metodología de maquetación ya que nos permite tener un mejor control de los elementos en pantalla y, con un uso efectivo del framework, hemos podido lograr el objetivo de su implementación y es tener sitios web que se adapten a cualquier dispositivo o tamaño de ventana del navegador.

Bootstrap es un framework pensado para que el diseño adaptable sea lo primero (mobile first), pon ende los puntos de corte de media queries se deben determinar según los que determina el framework. Iniciamos con el punto menor (0px) hasta el punto mayor (1200px), de esta forma el css inicia con media queries en 0px en donde se definen todos los elementos generales del diseño y al usar media queries de menor a mayor valor ( @media (min-width: 0px) hasta @media (min-width: 1200px) ) podemos hacer ajustes progresivos según avance el tamaño del dispositivo.

Ahora, teniendo en cuenta que bootstrap determina una rejilla de 12 columnas para dividir los elementos en pantalla, es importante que el diseño que se entrega para maquetación use este mismo sistema y así podemos hacer una implementación del framework que no necesite de adiciones a sus elementos. En alguna ocasiones encontramos que se entregan diseños con variaciones a la cantidad de columnas a usar, ya sean 18 o 24 columnas, Bootstrap permite hacer las modificaciones necesarias de 2 maneras. La primera es crear un paquete descargable con la cantidad de columnas necesarias y la segunda es hacer una modificación de la cantidad de columnas a través de Scss. En pruebas realizadas hemos concluído que la segunda opción es más acertada por cuanto permite un control constante de los elementos. La primera opción, al ser un paquete descargable, limita su manipulación ya que al momento de querer realizar un ajuste, debemos volver a generar la descarga.

La manipulación de la rejilla a través de Scss es relativamente sencilla. Para este ejemplo vamos a crear una rejilla de 24 columnas, para esto, re creamos el mixin de Bootstrap respond-from el cual determina a qué ancho mínimo corresponde cada punto de corte:

1.    @mixin respond-from($media) {
2.        @if $media == xs {
3.            @media (min-width: 0px)  { @content; }
4.        } @else if $media == sm {
5.            @media (min-width: 576px) { @content; }
6.        } @else if $media == md {
7.            @media (min-width: 768px) { @content; }
8.        } @else if $media == lg {
9.            @media (min-width: 992px) { @content; }
10.        } @else if $media == xl {
11.            @media (min-width: 1200px) { @content; }
12.        }
13.    }

Este mixin lo usaremos en una serie de includes que determinarán qué columnas se van a crear para cada uno de los puntos de corte:

1.    @include respond-from(xs) {

2.        @include grid-generator(xs, $columns);

3.    }

4.    @include respond-from(sm) {

5.        @include grid-generator(sm, $columns);

6.    }

7.    @include respond-from(md) {

8.        @include grid-generator(md, $columns);

9.    }

10.    @include respond-from(lg) {

11.        @include grid-generator(lg, $columns);

12.    }

13.    @include respond-from(xl) {

14.        @include grid-generator(xl, $columns);

15.    }

En las líneas 1, 4, 7, 10 y 13 hacemos el llamado al mixin respond-from determinando el nombre del punto de corte que se usará, así vamos a tener un include para cada punto de corte. Es importante tener en cuenta que los nombres de los puntos de corte (xs, sm, md, lg y xl) están determinados por el framework y no deben cambiarse, si se usan nombre distintos, nuestro nuevo sistema de rejilla no sobreescribirá al de Bootstrap.

En las líneas 2, 5, 8, 11 y 14 hacemos un llamado al mixin grid-generator el cual es el encargado de crear las diferentes columnas. Este llamado tiene 2 variables, la primera es el nombre del punto de corte la cual usa grid-generator para nombrar las columnas y la segunda es la cantidad de columnas. Para hacer más general el uso de este mixin, se ha usado la variable $columns la cual está definida en 24, si en algún momento se necesita cambiar la cantidad de columnas o usar el mixon en otro proyecto con una rejilla diferente, sólo se debe modificar el valor de la variable $columns y se creará el nuevo sistema de columnas.

El mixon grid-generator toma los valores entregados por el include anterior y los convierte en el sistema de columnas:

1.    @mixin grid-generator($size, $grid-columns) {

2.        @for $i from 1 through $grid-columns {

3.            .col-#{$size}-#{$i} {

4.                -ms-flex: 0 0 percentage($i / $grid-columns);

5.                flex: 0 0 percentage($i / $grid-columns);

6.                max-width: percentage($i / $grid-columns);

7.            }

8.        }

9.    }

En la línea 1 usamos grid-generator como nombre del mixin el cual va a afectar a los elementos internos a través de 2 variables: $size y $gird-columns. Estas 2 variables estarán determinadas por el llamado que se haga del mixin en los diferentes puntos de corte de media query.

En la línea 2, a través de una declaración for se hace un recorrido desde 1 hasta 24 (en donde $gris-columns es igual a 24), en la línea 3 se crea el sistema de columnas en donde $size hace referencia al nombre del punto de corte (xl, lg, md, sm y xs) y $i es el número de la columna; así, el resultado sería algo como .col-xl-1. En las líneas 4, 5 y 6 se define el ancho de la columna en porcentajes.

En conclusión, Bootstrap es un framework bastante versátil que permite, como ya hemos visto, modificar su estructura para acomodarse a los requerimientos de cualquier proyecto permitiendo que tanto diseñadores como desarrolladores puedan crear elementos que se salen del estándar del framework y adecuarlos de forma rápida y efectiva a cualquier tamaño de dispositivo.