Cree su sistema de diseño, parte 2: Cuadrícula y diseño

Elegir cómo manejar los diseños y el posicionamiento del contenido es probablemente una de las primeras decisiones que tomará al crear un sistema de diseño.

Definir la cuadrícula significa crear el sistema para estructurar su contenido, ya sea un solo componente o un diseño de página.

En este artículo, veremos cómo se puede implementar un sistema de cuadrícula y cómo se pueden usar algunas técnicas CSS para crear diseños específicos.

Esto es lo que cubriremos:
1) Diseño con un número de columnas generado automáticamente - usando CSS Grid;
2) Diseño unidimensional - usando Flexbox;
3) Diseño bidimensional: utilizando CSS Grid;
4) Diseño bidimensional con elementos superpuestos, utilizando CSS Grid.

Este artículo es parte de una serie sobre sistemas de diseño inspirados en nuestra biblioteca de componentes web. La biblioteca se basa en un sistema sólido de globales CSS. ¡Así que somos nosotros compartiendo las cosas que hemos aprendido estableciendo el estilo global de nuestra biblioteca!

Serie de artículos:
- Parte 1: tipografía
- Parte 2: Cuadrícula y diseño
- Parte 3: colores
- Parte 4: Espaciado
- Parte 5: iconos
- Parte 6: Botones

1 - Diseño con un número de columnas generado automáticamente

Digamos que tiene una galería de productos que desea diseñar en una cuadrícula: todos sus artículos deben tener el mismo ancho (son instancias del mismo componente 'producto', por lo que tienen la misma dimensión) y tienen un ancho mínimo para que el diseño no se rompa; suponga que desea, en diferentes tamaños de pantalla, el número máximo de elementos por fila; algo así como la biblioteca CodyHouse (cambie el tamaño de la página para ver el cambio en el número de elementos).

Sería ideal encontrar una manera de determinar automáticamente este número máximo de elementos sin tener que agregar un nuevo código CSS en diferentes consultas de medios.

Esto se puede hacer usando CSS Grid.

Comencemos creando una mezcla de cuadrícula (la reutilizaremos también para los diseños 3 y 4).

Este mixin se usa para inicializar el contenedor de la cuadrícula (con la cuadrícula de visualización) y establecer el espacio de la cuadrícula (que es el espacio libre entre dos elementos adyacentes).

Hemos incluido el código CSS Grid dentro de una regla @supports para apuntar a los navegadores que admiten Grid (dejando de lado también los navegadores que admiten la antigua especificación CSS Grid, como IE 11).

Ahora podemos definir el mixin que creará nuestra galería; El ancho mínimo de los elementos será el único argumento de este mixin:

La función minmax nos permite establecer un ancho mínimo para nuestros elementos, mientras que la función repeat () se encarga de crear realmente la cuadrícula.

Ahora podemos usar estos mixins así:

Y aquí hay un ejemplo de estos mixins en acción:

Los mixins que definimos anteriormente no funcionarán en IE y versiones anteriores de Edge (<= 15). Su galería aún sería accesible, pero sus artículos aparecerían uno por fila (100% de ancho).

Si necesita proporcionar un mejor respaldo, puede usar la propiedad flotante para recrear su galería, pero no podrá cambiar el número de elementos por fila en diferentes tamaños de pantalla: deberá establecer un número fijo de elementos por fila (este número se pasará como segundo argumento al gridAuto () mixin).

Esto es en lo que se convierte el gridin mixin con la adición alternativa:

Las propiedades CSS definidas dentro de la regla @supports son las que se aplican cuando el navegador admite CSS Grid (la nueva especificación); mientras que las propiedades definidas fuera de @supports se aplican en todos los navegadores (y es por eso que, dentro de la regla @supports, tuvimos que agregar un estilo adicional para sobrescribir esas propiedades).

El gridAuto () mixin se convierte en:

El mixin ahora acepta dos argumentos: el primero es el ancho mínimo de los elementos en la galería (el mismo que antes, se usará solo si los navegadores admiten CSS Grid), el segundo (que es opcional, el valor predeterminado es 3 ) es el número de elementos por fila en los navegadores que no admiten CSS Grid (donde se aplica el respaldo).

2— Diseño unidimensional

Este es probablemente el diseño más fácil que podemos crear: tenemos elementos que queremos organizar en columnas, con la opción de personalizar su ancho y aún así poder distribuir el espacio entre ellos por igual.

Existen pocas técnicas que podemos usar para implementar este tipo de diseño. Vamos a utilizar Flexbox en combinación con clases de utilidad para personalizar el ancho de los elementos.

Este enfoque ha existido por mucho tiempo. Es útil, pero si no desea utilizar clases de utilidad en su HTML (algo así como col - 1, col - 5,…), entonces un método diferente es el que describo en la sección 3, donde creamos el mismo diseño usando CSS Grid.

Antes de definir nuestras clases de cuadrícula, establezcamos una variable que usaremos como espacio de cuadrícula:

Definamos una clase para nuestro contenedor de cuadrícula:

Inicializamos nuestro contenedor flex (usando display flex) y permitimos que los niños se ajusten en varias líneas si es necesario (usando la propiedad flex-wrap).
Los márgenes negativos se agregan para equilibrar el relleno que usamos para crear el espacio de la cuadrícula (consulte la definición de la clase .col a continuación) para que no quede espacio vacío entre el elemento .flex-grid y su contenedor.

Nuestros elementos de la cuadrícula tendrán una clase .col:

Usamos el relleno para crear el espacio entre los elementos y el clip de fondo para que el color de fondo / imagen del elemento .col no se aplique al relleno (dejando el espacio visible).

No necesita usar la propiedad de clip de fondo si no planea agregar un color / imagen de fondo a su elemento .col (o si el elemento .col tiene un elemento secundario al que puede aplicar este estilo de fondo).

Por defecto, todos los elementos .col tienen un ancho del 100% (base flexible 100%). Podemos usar clases para cambiar ese valor de ancho:

La función de ancho redondo se usa para redondear el ancho de las columnas a un número con 2 decimales (esto evita que el diseño se rompa en IE).

Esto crea las clases .col - 1 hasta .col - 12 (puede cambiar el valor de la variable $ grid-columnas si no está utilizando una cuadrícula de 12 unidades).

Si desea crear un diseño con dos elementos, el primero con 9 de las 12 columnas disponibles y el segundo con las 3 restantes, puede usar algo como:

También puede definir diferentes clases para diferentes consultas de medios si desea cambiar el ancho de sus elementos en diferentes tamaños de pantalla. Algo como:

Aquí hay un ejemplo de las clases flexibles en acción:

Hemos decidido incluir este sistema de cuadrícula en nuestra biblioteca, debido a su facilidad de uso. Sin embargo, es opcional, puede usar el método que se describe a continuación (que no depende de las clases de utilidad) si lo prefiere.

3 - Diseño bidimensional

En el diseño 2, consideramos el caso en el que necesitábamos controlar el ancho de los elementos en nuestra fila. No consideramos la altura de los elementos en absoluto.

Si queremos crear un diseño bidimensional donde también podamos controlar la altura de nuestros elementos, entonces CSS Grid es probablemente la mejor solución.

Aquí hay un ejemplo de un diseño que puede crear utilizando esta técnica:

Volveremos a utilizar el mixin grid (definido en la sección 1) y agregaremos un segundo mixin gridLayout ().
Este nuevo mixin aceptará, como argumento, una lista de pares de números:

Para cada elemento en su diseño, deberá pasar un par de números (en el ejemplo anterior, estoy pasando 4 pares, lo que significa que nuestro diseño está compuesto por 4 elementos). Para cada par de números, el primero será el número de columnas que debe ocupar el elemento, el segundo el número de filas.

En el código anterior, estamos diciendo: el primer elemento en el diseño tiene que ocupar 7 columnas y 2 filas; el segundo elemento 5 columnas y 1 fila; lo mismo para el tercer elemento; la última 12 columnas (100% de ancho) y 1 fila.

Veamos cómo se ve el mixin:

Primero, usamos grilla-plantilla-columnas para definir nuestra grilla de columnas; Esto creará una plantilla de 12 columnas, todas con el mismo ancho.

Observe que no hemos definido las cuadrículas de plantilla de cuadrícula (o las filas automáticas de cuadrícula). Esto se debe principalmente a que la altura de la fila depende del tipo de contenido que desea mostrar: puede decidir tener filas de una altura fija, las filas que son un porcentaje de la ventana gráfica o simplemente dejar que su contenido determine la altura. Puede especificar esto en su clase cuando llame al mixin.

El ciclo 'each' es donde se asignan los elementos: para cada uno de los pares pasados ​​al mixin, tomamos el elemento correspondiente (usando el selector de enésima clase) y lo colocamos en nuestra cuadrícula (usando la palabra clave span )

Aquí hay un ejemplo del mixin en acción:

Nota: no se requiere el segundo número en cada par (en el mixin, verificamos si se pasa el segundo valor antes de establecer la propiedad grid-row-end).

Pasar solo un número por elemento le permitirá crear un diseño unidimensional; Esta es una alternativa al método descrito en la sección 2 (Flexbox + clases de utilidad).

Podemos modificar el mixin gridLayout () para agregar una alternativa para los navegadores que no admiten CSS Grid. Solo tenga en cuenta que, con el respaldo, no podrá controlar la altura de sus artículos.

4 - Diseño bidimensional con elementos superpuestos

Este es un caso de diseño bastante específico: supongamos que desea crear un diseño bidimensional (como hicimos con el caso 3, donde puede establecer tanto el ancho como la altura de sus elementos) pero desea controlar la posición de inicio / finalización de su elementos también (para que puedan superponerse).

Con la combinación gridLayout (), los elementos se colocan automáticamente en la cuadrícula sin superposición. No podrás crear algo como esto:

Podemos crear un nuevo mixin gridAdvanced () que llevará nuestro diseño un paso más allá; así es como lo vamos a usar:

Esta vez, necesitaremos pasar, para cada elemento de nuestro diseño, cuatro números: los dos primeros son la posición inicial y final del elemento dentro de las columnas de la cuadrícula, mientras que los dos últimos son la posición inicial y final de la fila.

En el ejemplo anterior, tenemos 3 elementos: el primero comienza en la columna 1 y termina en la columna 8 (lo que significa que ocupa 7 columnas en nuestro diseño -> recuerde que la columna 8 marca el final del elemento, por lo que no es incluido) y comienza en la fila 1 y termina en la fila 3 (2 filas); la segunda toma las mismas columnas pero comienza en la fila 3 y termina en la fila 5 (2 filas); la tercera comienza en la columna 5 y ocupa todas las columnas restantes (-1 significa ir hasta la columna 12 pero incluirla también) y comienza en la fila 2 y termina en la fila 4 (2 filas).

Aquí está nuestro mixin:

Esto es bastante similar al gridLayout () uno; esta vez, sin embargo, estamos usando la cuadrícula-columna (/ fila) -start / end para especificar la posición de nuestros elementos.

Aquí hay un ejemplo del mixin en acción:

También podemos proporcionar una alternativa para este mixin; tenga en cuenta que no podrá crear el efecto de superposición ni personalizar la altura de los elementos.

Eso es todo lo que tengo que compartir sobre cómo estamos configurando el sistema de cuadrícula para la biblioteca CodyHouse. Como siempre, ¡estamos abiertos a sugerencias! Cualquier comentario es bienvenido.

¡Espero que hayas disfrutado el artículo! Para obtener más pepitas de diseño web, síganos aquí en Medium o Twitter.