Echemos un vistazo a lo que se necesita para construir una superposición de cuadrícula con CSS. Será receptivo, fácilmente personalizable y hará un uso intensivo de las variables CSS (conocidas con mayor precisión como “propiedades personalizadas CSS”). Si no está familiarizado con las propiedades personalizadas, le recomiendo leer ¿Cuál es la diferencia entre las variables CSS y las variables del preprocesador? y viendo la esclarecedora charla de Lea Verou sobre su uso.
Esta superposición de cuadrícula que estamos construyendo considerará una herramienta de desarrollador, como una herramienta solo para nosotros, no realmente para nuestros usuarios. Por lo tanto, no nos preocupemos demasiado por la compatibilidad con el navegador (si le importa, consulte caniuse… datos sobre propiedades personalizadas). Si bien es imposible preprocesar las propiedades personalizadas para que se comporten exactamente igual que el soporte nativo, si las usa como lo haría con las variables del preprocesador, herramientas como el complemento postCSS cssnext pueden transformarlas en CSS compatibles con navegadores más antiguos.
Prefacio
Hace un par de semanas, en el trabajo, simplifiqué las consultas de medios en uno de nuestros proyectos y agregué un componente de diseño basado en los mismos principios que Flexbox Grid. Algunos de mis compañeros diseñadores no entendieron completamente la capacidad de respuesta y la fluidez del mismo, así que creé una superposición de cuadrícula alternable para ayudarlos a visualizarlo.
Mi esperanza es que esta pueda ser una herramienta para ayudar en las conversaciones relacionadas con el diseño en nuestros equipos y asegurarnos de que no usamos demasiados anchos personalizados, rellenos, etc.
Terminología
Al trabajar como diseñador front-end, quiero que todos los desarrolladores y diseñadores hablen el mismo idioma (tanto como sea posible), así que elegí una terminología para las variables CSS con las que los diseñadores digitales también están familiarizados:
- columnas: Las divisiones verticales de la página.
- Canal: El espacio entre las columnas.
- Compensar: El espacio entre los lados de la ventana gráfica.
- Base: El ritmo vertical utilizado para el texto.
Hacer la cuadrícula
1) “Caja”
Usemos un pseudoelemento en el elemento para mostrar la cuadrícula encima de todo nuestro contenido. Queremos que la superposición funcione con un diseño fluido, por lo que le damos al elemento un ancho de `100% – (2 * offset)` y también un ancho máximo para que la superposición de cuadrícula no crezca más que nuestro diseño.
ver la pluma
2) Columnas
Si observa la cuadrícula, notará que el patrón repetitivo son pares de columnas+canalones. Estamos usando gradientes lineales repetitivos como background-image. Estableceremos el tamaño de la background-image a 100% + canalón haciendo el patrón repetitivo 100% / columnas de ancho y la columna real (100% / columnas) – canalón ancho.
ver la pluma
Como nota al margen, también intenté usar degradados lineales regulares con repetición de fondo para obtener líneas más perfectas en píxeles. No funcionó porque el redondeo de píxeles resultó en un ancho total imperfecto cuando el ancho del diseño no se podía dividir por el número de columnas.
3) Línea base
También dibujamos la línea de base usando degradados lineales repetitivos, pero es un poco más simple ya que no agregamos medianeras horizontales y queremos que sea solo una línea en lugar de un bloque.
Agreguemos también una variable de cambio de línea de base que nos permita cambiar la línea de base ligeramente hacia arriba o hacia abajo. Aplicamos el cambio de línea de base simplemente ajustando el background-position.
ver la pluma
4) Consultas de medios
Ahora que tenemos nuestra configuración básica, introduzcamos algunas consultas de medios. Si mira hacia atrás en las matemáticas que hemos usado hasta ahora, puede ver que nada de eso está vinculado a un número específico de columnas, ancho de medianil, etc.
Usamos un primer enfoque móvil y solo incluimos variables en las consultas de medios cuando queremos cambiarlas. Para dejar en claro a todos los que usan la superposición que hemos pasado un nuevo punto de interrupción, también cambiamos el color en cada punto de interrupción.
Recomiendo abrir el Pen en una nueva pestaña y ver cómo se comporta cuando cambia diferentes valores de variables y cuando cambia el tamaño de la ventana gráfica.
ver la pluma
Si hizo una nota mental en el paso 1 diciendo “¿pero qué pasa si quiero anchos de diseño específicos en puntos de interrupción específicos?” entonces ahora es cuando puede introducir fácilmente esa lógica configurando --max_width para cada consulta de medios.
5) Texto de ayuda
A los diseñadores les gusta pensar en maquetas para diferentes dispositivos, lo que generalmente es bueno, ya que es fundamental que un sitio web se vea increíble en esos diferentes dispositivos, pero a veces se olvidan de que el diseño en un iPad debería funcionar hacia arriba y/o hacia abajo. el siguiente punto de ruptura.
Los puntos de interrupción normalmente no se denominan “iPhone”, “Galaxy Note 🔥”, “iPad”, etc. por muchas razones, incluida la anterior. Un punto de interrupción indica dónde comienza un nuevo rango y no es específico del dispositivo.
Para que sea más obvio cómo se llaman nuestros puntos de interrupción, podemos agregar los nombres a nuestra superposición de cuadrícula.
ver la pluma
Sueño que un día un diseñador no regresa a un desarrollador y le dice: “necesitamos ajustar cómo se ve en el iPad”, sino que dice “necesitamos ajustar cómo se ve en el medio”.
ir más allá
¿Qué pasa con las líneas para las columnas y canaletas también? Fácil, es solo CSS. ¿Qué hay de agregar más puntos de interrupción? Fácil, es solo CSS. ¿Qué pasa si quiero diferentes colores? Fácil… lo entiendes. 😄
Puedes ver un ejemplo más avanzado aquí:
ver la pluma
Me encantaría recibir su opinión aquí o en el repositorio de GitHub, que también incluye una extensión de Chrome que utiliza este enfoque.