Guía del diseñador para Flexbox y Grid

Lo que los diseñadores necesitan saber sobre estas herramientas de diseño transformacional.

CSS ha recorrido un largo camino desde su introducción en 1996, pero las herramientas que tenemos disponibles para el diseño no han cambiado mucho. Los diseños de mesa eran increíblemente demasiado rígidos, los diseños basados ​​en flotadores eran básicamente un truco, los diseños basados ​​en posicionamiento no eran adaptables y ninguno podía manejar una gran complejidad de manera eficiente. No me malinterpreten: estos métodos nos llevaron muy lejos, pero no están destinados a propósitos de diseño complejos.

Las deficiencias de estos viejos métodos de diseño se han vuelto aún más evidentes con el diseño web receptivo, en el que es fundamental abrazar la fluidez de la web.

Con flexbox y grid, finalmente tenemos herramientas destinadas específicamente para el diseño que son más eficientes y carecen de hacks necesarios con los métodos de diseño anteriores. Desbloquean nuevas posibilidades para viejos problemas, habilitan cosas que antes no eran posibles y resuelven problemas reales que enfrentamos con un diseño web receptivo.

Flexbox

Flexbox, también conocido como cuadros flexibles CSS, es un nuevo método de diseño que nos brinda control de alineación que ningún otro método CSS puede producir. Sobresale en el "micro diseño": la capacidad de alinear, ordenar y distribuir espacio entre elementos en un contenedor, o alterar el ancho o la altura de un elemento para llenar mejor el espacio disponible.

Envoltura mejorada

En el diseño web receptivo, el ancho disponible varía a medida que el ancho de la vista cambia de tamaño. Esto puede llevar a un ajuste de contenido no deseado, especialmente cuando el contenido es más largo de lo previsto o el contenedor del contenido es demasiado estrecho. Probablemente todos lo hemos visto antes: el diseño representa la longitud de contenido 'ideal', pero tan pronto como se implementa y se agrega contenido real, el contenido pasa a la siguiente línea porque no había suficiente espacio o se escapa de su contenido. envase. Ambos no son ideales y pueden hacer que los diseños se rompan.

El problema no es estar seguro de que el espacio disponible siempre será lo suficientemente grande como para acomodar contenido que puede variar en longitud. Tradicionalmente, hemos utilizado las consultas de medios CSS para ajustar el diseño en puntos de interrupción específicos para mitigar problemas con el ajuste de contenido. Pero las consultas de medios no tienen en cuenta la longitud del contenido en sí, responden a un ancho o alto explícito. Esto a menudo da como resultado una cantidad excesiva de consultas de medios para controlar un contenido específico en puntos de interrupción explícitos.

Ejemplo de envoltura mejorada con Flexbox

Flexbox resuelve este problema al permitirnos aprovechar el espacio disponible y luego envolver el contenido cuando no es así. Este comportamiento de ajuste automático no solo es conveniente, sino que mejora la capacidad de mantenimiento porque no tenemos que depender del punto de interrupción para ajustar manualmente el estilo. El ejemplo anterior muestra este comportamiento: muestre la etiqueta de ubicación adyacente al título si hay suficiente espacio disponible y alinee la etiqueta de ubicación a la izquierda debajo del título si no hay suficiente espacio disponible.

Los métodos tradicionales como la flotación habrían dado como resultado que la etiqueta de ubicación permaneciera alineada a la derecha en ventanas gráficas más pequeñas, lo cual es menos que ideal. Puede corregir esto flotando la etiqueta a la izquierda en un punto de interrupción específico. El problema con este enfoque es que ahora depende de un punto de interrupción para cambiar el estilo de su contenido, que puede variar en longitud.

Espaciado y alineación mejorados

Cuando se trata de espaciado y alineación en CSS, hemos tenido que ser inteligentes para lograr cualquier cosa que no fuera el comportamiento predeterminado. Incluso los efectos que parecen triviales pueden ser difíciles en CSS, como la alineación vertical o la división equitativa del espacio entre los elementos, deben depender de soluciones o hacks. Algunas cosas son francamente imposibles de lograr.

Flexbox resuelve esto al permitir la distribución de espacio entre un número desconocido de elementos dentro de un área de ancho o alto desconocido, y alinear elementos en el eje X o Y. Funciona de manera muy similar a cómo las herramientas de diseño como Sketch o Illustrator pueden controlar el espaciado y la alineación, lo que permite el control que esperaríamos en la Web.

Ejemplo de distribución de espacio mejorada con Flexbox

Un gran ejemplo de este control se puede ver arriba: los elementos de navegación están distribuidos uniformemente, centrados verticalmente, y el primer y último elemento están al ras del borde del contenedor de navegación. Esto hubiera sido imposible utilizando métodos tradicionales como la aplicación de bloque en línea a los elementos, o confiando en el diseño de la tabla.

Orden de origen

El orden de origen se refiere al orden en que se muestran los elementos en la página según el lugar en el que aparecen en el HTML. De manera predeterminada, los elementos se mostrarán de arriba a abajo y de izquierda a derecha de manera predeterminada; su ancho estará determinado por su propiedad de visualización.

El orden de origen natural del documento debe guiarlo cuando piense en cómo su diseño se adaptará a varios anchos de ventana gráfica, pero a veces es útil modificarlo para reorganizar los elementos. La única forma de hacer esto antes de flexbox era ocultar el elemento y mostrar otro, lo que resulta en HTML duplicado, o confiar en un posicionamiento absoluto, que no siempre funciona cuando el contenido puede variar en tamaño. Con flexbox, simplemente puede modificar el orden de los elementos flexibles sin la necesidad de modificar la estructura HTML subyacente.

Ejemplo de pedido de artículos con Flexbox

El ejemplo anterior muestra el pedido en Flexbox: mostramos el logotipo en el lado izquierdo del pie de página, que es coherente con el encabezado. En ventanas pequeñas, mostramos las ubicaciones antes del logotipo. Este reordenamiento tiene sentido porque las ubicaciones son más importantes en este contexto.

Diseño de cuadrícula

El diseño de cuadrícula CSS es un sistema de diseño bidimensional creado específicamente para la Web. Nos da la capacidad de dividir la página en regiones que pueden definirse en términos de tamaño, posición y capa, lo que da como resultado un marco nativo increíblemente poderoso.

Adecuado para el propósito

CSS nunca ha tenido una verdadera herramienta de diseño para el propósito, por lo que hemos tenido que ser bastante creativos con la forma en que podemos aplicar una cuadrícula a nuestro trabajo. Los marcos de cuadrícula han surgido para satisfacer esta necesidad, pero no sin presentar sus propios problemas. Muchos de los marcos de cuadrícula más populares requieren una definición de diseño en el marcado, lo que puede conducir a la acumulación de código, problemas de mantenimiento y difumina la separación de la estructura del documento y la presentación.

Con la cuadrícula, ya no necesitamos un marco de cuadrícula: es un marco nativo integrado directamente en CSS. Nos permite definir el diseño en CSS de una manera intuitiva, al tiempo que abarca la fluidez predeterminada de la Web. Las capacidades de esta nueva herramienta de diseño son infinitas, y nos permite realizar diseños que solo eran posibles con Javascript antes de su llegada.

Ejemplo de diseño de cuadrícula

Diseños web de próxima generación

En lo que respecta al diseño, hemos estado atrapados en una rutina durante bastante tiempo. Los patrones establecidos y las limitaciones de las herramientas de diseño anteriores en CSS nos han llevado por el camino de la homogeneidad del diseño en el pasado. No tiene que ir muy lejos en la Web para detectarlo: encabezado, contenido principal, barra lateral, pie de página.

La llegada del diseño web receptivo ha iniciado algunas ideas nuevas para el diseño de la página, y con él comienzan a surgir algunos buenos patrones: deshacerse de la barra lateral, simplificar el diseño y centrarse en el contenido. Pero también estamos viendo surgir patrones que se han vuelto tan ubicuos que estamos escuchando la exclamación de que "todos los sitios web se ven iguales".

El diseño de cuadrícula nos permitirá salir de la rutina de diseño en la que hemos estado y nos dará las herramientas que necesitamos para crear los diseños de próxima generación. Finalmente podemos construir alrededor del contenido en lugar de forzarlo a patrones de diseño genéricos que se pueden encontrar en cualquier otro sitio web receptivo.

Una palabra de precaución

Es importante tener en cuenta que no todos los navegadores admiten funciones de cuadrícula y flexbox. Debemos tener en cuenta quién es nuestra audiencia para cada proyecto y determinar si la mayoría de los usuarios se beneficiarán de estas características más avanzadas, al tiempo que brindamos un respaldo razonable para los navegadores que no son compatibles. Es perfectamente aceptable proporcionar a los usuarios de navegadores antiguos una versión simplificada de su interfaz de usuario y mejorarla para los usuarios de navegadores más nuevos.

Hay más. Mucho más.

Solo hemos arañado la superficie de lo que pueden hacer flexbox y grid. Afortunadamente, hay una gran cantidad de excelente documentación disponible que toca las capacidades de estas nuevas herramientas de diseño. Aquí están algunos de mis favoritos:

Flexbox

Cuadrícula

Cualquiera que haya estado construyendo para la Web es dolorosamente consciente de varias limitaciones cuando se trata de diseño en CSS. Muchas veces, esto requería comprometer el diseño para que funcione como se esperaba en el desarrollo, o peor, confiar en Javascript para implementar el comportamiento que necesitábamos.

La llegada de flexbox y el diseño de cuadrícula señalan una nueva era de diseño en la Web. Debemos adoptar una nueva mentalidad cuando se trata de diseño para no estar limitado por los hábitos, inconvenientes y hacks del pasado. Adoptemos estas nuevas herramientas y renuevemos nuestra exploración de lo que es posible con el diseño en la Web.