En el pasado hemos echado un vistazo a varios sistemas de cuadrícula CSS. También hemos analizado cómo LESS.js puede agregar mucha flexibilidad a la forma en que diseña las páginas web. Hoy vamos a combinar estas dos ideas y crear un sistema de cuadrícula que utiliza MENOS.
Sigue leyendo para ver por qué en la Tierra haríamos tal cosa. Si entiende el concepto, también puede omitir el tutorial e ir directamente a la descarga. Empecemos.
Demo y descarga
Siéntase libre de descargar los archivos y modificarlos / usarlos como desee. Solo recuerde compilar su archivo LESS en un archivo CSS antes de usar el marco en un sitio en vivo.
Ver ejemplo
Descargar LESS CSS Grid
¿Por qué MENOS?
Sin duda, muchos de ustedes se preguntan por qué alguien combinaría un marco CSS con MENOS. ¿Aquí tenemos dos herramientas separadas e igualmente confusas que la mitad de la compañía de desarrolladores odia o no entiende y decido ir y juntarlas para crear un enorme y confuso lío? Esto seguramente dará cuenta de un disturbio.
Sin embargo, a pesar del hecho de que muchos desarrolladores nunca utilizarían una herramienta de este tipo, un sistema de cuadrícula manejado por MENOS tiene mucho sentido. Actualmente, los sistemas de red son bastante rígidos. Por lo general, elige entre un par de descargas diferentes o utiliza un generador de cuadrículas en línea para modificar sus opciones. Sin embargo, una vez que ya tienes tu descarga, puede ser un verdadero dolor modificar la forma en que funciona la cuadrícula.
Debido a que LESS le permite insertar variables en su CSS, podemos usarlo para crear un marco que sea fácilmente personalizable durante la etapa de desarrollo. El objetivo será crear algo que permita anchos de cuadrícula personalizados con muy poco esfuerzo.
El sistema de cuadrícula que construiremos hoy se centrará en dos variables que se ven en todos los demás sistemas: ancho de columna y ancho de canal. Conjuntamente, estos dos constituyen la base del aspecto general de la cuadrícula y, de hecho, son la fuente principal de muchos argumentos. Si los desarrolladores no pueden decidir sobre el ancho que deben tener las columnas y los canales, digo que dejemos abierto para que cada desarrollador decida por proyecto.
En un nivel práctico, esto significa que podría usar el mismo sistema de cuadrícula para 10 proyectos diferentes y obtener 10 resultados muy diferentes. Esto va un largo camino hacia el alivio de parte de la estructura rígida impuesta en sus diseños por un sistema de cuadrícula determinado.
Al final, deberíamos tener un sistema que permita al desarrollador elegir un ancho de columna personalizado y un ancho de canal que cambiará todo el flujo del diseño cambiando solo dos números en nuestro CSS.
¿Soy la primera persona en intentar esto?
Con toda honestidad, probablemente no sea la primera persona en combinar LESS y un marco CSS. Sin embargo, sigue siendo una gran experiencia de aprendizaje que, al final, le proporcionará una mejor comprensión de cómo funcionan ambas herramientas.
Primeros pasos: la cuadrícula de 1Kb
En lugar de construir todo el proyecto desde cero, decidí buscar un sistema de red existente y modificarlo para que funcione con MENOS. Esto funcionará con cualquier sistema, pero en aras de la simplicidad, en este tutorial elegí la cuadrícula de CSS de 1Kb.
La razón por la que elegí este sistema es obvia: su tamaño. 960 GS y Blueprint CSS son buenos y elegantes, pero son bastante difíciles de manejar y tardarían mucho más en integrarse con MENOS. Con la cuadrícula de 1Kb, podemos ver fácilmente todos los CSS de una sola vez y comprender completamente los cambios sin una explicación demasiado extenuante.
De hecho, aquí está el CSS completo para la cuadrícula de 1Kb a 960px de ancho con 12 columnas y un ancho de canal de 20px (10px en cada lado).
¡Eso es todo al respecto! Me encanta la simplicidad de los sistemas de cuadrícula más pequeños sin toda la pelusa adicional del marco, como los restablecimientos de CSS, los estilos de texto y demás. Esto proporciona el punto de partida perfecto para nuestro experimento LESS.
Trabajando con MENOS
Si necesita una actualización de LESS.js, consulte nuestro reciente tutorial. Necesitará tener un conocimiento básico de MENOS y cómo trabajar con él para continuar, pero para aquellos de ustedes que al menos lo han visto antes, les explicaré brevemente lo que necesita saber.
Utilice .LESS no .CSS
El archivo CSS que cree debe tener una extensión .LESS en lugar del típico .CSS. Recuerde vincular correctamente a este archivo en la parte principal de su HTML.
Además, deberá insertar un enlace al archivo LESS JavaScript. Para facilitar las cosas, simplemente copie y pegue las dos líneas a continuación:
Cuando hayas terminado, querrás compilar tu archivo .LESS en un archivo .CSS. Esto suena complicado pero en realidad es un proceso completamente automatizado que usa Less.app.
Declarando variables
En MENOS, las variables se declaran usando el? @? símbolo. Al igual que en JavaScript, puede realizar operaciones matemáticas en sus variables de varias maneras.
Luego puede insertar variables en cualquier lugar donde normalmente ubicaría el valor que contiene.
Las matemáticas
Antes de comenzar a modificar la cuadrícula de 1Kb, debemos entender cómo funciona. En nuestra versión actual hay 12 columnas, cada una con un ancho de 60 px y una canaleta de 10 px en los lados izquierdo y derecho.
Es un poco confuso, pero de alguna manera todo esto tiene que sumar un total de 960px de ancho. Afortunadamente, hay una herramienta en línea asombrosa y gratuita que puede ayudarnos a descubrir todas las cuestiones específicas: Instacalc.
Conoce Instacalc
Instacalc es una excelente calculadora en línea que es perfecta para los programadores, no solo por los resultados que se actualizan instantáneamente, sino porque le permite usar variables y ver fácilmente si su matemática está funcionando de la manera que desea.
A continuación, usé Instacalc para trazar las variables que necesitaremos en nuestro archivo LESS comenzando con los números estándar de 1Kb. Recuerde que queremos que todo el sistema dependa de dos valores para que solo se necesite un segundo para personalizar.
Incluso en esta forma, las matemáticas pueden ser un poco confusas, pero en realidad es bastante simple. Primero, establecemos el ancho de nuestras columnas en 60 y el ancho de nuestro canalón en 10. Luego, simplemente sumamos el ancho de las doce columnas más todo el ancho del canal (duplicamos el ancho del canal porque aparece en cada lado de cada columna). columna). Como puede ver, al final aterrizamos a la derecha en 960, lo que indica que hicimos todo bien.
Como puede ver en la imagen de abajo, ahora podemos cambiar los dos primeros valores a lo que queramos, y el resto se actualizará automáticamente. ¡Nuestro sistema de ancho variable está en funcionamiento!
Declarar las variables
Ahora que tenemos las variables y los cálculos matemáticos resueltos en un lugar donde podemos verlos trabajar, es hora de conectarlos a nuestro MENOS CSS. Inserte el siguiente fragmento de código en la parte superior de su archivo MENOS.
Como puede ver, esto es exactamente lo que hicimos con Instacalc. El ancho de nuestra columna se ha establecido en 60px, nuestro canal es 10px (lo que resulta en un canal de 20px) y nuestro ancho total es igual al ancho de los canales más el ancho de las columnas.
Todo lo que tendremos que hacer cada vez que queramos cambiar el marco es escribir nuevos valores para las dos primeras variables. El resto del marco se actualizará automáticamente según lo que hagamos a continuación.
Creando las Clases Grid
El siguiente paso es insertar las variables que acabamos de crear en las clases que conforman la cuadrícula de 1Kb. Aquí está el código original:
Para modificar esto, vamos a empezar simple. El ancho de la clase grid_1 simplemente se establece en la variable columnWidth. La clase grid_2 es el doble de ancha y ahora contiene espacio adicional para la nueva columna. Estas cantidades simplemente aumentan a medida que avanza: el multiplicador de ancho de columna aumenta en uno cada vez y el multiplicador de ancho de canal aumenta en dos cada vez.
Ahora, esto funciona tal como está, pero si quisiera simplificar más las cosas, podría usar un Mixin para manejar todo ese código desordenado. Esto es mucho más limpio en mi opinión:
Finalizar el CSS
Para finalizar el CSS, tenemos que insertar la variable gutter en el ancho de columna y la sección de fila anidada y la variable totalWidth en la clase de fila. Recuerde que todo el objetivo del ejercicio es reemplazar estos números estáticos con variables que se actualizarán automáticamente cada vez que realicemos un cambio en la columna y el ancho del canal.
¡Eso es! Hemos terminado completamente de esbozar nuestro marco.
Poniendolo todo junto
Ahora que hemos explicado todos los pasos, aquí está el archivo MENOS terminado en una sola toma:
Podemos conectar esto directamente en el documento HTML de muestra que viene con la cuadrícula de 1 KB para ver si todo funciona correctamente.
Avance
Si obtienes una vista previa de esto en el navegador, debería funcionar perfectamente.
Ahora intente ajustar esas dos primeras variables en el código a lo que desee y verifique el resultado. Por ejemplo, podemos cambiar el ancho de la columna a 80 y el margen a 50 para obtener un área de contenido más amplia con menos espacios en blanco.
Conclusión
Y ahí lo tienen, un sistema de cuadrícula flexible que se puede cambiar a cualquier ancho y tamaño de canalón reemplazando solo dos valores. Esto simplemente rasca la superficie del potencial aquí. Puede aplicar estos mismos principios a cualquiera y todos sus marcos favoritos.
Deje un comentario a continuación y háganos saber cómo cambiaría y mejoraría la cuadrícula LESS CSS. ¡También asegúrese de informarnos si extiende el concepto y hace algo genial con él!