Nuevas funciones CSS que están cambiando el diseño web

Hubo un tiempo en que el diseño web se volvió monótono. Los diseñadores y desarrolladores crearon los mismos tipos de sitios web una y otra vez, tanto que la gente de nuestra propia industria se burló de nosotros por crear solo dos tipos de sitios web:

¿Cuál de los dos posibles sitios web estás diseñando actualmente? pic.twitter.com/ZD0uRGTqqm

— Jon Gold (@jongold) 2 de febrero de 2016

¿Es este el límite de lo que pueden lograr nuestras mentes “creativas”? Este pensamiento envió una punzada incontrolable de tristeza a mi corazón.

No quiero admitirlo, pero tal vez eso fue lo mejor que pudimos lograr en ese entonces. Quizás no teníamos las herramientas adecuadas para hacer diseños creativos. Las demandas de la web evolucionaban rápidamente, pero estábamos atrapados con técnicas antiguas como flotadores y tablas.

Hoy, el panorama del diseño ha cambiado por completo. Estamos equipados con herramientas nuevas y poderosas (Cuadrícula CSS, propiedades personalizadas CSS, formas CSS writing-mode CSS, por nombrar algunas) que podemos usar para ejercitar nuestra creatividad.

Cómo CSS Grid cambió todo

Las cuadrículas son esenciales para el diseño web; eso ya lo sabias Pero, ¿te has parado a preguntarte cómo has diseñado la rejilla que utilizas principalmente?

La mayoría de nosotros no lo hemos hecho. Usamos la cuadrícula de 12 columnas que se ha convertido en un estándar en nuestra industria.

• Pero, ¿por qué usamos la misma cuadrícula?
• ¿Por qué las grillas están hechas de 12 columnas?
• ¿Por qué nuestras cuadrículas tienen el mismo tamaño?

Aquí hay una posible respuesta a por qué usamos la misma cuadrícula: no queremos hacer los cálculos .

En el pasado, con las cuadrículas flotantes, para crear una cuadrícula de tres columnas, necesitaba calcular el ancho de cada columna, el tamaño de cada medianil y cómo colocar cada elemento de la cuadrícula. Luego, necesitaba crear clases en el HTML para darles el estilo apropiado. Fue bastante complicado.

Para facilitar las cosas, adoptamos marcos de cuadrícula. Al principio, marcos como 960gs y 1440px nos permitían elegir entre cuadrículas de 8, 9, 12 e incluso 16 columnas. Más tarde, Bootstrap ganó la guerra de los frameworks. Debido a que Bootstrap solo permitía 12 columnas, y cambiar eso fue una molestia, finalmente nos decidimos por 12 columnas como estándar.

Pero no debemos culpar a Bootstrap. Era el mejor enfoque en ese entonces. ¿Quién no querría una buena solución que funcione con el mínimo esfuerzo? Con el problema de la cuadrícula resuelto, dirigimos nuestra atención a otros aspectos del diseño, como la tipografía, el color y la accesibilidad.

Ahora, con la llegada de CSS Grid, las cuadrículas se han vuelto mucho más simples . Ya no tenemos que temer a las matemáticas de cuadrícula. ¡Se ha vuelto tan simple que diría que crear una cuadrícula es más fácil con CSS que con una herramienta de diseño como Sketch!

¿Por qué?

Supongamos que desea crear una cuadrícula de 4 columnas, cada columna con un tamaño de 100 píxeles. Con CSS Grid, puede escribir 100px cuatro veces en la declaración grid-template-columns y se creará una cuadrícula de 4 columnas.

 .grid { display: grid; grid-template-columns: 100px 100px 100px 100px; grid-column-gap: 20px; } 

Si desea una cuadrícula de 12 columnas, solo tiene que repetir 100px 12 veces.

 .grid { display: grid; grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px; grid-column-gap: 20px; } 

Sí, el código no es hermoso, pero no nos preocupa optimizar la calidad del código (todavía), todavía estamos pensando en el diseño. CSS Grid hace que sea muy fácil para cualquier persona, incluso para un diseñador sin conocimientos de codificación, crear una cuadrícula en la web.

Si desea crear columnas de cuadrícula con diferentes anchos, solo tiene que especificar el ancho deseado en su declaración grid-template-columns y listo.

 .grid { display: grid; grid-template-columns: 100px 162px 262px; grid-column-gap: 20px; } 

Hacer que las cuadrículas respondan

Ninguna discusión sobre CSS Grid está completa sin hablar sobre el aspecto receptivo. Hay varias formas de hacer que CSS Grid responda. Una forma (probablemente la forma más popular) es usar la unidad fr . Otra forma es cambiar el número de columnas con consultas de medios.

fr es una longitud flexible que representa una fracción. Cuando usa la unidad fr , los navegadores dividen el espacio abierto y asignan las áreas a las columnas según el múltiplo fr . Esto significa que para crear cuatro columnas del mismo tamaño, escribirías 1fr cuatro veces.

 .grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-column-gap: 20px; } 

Hagamos algunos cálculos para comprender por qué se crean cuatro columnas del mismo tamaño .

Primero, supongamos que el espacio total disponible para la cuadrícula es 1260px .

Antes de asignar el ancho a cada columna, CSS Grid necesita saber cuánto espacio hay disponible (o sobrante). Aquí, resta las declaraciones de grip-gap de 1260px . Dado que cada espacio es de 20px , nos quedan 1200px para el espacio disponible. (1260 - (20 * 3) = 1200) .

A continuación, suma los múltiplos de fr . En este caso, tenemos cuatro múltiplos de 1fr , por lo que los navegadores dividen 1200 1200px entre cuatro. Cada columna es por lo tanto 300px . Es por eso que obtenemos cuatro columnas iguales.

Sin embargo, las cuadrículas creadas con la unidad fr no siempre son iguales .

Cuando usa fr , debe tener en cuenta que cada unidad fr es una fracción del espacio disponible (o sobrante).

Si tiene un elemento que es más ancho que cualquiera de las columnas creadas con la unidad fr , el cálculo debe realizarse de manera diferente.

Por ejemplo, la siguiente cuadrícula tiene una columna grande y tres columnas pequeñas (pero iguales), aunque se creó con grid-template-columns: 1fr 1fr 1fr 1fr .

Después de dividir 1200px en cuatro y asignar 300px a cada una de las columnas 1fr , los navegadores se dan cuenta de que el primer elemento de la cuadrícula contiene una imagen 1000px . Dado que 1000px es mayor que 300px , los navegadores optan por asignar 1000px a la primera columna.

Eso significa que necesitamos volver a calcular el espacio sobrante.

El nuevo espacio sobrante es 1260px - 1000px - 20px * 3 = 200px ; estos 200px luego se dividen por tres según la cantidad de fracciones sobrantes. Cada fracción es entonces 66px . Con suerte, eso explica por qué las unidades fr no siempre crean columnas de igual ancho.

Si desea que la unidad fr cree columnas de igual ancho cada vez, debe forzarla con minmax(0, 1fr) . Para este ejemplo específico, también querrá establecer la propiedad max-width de la imagen en 100%.

Nota : Rachel Andrew ha escrito un artículo increíble sobre cómo los diferentes valores de CSS (contenido mínimo, contenido máximo, fr, etc.) afectan el tamaño del contenido. ¡Vale la pena leerlo!

Cuadrículas de ancho desigual

Para crear cuadrículas con anchos desiguales, simplemente varía el múltiplo de fr. A continuación se muestra una cuadrícula que sigue la proporción áurea, donde la segunda columna es 1,618 veces la primera columna y la tercera columna es 1,618 veces la segunda columna.

 .grid { display: grid; grid-template-columns: 1fr 1.618fr 2.618fr; grid-column-gap: 1em; } 

Cambio de cuadrículas en diferentes puntos de interrupción

Si desea cambiar la cuadrícula en diferentes puntos de interrupción, puede declarar una nueva cuadrícula dentro de una consulta de medios.

 .grid { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 1em; } @media (min-width: 30em) { .grid { grid-template-columns: 1fr 1fr 1fr 1fr; } }

¿No es fácil crear grillas con CSS Grid? Los primeros diseñadores y desarrolladores habrían matado por tal posibilidad.

Cuadrículas basadas en altura

Anteriormente, era imposible hacer cuadrículas basadas en la altura de un sitio web porque no había manera de que pudiéramos saber qué tan alto era la ventana gráfica. Ahora, con las unidades de ventana gráfica, CSS Calc y CSS Grid, incluso podemos crear cuadrículas basadas en la altura de la ventana gráfica.

En la demostración a continuación, creé cuadrados de cuadrícula según la altura del navegador.

Jen Simmons tiene un excelente video que habla sobre el diseño del cuarto borde, con CSS Grid. Te recomiendo mucho que lo veas.

Colocación de elementos de cuadrícula

Posicionar los elementos de la cuadrícula era un gran dolor en el pasado porque tenía que calcular la propiedad del margin-left .

Ahora, con CSS Grid, puede colocar elementos de cuadrícula directamente con CSS sin cálculos adicionales.

 .grid-item { grid-column: 2; /* Put on the second column */ } 

Incluso puede decirle a un elemento de la cuadrícula cuántas columnas debe ocupar con la palabra clave span .

 .grid-item { /* Put in the second column, span 2 columns */ grid-column: 2 / span 2; } 

inspiraciones

CSS Grid le permite diseñar las cosas tan fácilmente que puede crear muchas variaciones del mismo sitio web rápidamente. Un buen ejemplo es la página de inicio personal de Lynn Fisher.

Si desea obtener más información sobre lo que puede hacer CSS Grid, consulte el laboratorio de Jen Simmon, donde explora cómo crear diferentes tipos de diseños con CSS Grid y otras herramientas.

Para obtener más información sobre CSS Grid, consulte los siguientes recursos:

• Master CSS Grid, Rachel Andrew y Jen Simmons Videotutoriales
• Layout Land, Jen Simmons Una serie de videos sobre diseño
• Taller de diseño CSS, Rachel Andrew Un curso de diseño CSS
• Aprenda CSS Grid, Jonathan Suh Un curso gratuito sobre CSS Grid.
• Grid critters, Dave Geddes Una forma divertida de aprender CSS Grid

Diseñar con formas irregulares

Estamos acostumbrados a crear diseños rectangulares en la web porque el modelo de caja CSS es un rectángulo. Además de los rectángulos, también hemos encontrado formas de crear formas simples, como triángulos y círculos.

Hoy, no necesitamos detenernos allí. Con formas CSS y clip-path a nuestra disposición, podemos crear formas irregulares sin mucho esfuerzo.

Por ejemplo, Aysha Anggraini experimentó con un diseño inspirado en una tira cómica con CSS Grid y clip path .

Hui Jing explica cómo usar formas CSS de una manera que permita que el texto fluya a lo largo de la curva de Beyonce.

Si desea profundizar más, Sara Soueidan tiene un artículo para ayudarlo a crear diseños no rectangulares.

Las formas CSS y clip-path le brindan infinitas posibilidades para crear formas personalizadas únicas para sus diseños. Desafortunadamente, en cuanto a la sintaxis, las formas CSS y clip-path no son tan intuitivas como CSS Grid. Afortunadamente, tenemos herramientas como Clippy y Shape Path Editor de Firefox para ayudarnos a crear las formas que queremos.

Cambiar el flujo de texto con el writing-mode CSS

Estamos acostumbrados a ver las palabras fluir de izquierda a derecha en la web porque la web está hecha predominantemente para personas de habla inglesa (al menos así es como empezó).

Pero algunos idiomas no fluyen en esa dirección. Por ejemplo, las palabras chinas pueden leerse de arriba hacia abajo y de derecha a izquierda.

El writing-mode CSS hace que el texto fluya en la dirección nativa de cada idioma. Hui Jing experimentó con un diseño basado en chino que fluye de arriba hacia abajo y de derecha a izquierda en un sitio web llamado Penang Hokkien. Puedes leer más sobre su experimento en su artículo, “The One About Home”.

Además de los artículos, Hui Jing tiene una gran charla sobre tipografía y writing-mode , "Cuando Oriente se encuentra con Occidente: tipografía web y cómo puede inspirar diseños modernos". Os animo mucho a verlo.

Incluso si no diseña para idiomas como el chino, no significa que no pueda aplicar el writing-mode CSS al inglés. En 2016, cuando creé Devfest.asia, flexioné un pequeño músculo creativo y opté por rotar el texto con writing-mode .

El laboratorio de Jen Simmons también contiene muchos experimentos con writing-mode . Recomiendo encarecidamente echarle un vistazo, también.

El esfuerzo y el ingenio dan para mucho

Aunque las nuevas herramientas CSS son útiles, no necesita ninguna de ellas para crear sitios web únicos. Un poco de ingenio y algo de esfuerzo hacen mucho.

Por ejemplo, en Super Silly Hackathon, Cheeaun gira todo el sitio web en -15 grados y te hace parecer tonto al leer el sitio web.

Darin Senneff hizo un avatar de inicio de sesión animado con algo de trigonometría y GSAP. Mira lo lindo que es el mono y cómo se tapa los ojos cuando te enfocas en el campo de la contraseña. Similar al formulario de inicio de sesión interactivo, también hay una calculadora interactiva realmente agradable que ayuda a estimar la cantidad de ingresos perdidos al usar servicios externos como JustEat.

Cuando creé la página de ventas para mi curso, Aprenda JavaScript, agregué elementos que hacen que el estudiante de JavaScript se sienta como en casa.

Terminando

Un diseño web único no se trata solo de diseño. Se trata de cómo el diseño se integra con el contenido. Con un poco de esfuerzo e ingenio, todos podemos crear diseños únicos que hablen a nuestro público. Las herramientas a nuestra disposición hoy en día facilitan nuestro trabajo.

La pregunta es, ¿te importa lo suficiente como para hacer un diseño único? Espero que lo hagas.