DIA 19 / 2018

CSS Grid Layout también es para niños

CSS Grid Layout no es solo una nueva especificación que viene a complementar y mejorar nuestro workflow como maquetadores. Va más allá introduciendo una lógica más cercana al diseño y composición donde se equilibra el valor de los llenos y los vacíos, permitiéndonos ampliar el campo de aplicación y revisitar formatos editoriales como la literatura infantil o la poesía.


No creo que exista un periodo más excitante para los CSS lovers que los meses posteriores a la adopción por parte de los navegadores de esa nueva especificación o módulo CSS que tanto estabas esperando. El terreno se vuelve fértil y puedes explorar, jugar y probar cosas aparentemente imposibles.

En esas estamos con CSS Grid Layout. Ya nos hemos despojado de viejos procedimientos para sustituirlos por nuevas propiedades y valores más eficientes o extensibles para nuestros proyectos. Sin embargo, este cambio de cromos no nos permite tener una visión amplia del conjunto, ya que nuestra lógica de maquetación no cambia y seguimos proyectando los mismos esquemas, sustituyendo floats o flex por grids.

Ahora es el momento de abstraerse, de imaginar, de olvidar como maquetamos y enfrentarnos a una hoja de estilos en blanco, sin prejuicios ni vicios heredados. Solo así descubriremos realmente hasta dónde puede llegar el potencial que nos ofrece CSS Grid Layout (en adelante lo llamaremos CSS Grid a secas).

Y después de esta intro que espero os haya despertado vuestro espíritu de eCSSploradores, os invito a acompañarme en un ejercicio de maquetación con CSS Grid donde mezclaremos diseño editorial de poesía, tipografía fluidas y diseño web para niños sin JS. ¿Qué puede salir mal?

Vamos a maquetar “The Pied Piper of Hamelin”, una versión en verso de la fábula alemana “El flautista de Hamelín”, escrita por Robert Browning en el siglo XIX que cuenta con unas ilustraciones muy interesantes, liberadas por The British Library recientemente con licencia libre de uso.

The Pied Piper of Hamelin

CSS Grid y diseño editorial

CSS Grid introduce un cambio de lógica a la hora de maquetar muy importante. Si bien con los floats o flexbox tratábamos a los elementos como cajas con peso que se iban apilando una al lado de otra (o arriba-abajo), en CSS Grid nuestros bloques se vuelven ligeros, no tienen peso e incluso pueden solaparse.

Esto hace posible la introducción de una variable fundamental en composición, que no es otra que el espacio en blanco. Maquetar con CSS Grid se convierte en un juego de llenos y vacíos, donde la definición de los espacios ausentes tienen la misma intensidad que los bloques con contenido. Esto nos acerca como maquetadores a poder definir un equilibrio compositivo real, muy diferente a lo que veníamos haciendo, donde los espacios en blanco aparecían automatizados o por omisión no intencionada.

Con esta nueva perspectiva damos la mano al diseño editorial, como fuente donde estudiar y beber. Ya no es inviable trabajar maquetaciones complejas donde el equilibrio entre llenos y vacíos es el hilo conductor de la composición. Podemos aprender de un amplio abanico de ejemplos.

Diseños editoriales de Herbert Bayer en la Bauhaus + obra K VII de László Moholy-Nagy
Diseños editoriales de Herbert Bayer en la Bauhaus + obra K VII de László Moholy-Nagy

Todo esto tiene una aplicación directa página a página. Podemos transformar unas páginas de un diseño editorial impreso en un soporte web como en este ejemplo. Sin embargo buscamos ir un paso más allá y usar todas las posibilidades de CSS Grid no solo para gestionar el layout de una pieza concreta, sino también del conjunto completo.

Aquí es donde descubrimos “The Deck”, un ejemplo genial sobre cómo gestionar un layout con CSS Grid a modo de baraja de cartas o diapositivas sin necesidad de contar con JavaScript. Es una de esas ideas que hacen que el nuevo módulo CSS genere otro foco de interés e investigación.

The Deck CSS Grid

El funcionamiento es muy sencillo. Consiste en definir de antemano nuestro storyboard con las páginas que vamos a necesitar. Podemos darle una dirección de izquierda a derecha (como si leyéramos un libro), de arriba a abajo, o lo que es más interesante, mezclar las dos anteriores dando la posibilidad al lector de moverse libremente e ir construyendo su propia historia.

¿Recordáis los libros de “Elige tu propia aventura”? En esta serie literaria a medida que íbamos leyendo nos encontrábamos con eventos o decisiones que teníamos que tomar del tipo: “se escuchan murmullos tras la puerta, si decides abrirla pasa a la página 73, si vuelves por donde viniste vuelve a la página 48”. Eran novelas no lineales que en cierto modo te hacían introducirme aún más si cabe en la historia y el personaje.

Pues bien, esto podemos realizarlo aquí y definir diferentes itinerarios. En nuestro caso, como la narrativa es lineal, hemos optado por ocultar de la línea principal varios tramos o grupos de ilustraciones, para poder tener diferentes niveles de lecturas personalizadas.

Storyboard con CSS Grid

En cuanto al código, definimos un grid basado en un ancho de columna fijo: 100vw (el ancho de la pantalla del dispositivo) y un ancho de fija de 100vh (el alto de pantalla del dispositivo), así nos aseguramos que el elemento activo (la página) ocupe la totalidad de la pantalla.

.grid {
    position: absolute;
    transition: transform .7s ease-in-out;
    width: 3000vw;
    height: 1000vh;
    display: grid;
    grid-template: repeat(10, 100vh) / repeat(30, 100vw);
    grid-gap: 0;
}

Cada uno de los ítems del grid ocupa sus coordenadas y le añadimos un identificador propio (#item-1, #item-2…). Los reservamos. Por otro lado creamos un listado de elementos con identificadores que liguen con los enlaces de navegación entre páginas (siguiente, anterior, salto). Así, una vez hagamos clic el dichos enlaces, podremos aplicar la pseudo-clase :target para seleccionar el id que coincide con el fragmento de URL.

De esta forma sabremos en todo momento qué página está visualizando el usuario gracias a la url. Ya solo nos queda aplicar una transformación para centrar nuestro grid y por tanto la página solicitada en las coordenadas que coinciden con la pantalla del usuario, usaremos transformaciones CSS para ello.

CSS Grid pagina con acciones

Diseño web para niños

Este ejemplo tiene como usuarios a niños. Creo que es un campo de investigación muy apetecible a la vez que complejo, pues la forma de interactuar con la aplicación web ya no solo es diferente a la de un adulto, si no que además dentro del grupo de usuarios donde englobamos a los niños existen varios niveles y subgrupos según varios factores.

El estudio de la experiencia de usuario en niños tiene una importancia tremenda por múltiples motivos:

  • Estamos ante la primera generación de niños que son realmente nativos digitales, es decir, crecieron rodeados de dispositivos conectados y forman parte de su día a día.
  • Fuera de casa, en el ámbito educativo cada vez se introduce antes el uso de dispositivos como apoyo en el colegio.
  • El interés por lenguajes de programación orientado a niños (como Scratch) aumenta cada año que pasa.
Scratch Google trends

Partiendo siempre de un uso recomendado cuantitativamente (número de horas máximas al día frente a un dispositivo) y cualitativamente (control parental), lo cierto es que es que el acceso a internet y uso de aplicaciones web es una realidad creciente día a día.

Y pese a que imágenes como las anteriores rememoren recuerdos felices de adolescencia, es importante que nuestros hijos cultiven un valor estético y desarrollen un juicio crítico con aplicaciones adaptadas y diseñadas para ellos.

Es un tema que daría para muchas horas y páginas. Por ello vamos a resumir en pocas pinceladas algunos datos importantes a la hora de diseñar una web para niños basados en los estudios de Nielsen Norman Group:

  • Diseña para diferentes edades: Un mismo diseño puede resultar muy infantil para un niño de 12 años mientras que un niño de 6 años puede considerarse para mayores. Encontrar un equilibrio o focalizarse en un rango de edad concreto es la clave.
  • El uso de colores primarios y secundarios capta la atención de los usuarios por encima de los tonos pasteles. Organizar una estructura de colores acorde con la estructura de contenidos es fundamental.
  • Tamaño de tipografía mínimo de 16px, mayor (19px) cuando el rango de edad abarca a los más pequeños.
  • Una o dos tipos de fuentes como máximo.
  • Iconos en las llamadas a la acción. Dependiendo de la edad puede haber niños que aún no sepan leer pero pueden identificar un icono y relacionarlo con una acción. Acompañar al icono con texto es una buena práctica, pues refuerza el significado del botón a la vez que puede ser leído por usuarios de mayor edad.

Con estas premisas tenemos una base sobre la que empezar a construir el proyecto.

Maquetando un libro con CSS Grid Layout

Entremos en materia: el objetivo es maquetar el libro “The Pied Piper of Hamelin” usando CSS Grid. Como hemos comentado anteriormente no es prosa, con lo que el contenido entraña cierta dificultad, pues tenemos que evitar los saltos de línea en todo momento. Las imágenes además nos van a permitir jugar con distintos formatos y disposiciones al tener muchas de ellas bordes no definidos.

Para la maquetación del storyboard hemos usado un grid donde la unidad siempre está ligada el ancho y alto total del dispositivo. Esto nos permite tener todos los elementos en la misma página y jugar con transformaciones CSS sin necesidad de JS.

Para la maquetación de la hoja individual nos encontramos con tres formatos diferentes:

  • Solo imagen
  • Imagen + Texto (mayoritaria)
  • Solo texto

Tendríamos un cuarto formato que se maqueta de forma específica para la página de créditos o la página del título, pero como no vamos a usarlo de modelo para replicar nuevas páginas lo descartamos.

Formatos de pagina CSS Grid

Por tanto organizamos la página con la siguiente estructura:

.sub-grid {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-rows: 1fr min-content 50px;
    grid-template-columns: repeat(6, 1fr);
    justify-content: space-around;
    grid-gap: 0;
}

Siendo la imagen la que ocupe la primera fila, el texto la segunda y finalmente la navegación que ocupa un espacio fijo en todas las páginas. Aquí es interesante cómo se distribuyen las tres filas, partiendo de una fracción para la imagen (flexible), el contenido del texto (fijo por página pero flexible en cada una de las páginas) y los px necesarios para los botones de las acciones. Nos aseguramos que el texto mantenga su espacio y sea el que comprima a la imagen.

En cuanto a las columnas definimos seis para poder jugar y establecer diferentes composiciones en orientación landscape, ya que en portrait siempre seguiremos el mismo esquema de imagen / texto / acciones.

La principal dificultad radica en el texto. La poesía es un formato con sus peculiaridades, ya que los saltos de línea están establecidos y además debemos paginar manteniendo las estrofas para no romper la métrica. Un cóctel complicado donde se exige definir el número máximo de versos por página junto con un tamaño de fuente adecuado para que tenga cabida en el viewport.

Partiendo de font-size: 16px podemos establecer el número máximo de versos por página en 12 (en aquellas páginas donde solo haya texto) que corresponde a la orientación landscape. En portrait no tenemos la presión de un alto máximo, pero si de un ancho.

Una vez definimos las dimensiones mínimas es el momento de establecer las máximas, optando por un font-size de 34px. Pues bien, de 16px a 34px podemos hacer una transición escalonada o lineal, comportándose el texto como si de una imagen se tratase, creciendo a la vez que el ancho de página también crece.

Para conseguir esta tipografía fluida usamos la fórmula de Mike Riethmuller:

.sub-grid [class^="text-container"] > p {
    font-size: 16px;
}
@media (orientation: portrait) and (min-width: 430px) {
    .sub-grid [class^="text-container"] > p {
        font-size: calc(16px + 18 * ((100vw - 430px) / 440));
    }
}
@media (orientation: portrait) and (min-width: 870px) {
    .sub-grid [class^="text-container"] > p {
        font-size: 34px;
    }
}

Por último un apunte sobre el marcado HTML. podemos hacer uso del elemento <pre>, válido para poemas como en este ejemplo o bien usando el elemento <br>, válido para establecer “saltos de línea en parte dentro del contenido como poemas y direcciones” como indica la especificación.

Una vez tenemos el texto controlado podemos definir y jugar con los llenos y los vacíos según las imágenes que tenemos. Para ello vamos modelando una clase tanto para el texto como para las imágenes a la que le añadimos indicaciones de alineación (start, end, middle, left, right) que después recuperamos con el selector CSS de atributo.

.sub-grid [class*="-left"] {
    justify-self: start;
}
.sub-grid [class*="-center"] {
    justify-self: center;
}
.sub-grid [class*="-right"] {
    justify-self: end;
}
.sub-grid [class*="-start"] {
    align-self: start;
}
.sub-grid [class*="-middle"] {
    align-self: center;
}
.sub-grid [class*="-end"] {
    align-self: end;
}

Veamos la demo completa:

DEMO

Conclusiones: CSS Grid, más allá del compañero de Flexbox.

No pretende esta demo infravalorar especificaciones pasadas y compatibles con CSS Grid. Simplemente abrir el campo de exploración a otros formatos y narrativas que en el pasado quedaron descartadas por la dificultad de llevarlas a HTML y CSS pero que a día de hoy merecen una revisión.

Desde libros a juegos sencillos pasando por presentaciones, el terreno es fértil y está ávido de eCSSploradores que vuelvan a transitar el camino recorrido en busca de todo lo que nos fuimos despojando. Es es momento de volver al lienzo en blanco y comenzar a dibujar e inventar nuevas y mejores aplicaciones, sin límites ni condiciones, ¿te animas?

Notas finales

Pese a que la compatibilidad de CSS Grid entre navegadores es buena, hay algunas versiones y navegadores que no son compatibles. Si al visualizar la demo ves cosas raras, puede ser que tu navegador no pueda renderizar correctamente la página. Aquí tienes la lista de navegadores compatibles.