Crea tu sistema de diseño, parte 4: Espaciado

En este artículo, veremos cómo configurar un sistema de espaciado en CSS y cómo aprovechar las unidades relativas para manejar la capacidad de respuesta.

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

¡Hemos lanzado el editor de espacios! Una herramienta de diseño web que le permite generar una escala de espaciado y establecer reglas receptivas.

Configuración del sistema de espaciado con variables CSS

El primer paso para establecer un sistema de espaciado es crear una escala de valores (espaciado). Para crear una escala de valores no lineales, necesita 1) una unidad o valor base y 2) un multiplicador. Ya hemos hablado de crear una escala modular en nuestro artículo sobre tipografía web.

Un enfoque básico para el espaciado se vería así:

El fragmento anterior describe un sistema de espaciado basado en la secuencia de Fibonacci (cada valor se encuentra sumando los dos números anteriores).

Nota: La primera vez que leí sobre la aplicación de la secuencia de Fibonacci a una escala de valores de espaciado fue en este excelente artículo de The Scenery.

La desventaja de un enfoque básico es que, bueno ... es básico. Si queremos cambiar un solo valor de espaciado, tenemos que hacer los cálculos y actualizar todos los demás valores manualmente.

Intentemos tener algo de control sobre el sistema. Podemos introducir una variable para definir el número de unidad y usar la función calc () para obtener los valores de espaciado.

Nos estamos acercando! En el ejemplo anterior, hemos definido cada valor de espacio multiplicando el número de unidad por un multiplicador. Tenga en cuenta que la secuencia de Fibonacci todavía se aplica a los multiplicadores. Ahora, si queremos actualizar todo el sistema, podemos editar el valor unitario.

A continuación, eliminemos la unidad absoluta y reemplácela con la unidad em. Para hacerlo, podemos reemplazar 16px con 1em:

Lo que parece un pequeño ajuste, en realidad cambia mucho. La unidad em es una unidad relativa igual al tamaño de fuente actual. En la mayoría de los navegadores, el tamaño de fuente predeterminado (antes de aplicar el estilo CSS) es de 16 píxeles. Por lo tanto, podemos suponer 1em = 16px. Sin embargo, si edita el tamaño de fuente de un elemento, 1em ya no es 16px (para ese elemento), pero es igual al nuevo tamaño de fuente. Lo que parece una falta de control es un poderoso atajo de respuesta. Déjame mostrarte por qué.

Si ha seguido esta serie en sistemas de diseño, sabe que hemos creado un sistema de tipografía donde todos los tamaños de fuente se entrelazan y se obtienen multiplicando una variable de tamaño base de texto (igual a 1em) por una proporción. Eso significa que la variable text-base-size es el controlador de todo el sistema de tipos. Si aumenta el tamaño de base de texto en una consulta de medios específica, todas las variables de tamaño de texto cambian en consecuencia.

Al actualizar solo una variable, obtienes esto:

¡No solo eso! Dado que la unidad de espaciado es igual a 1em, y todos los demás valores de espaciado son multiplicadores del valor de la unidad, cuando actualizamos la variable de tamaño base de texto, también afectamos el espaciado.

Mire cómo este método afecta la tipografía y el espaciado al mismo tiempo:

Todavía estamos actualizando una sola variable (text-base-size). ¡No se necesitan consultas de medios adicionales hasta ahora! Todo lo que tiene que hacer para aprovechar este poderoso enfoque de la capacidad de respuesta es usar las variables de espaciado para establecer rellenos y márgenes a nivel de componente:

¿Qué sucede si desea actualizar todos los valores de espaciado a la vez, sin tener que cambiar la variable de tamaño base de texto? Simplemente actualice la variable de unidad de espacio:

Es cierto que al adoptar un método como este, pierde parte de su control "visual", pero está a favor de la simplicidad y la facilidad de mantenimiento. Es cierto que no podrá establecer valores perfectos de píxeles, pero tendrá que responder a un nivel completamente nuevo: la mayor parte del trabajo consistirá en establecer una escala sólida de valores para el espaciado y la tipografía. Luego puede editar 2–3 variables en consultas de medios específicas para crear un efecto en cascada, en lugar de ajustar todos los componentes y subelementos.

Cómo establecer un relleno predeterminado para todos los componentes

Habrá casos en los que necesite diferentes componentes para tener el mismo relleno. Establecer una variable para el relleno predeterminado de los componentes es un truco que aprendí después de pasar mucho tiempo buscando un valor de relleno oculto en algún lugar de mis archivos CSS.

Para ser claros, me estoy refiriendo a esos componentes en bloque, "tipo contenedor".

Aquí hay un ejemplo:

Volviendo a nuestro archivo _spacing.scss, incluyamos la variable de relleno del componente:

Al hacerlo, crea otro "atajo de desarrollo": si necesita aplicar relleno a un componente, no necesita verificar qué variable de espaciado se ha utilizado en otros casos similares. Simplemente use la variable de relleno de componentes.

Clases de utilidad de margen

Si bien es seguro incluir el relleno directamente en el componente CSS, los márgenes pueden causar problemas de diseño. Una vez más, nos estamos refiriendo a los componentes principales, esos bloques que definen su diseño principal (no un componente