CSS Grid Layout es un estándar del W3C que fue llevado a webkit y blink por Igalia una empresa asentada en Galicia con programadores por todo el mundo y además tuvimos el honor de organizar una charla [Video] de uno de los desarrolladores encargado de implementar CSS Grid Layout en Chromium/Blink y Safari/Webkit: Manuel Rego

Los que llevamos mucho tiempo maquetando (pero mucho, mucho), recordaremos una época en la que se maquetaba usando tablas, ¿por qué?, pues porque la mayoría de los diseños de web, se pueden trocear en áreas o zonas cuadradas o rectangulares, algo que un su momento permitían las tablas. Con la llegada de la web semántica y las mejoras de CSS la maquetación con tablas fue marcada como una mala práctica (que lo era). CSS Grid Layout es “como” volver a maquetar con tablas pero bien. No voy a entrar en muchos detalles, pero la maquetación con tablas se definía con las etiquetas y aquí las definimos con las hojas de estilo.

¿Por qué?

Un buen día, hace ya más de un año, cayó en mis manos un proyecto de maquetación web, pero en este caso tenia un requisito nada habitual en ese momento, y este era que la maquetación estuviese basada en CSS Grid Layout. Yo llevaba tiempo usando Bootstrap para el layout de columnas, ya que me parece muy cómodo el hecho de poder definir unos tamaños para cada “bloque” según el tamaño de pantalla, y esto no lo quería perder, así que decidí a hacer un sistema de grid similar / inspirado en el de Bootstrap, pero en lugar de usar flotantes, como en el caso de Bootstrap 3, o flexbox, como en Bootstrap 4, usaría CSS Grid Layout.

Una vez realizado este proyecto y viendo que esta herramienta funcionaba razonablemente bien, me decidí a usarla en más proyectos y finalmente a compartirla con la comunidad, liberándola a principios de este año.

Así nació Sireno Grid con un nombre inspirado en una de las estatuas, para mi gusto, más feas de mi ciudad (Vigo), pero a la vez con más personalidad.

Objetivo

Sireno Grid tiene un simple objetivo: Servir de estructura de grid responsive para que puedas crear tu layout de forma simple, nada de botones, badgets, etc… solo el grid, los “margenes” y el embed de elementos de forma responsive

Como ya comenté Sireno Grid esta inspirado en Bootstrap y por ello he usado más o menos los mismos nombres de clases y con la misma función, para que cambiar de uno a otro sea sencillo. El cambio principal viene en usar la clase .grid-row en lugar de .row para definir la fila, esto lo he hecho pensando en que se puedan usar los dos “frameworks” si fuese necesario.

Breakpoints

Los breakpoints definidos son estos (definidos en una variable SCSS)

$grid-breakpoints: ( xs: 0, lxs: 576px, sm: 768px, md: 992px, lg: 1200px ) !default;

Los containers

Una cosa que siempre tenia que modificar o añadir sobre Bootstrap eran los containers, por defecto Bootstrap 4 solo tiene dos container uno fluid que ocupa el 100% del ancho del navegador y el fijo que adquiere distintos tamaños según el brakpoint usado.

En ninguno de los proyectos esto me encajaba al 100%, el que más encajaba es el de un container fluido, pero con un tamaño máximo, pero ello Sireno Grid dispone de un ‘.container-fluid’ que se ajusta al 100% del viewport y un ‘.container-fluid-1920’ y un ‘.container-fluid-1440’ que se ajustan al 100% del viewport con un máximo de 1920px y 1440px respectivamente.

Los gutters o grid-gap

Por defecto el .grid-row establece un espacio entre columnas o “gutter” de 15px, pero en ocasiones necesitamos que ese gap no exista, para ellos he creado una colección de clases aplicables a cada columna que desactivan ese gap de la forma:

.no-gutters => para eliminar los espacios en los dos lados en todos los breakpoints. .no-gutter-[xs|lxs|sm|md|lg] => para eliminar los espacios a los dos lados del breakpoint indicado en adelante. .no-gutter-[left|right] => para eliminar el espacio en el lado indicado en todos los breakpoints. .no-gutter-[left|right]-[xs|lxs|sm|md|lg] => para eliminar el espacio en el lado indicado del breakpoint indicado en adelante.

Como nota un poco técnica, indicar que los gap entre columnas no hacen uso de ‘grid-column-gap’ como pudiera parecer lógico, ya que este establece un gap entre columnas fijo para todas, no pudiéndose indicar uno para el gap entre dos columnas y otro distintos entre otras dos.

Rellenador de columnas o Col filler

Seguramente en alguna ocasión os ha sucedido que alrededor de un container has tenido que poner un fondo distinto a cada lado (ya sea un color o una imagen), si esto te ha ocurrido el .grid-filler está pensado para ti.

  Como veras en la página de ejemplos de Sireno Grid la maquetación de esto es muy sencilla y permite un comportamiento responsive.

Flexbox fallback

Por desgracia no todos los usuarios actualizan sus navegadores (ya bien por que no pueden por limitaciones técnicas o de políticas corporativas o por que simplemente no lo hacen) así que era requisito establecer un fallback para las funcionalidades de Sireno Grid a flexbox para aquellos navegadores que no implementen el estándar Grid Layout. Esperemos poder eliminar este fallback cuando Grid Layout esté más extendido

Otras características

Me he dejado otras características para que las consulteis en la propia web de Sireno Grid donde están explicadas y con ejemplos de uso.

Además en la propia web se indica como usar Sireno Grid en tu proyecto (usando por ejemplo NPM) y se muestran ejemplos (código incluido) de las funcionalidades ya comentadas.

Dejo también aquí enlazada una lightning talk que hice sobre Sireno Grid en un meetup de PHPVigo

Agradecimientos

Agradecer a Pedro Figueras el diseño del logo y a BrowserStack la cesión de una licencia de uso de su herramienta para realizar el testeo en múltiples navegadores.

https://sirenogrid.com/