En los casi 30 años de historia de la web, la maquetación ha sido uno de los grandes focos de debate entre los desarrolladores web y, actualmente, entre los front end developers. En este tiempo hemos pasado por diferentes etapas, desde la web consistente en puro texto hasta la tendencia a la maquetación en cuadrícula.
Sin duda, la incorporación de los dispositivos móviles supuso una revolución en el desarrollo front end, con la necesidad de cambiar de mentalidad por completo a la hora de diseñar una web. De las hoy ignominiosas webs hechas en flash, pasando por la no menos desfasada maquetación en tablas, se llegó a los elementos flotantes y el diseño fluido y, en 2012, las media queries se unen a las recomendaciones del W3C, creando el primer escenario web adaptado para dispositivos móviles.
El último paso –de momento- del desarrollo web front end comienza a ser ya una realidad, al incorporarse CSS Grid Layout a las últimas versiones de los principales navegadores (Chrome 57, Firefox 52, Opera 44,…). Este módulo de maquetación bidimensional, tan esperado por los diseñadores, está llamado a relevar a frameworks como bootstrap, que llenaban todos los proyectos web de dependencias y los vaciaban de creatividad.
Flexbox: Una aproximación a la maquetación dinámica
Anteriormente, flexbox trató de solucionar la papeleta de adaptar el diseño a un entorno mobile. Mediante la propiedad “display:flex”, se consigue que un contenedor adapte sus elementos hijos al tamaño del navegador de manera unidimensional. Gracias a la propiedad flex-wrap, los elementos hijos se recolocan cuando no hay más espacio, cambiando de fila o de columna.
Por desgracia, flexbox se enfrentó a diversos problemas, como la implementación desigual en los diferentes navegadores y el lanzamiento de frameworks como Twitter Bootstrap (En 2011), que introducían el diseño en filas y columnas, mucho más apetitoso para los desarrolladores front end.
Llegan los frameworks, y con ellos las dependencias
Foundation, Bootstrap,… existen decenas de Frameworks CSS, y tienen la ventaja de facilitar muchísimo la labor de desarrollar un layout atractivo y adaptable a los diferentes dispositivos. Además, muchos de ellos incorporan elementos de UI realmente útiles para facilitar la interactividad de las webs (Formularios, menús desplegables, horizontales, ventanas modales,..).
Sin embargo, no es tan bonito como parece. Implementar este tipo de frameworks implica una serie de desventajas tanto para el usuario como para el diseñador:
- Incorporar nuevos archivos implica un mayor peso de la web, por lo que con una conexión irregular, como la que pueden tener muchos dispositivos móviles actualmente, aumenta el tiempo de descarga.
- El uso de repositorios para algunos elementos puede hacer peligrar el funcionamiento de nuestra web. Al depender de servidores externos que, por muy estables que sean, no están exentos de sufrir problemas, podemos encontrarnos en cualquier momento con nuestra web inoperativa y sin capacidad de reacción.
- Para el desarrollador front end es una gran limitación utilizar un código predefinido y adaptarlo al proyecto que está realizando. Este tipo de frameworks limitan la creatividad y el control sobre el diseño, además de estandarizar en exceso el aspecto de las webs.
CSS Grid Layout al rescate del desarrollador front end
Desde que, en 2017, Chrome, Firefox, Safari y Opera publicasen sus primeras versiones compatibles con CSS Grid Layout, el sector del desarrollo front end está en plena ebullición. En esta ocasión, parece que todo va mucho más rápido y ordenado. El W3C ya recomienda este nuevo módulo y las primeras pruebas están superando las expectativas de los diseñadores.
Este módulo presenta las posibilidades de la maquetación en cuadrícula (Dos dimensiones, frente al unidimensional flexbox) con la ventaja de no depender de ningún framework. Permite una gran flexibilidad, ya que es el propio desarrollador quien configura la cuadrícula (Al contrario que bootstrap, que predefinía un máximo de 12 columnas), su anchura, su alineación…
Los comentarios en Twitter son completamente clarificadores: El módulo CSS Grid Layout llega para revolucionar el desarrollo front end y, teniendo en cuenta lo bien que se están haciendo las cosas, es conveniente ponerse las pilas.