Los marcos de diseño CSS son muy útiles, pero pueden ser un desastre. Siempre tiene que ajustarse al sistema de otra persona, tenga o no sentido para usted.
Hoy vamos a abandonar esta noción y construir un marco ultraligero que pueda implementarse en cualquier lugar y sin embargo, usted desea lograr diseños complejos de varias columnas en segundos. Usted construye este Marco de Frankenstein a medida que avanza, por lo que hay cero clases no utilizadas y absolutamente ningún código inflado. ¿Mencioné que también es fácil hacer que sea sensible? Sigue leyendo para ver cómo el monstruo cobra vida.
MENOS no menos
Para evitar confusiones, debo decir desde el principio que usaremos LESS, el lenguaje dinámico de CSS, que no tiene nada que ver con el marco menos denominado (donde se escribieron). molesto confundirnos?). Afortunadamente, el marco inferior ha sido repensado y se le ha cambiado el nombre a Sin marco.
En busca del sistema de diseño perfecto
Como cualquier lector leal de Design Shack sabe, me encantan los marcos CSS. No soy particularmente leal a ningún marco de trabajo, ni tampoco utilizo ninguno en proyectos reales, simplemente me encanta profundizar en ellos para ver cómo funcionan. Me fascinan incesantemente las formas inteligentes de manipular el proceso de diseño basado en CSS.
"Ni siquiera usas la mitad del código en un marco, pero lo dejas ahí de todos modos para asegurarte de que no estás arruinando nada".Durante el último año o dos he pensado mucho en lo que quiero en un sistema de diseño. Las respuestas son bastante básicas, pero son una tarea difícil. Primero, quiero algo que requiera una base de código muy pequeña. Los montículos y montículos de clases no semánticas y feas no hacen mucho por mí. El diseño completamente manual a menudo no es tan difícil que puedo justificar agregar sistemas de diseño inflados que nadie entiende a la mezcla.
A continuación, quiero algo que sea fácilmente personalizable a medida que lo implemento. Esta es la parte más complicada, ya que los marcos CSS no suelen ofrecer este tipo de flexibilidad. En su lugar, obtienes un archivo grande y un montón de nombres de clase con los que estás obligado a trabajar. Personalizar cualquier parte puede requerir horas de clasificación a través del código para asegurarse de que su ajuste no rompa nada. A menudo es el caso que ni siquiera usas la mitad del código en un marco, pero lo dejas ahí de todos modos para asegurarte de que no estás arruinando nada.
Rodando tus propias rejillas
Hace poco estuve muy cerca de mi sistema de diseño de sueños en mi artículo titulado Cómo rodar sus propios diseños de cuadrícula sobre la marcha sin un marco. En este artículo describí un sistema súper simple que usa un poco de código:
El uso de porcentajes para el ancho y el margen nos permite crear instantáneamente diseños de varias columnas con cero pelusa. Hay un solo problema con este método: las matemáticas. Para un diseño dado, necesita averiguar manualmente qué porcentaje de ancho de columna y porcentaje de margen debe usar. Primero tiene que dividir el ancho del contenedor por el número de columnas, luego tiene que multiplicar el margen de columna individual deseado por el número de columnas menos una, restar ese número del ancho total, luego dividir por el número total de columnas nuevamente. En realidad son matemáticas muy simples, pero suena como una pesadilla cuando lo explicas.
En el artículo, proporcioné una herramienta simple que le permite calcular los valores que necesita escribiendo solo dos números, pero siempre he deseado que esta función se pueda realizar directamente en el código para que pueda pegar simplemente un CSS. Fragmento que resuelve las matemáticas para ti. Desafortunadamente, CSS simplemente no es tan sorprendente. ¿O es eso?
MENOS: CSS con superpoderes
Otra cosa que me ha fascinado por un tiempo es MENOS. Realmente le da a sus superpoderes CSS, como variables, combinaciones, operaciones, etc. Con la reciente conversión a una biblioteca de JavaScript, LESS es más fácil que nunca de implementar durante una ejecución de prueba (todavía puede usar LESS.app para compilar el CSS real antes de publicar).
"Con LESS Parametric Mixins podemos construir un pequeño sistema de diseño que se puede cambiar para satisfacer sus necesidades a medida que lo implementa".He tenido ganas de insertar algo MENOS en mi sistema de cuadrícula de autoservicio porque sabía que finalmente haría que mi idea de hacer que CSS realizara los cálculos para nosotros sea posible. Además, con LESS Parametric Mixins podemos construir un pequeño sistema de diseño que se puede cambiar para que se adapte a sus necesidades a medida que lo implementa.
Finalmente me senté y me di cuenta de todo y estoy muy feliz con los resultados, así que hoy te mostraré cómo crear tu propio marco de diseño simple pero extremadamente elegante (e incluso sensible).
Advertencia: Altamente Experimental
El código con el que trabajaremos aún se encuentra en un estado muy original. Puede que no sea 100% perfecto y ciertamente no se ha probado lo suficiente como para apostar su cheque de pago. Este artículo sirve como prueba de concepto para una idea interesante, no como una sugerencia de que debe comenzar a utilizar este sistema de forma repentina en su trabajo diario. Dicho esto, es super divertido, así que definitivamente querrás probarlo.
Tenga en cuenta que leer mi artículo anterior sobre Cómo rodar sus propias cuadrículas lo ayudará enormemente a comprender este artículo. Además, necesitarás un entendimiento fundamental de MENOS, ya que no tendré tiempo para enseñarlo aquí.
Conoce a Frankenstein
En lugar de construir esto una pieza a la vez, simplemente comencemos y observemos el producto terminado, ¿vale? Aquí está el sistema de diseño completo LESS-powered que he ideado. Parece un monstruo pero no temas, es bastante amigable.
¿Qué diablos?
Aquellos que no estén familiarizados con MENOS deberían estar bastante confundidos en este punto. Parecen clases, pero tienen un código realmente extraño. Esto se debe a que no son clases en absoluto sino LESS Parametric Mixins.
He diseñado cada uno de estos para trabajar como una función. Los implementa de manera muy similar a cómo implementaría una función de JavaScript, pasando valores personalizados en el camino. Explicaré brevemente cómo funciona cada uno.
setColumnWidth
Como mencioné anteriormente, hay una gran cantidad de cálculos matemáticos involucrados en la configuración manual de diseños basados en columnas. Esta función automatiza esta tarea directamente en tu CSS. Es una pieza de código bastante impresionante que quita todo el trabajo pesado de crear columnas equidistantes.
La línea superior contiene los dos valores que puede pasar configurados aquí con valores predeterminados arbitrarios: @columns, que es el número de columnas que desea tener, y @margin, que es la cantidad de espacio que desea entre las columnas. Al teclear solo estos dos números cuando implementas esta función, realizas todo tipo de hazañas increíbles. Pasa automáticamente a través de una serie de pasos matemáticos para calcular y configurar el ancho y el margen de la columna.
La implementación de esta función se ve así:
Esto establece nuestro número de columnas en cuatro y nuestro margen de columna en 4%. ¿Qué tan fácil es eso? Si desea volver a utilizarlo para crear una fila con 3 columnas y un margen del 5%, simplemente agregue esto:
setBigColumnWidth
Es bueno pretender que todos los diseños tienen columnas del mismo tamaño, pero simplemente no es el caso. Como resultado, necesitaremos una forma de combinar columnas. Básicamente, esto hace lo mismo que la última función, solo que toma el paso adicional de averiguar el tamaño de la columna expandida y el margen resultante cuando se combinan dos o más columnas.
Digamos que queremos un diseño de dos columnas, pero queremos que una de las columnas tenga el ancho de tres columnas individuales. Simplemente configuramos un diseño de cuatro columnas, luego agregamos el valor @combine de 3 para que nuestra única columna pueda ocupar el espacio de tres columnas.
Poniendolo todo junto
Si sigues conmigo, genial. Si estás perdido, esto debería aclararlo un poco. Vamos a configurar un poco de HTML para ver cómo funciona todo.
El HTML para una configuración de cuatro columnas
Para implementar este sistema, puede marcar su documento básicamente como lo haría normalmente. He configurado un? Principal? div y poner cuatro columnas de marcador de posición dentro, cada una con una clase especial. Dado que este sistema es super flexible y funciona como usted quiere, ¡Puedes nombrar tus clases e identificaciones como quieras! Semántico, no semántico o Ubbi Dubbi, depende de usted.
La parte importante es que cada columna recibe una clase a la que puede dirigirse y la primera columna recibe una? Primera? Clase para que podamos borrar su margen izquierdo. Este es un mal necesario, podríamos manejar esto sin marcas usando un pseudo selector, pero el soporte del navegador apestaría, por lo que esta es probablemente una mejor manera de hacerlo.
El CSS para una configuración de cuatro columnas
En primer lugar, deberemos copiar y pegar la función .setColumnWidth y la función .setBigColumnWidth en nuestro CSS. Estos son 100% reutilizables y solo aparecen. una vez en todos nuestros CSS (o más exactamente, nuestros MENOS).
Después de eso, necesitamos establecer algunos estilos básicos para nuestra ID principal. Ya que quiero ilustrar cómo este marco puede responder, establezco el ancho en porcentaje, lo que creará columnas fluidas (use un ancho establecido si no quiere columnas fluidas).
Ahora viene la parte mágica donde configuramos un diseño de varias columnas tan fácilmente que te hará llorar. Sabemos que nuestro contenido tiene cuatro columnas, lanzaré un margen del 4% y ¡este es todo el código que necesitamos!
¡Esto nos dará un diseño perfecto, fluido, de cuatro columnas y solo tomó unas pocas líneas de código!
Añadiendo otra fila
Vamos a proceder y añadir otra fila a nuestro diseño. Esta vez insertaremos un pie de página con dos columnas, la primera de las cuales será una columna grande del ancho de tres columnas individuales. Aquí está el HTML (tenga en cuenta que si quisiéramos usar nombres de clase genéricos, podríamos reciclar la clase de columna única que habíamos creado anteriormente).
El CSS
Lo primero que queremos hacer en nuestro CSS es establecer los estilos genéricos para el pie de página. Estos son los mismos que en la sección principal, así que simplemente podemos actualizar nuestro código de esta manera:
De manera similar, podemos simplemente agregar la clase footerColumn al código de la clase mainColumn (o simplemente usar un nombre genérico para ambos).
Finalmente, configuramos nuestra clase para combinar las tres primeras columnas.Todavía utilizamos el diseño de cuatro columnas y un margen del 4%, pero utilizamos un valor de combinación de tres para combinar el ancho de las tres primeras columnas.
Con eso, ahora tenemos una segunda fila que pudimos personalizar completamente sobre la marcha casi sin esfuerzo. Tampoco tuvimos que elegir entre cuarenta y siete clases preestablecidas, ¡solo nos inventamos las nuestras en el camino!
Haciéndolo Responsive
Dado que toda la cuadrícula que hemos configurado es fluida, ya responde bastante bien a diferentes tamaños de ventana. Desafortunadamente, el sistema de margen basado en porcentajes comienza a formar columnas bastante aplastadas en pantallas pequeñas.
Arreglar esto es súper fácil con un poco de magia de consulta de medios. Puede modificar los estilos como desee para que se ajusten mejor a diferentes tamaños de pantalla (todos nuestros MENOS aún funcionan bien). Aquí hay un ejemplo rápido que simplemente toma todo en una sola columna para cualquier cosa más pequeña que 700px.
Verlo en acción
Ahora que sabes cómo funciona, ¡es hora de echar un vistazo! Tenga en cuenta una vez más que esta es una idea en progreso, así que si no funciona en algo que no es Webkit o Mozilla, no me sorprende.
Manifestación: Haga clic aquí o en la imagen de abajo para iniciar. Asegúrese de cambiar el tamaño de la página y ver cómo el diseño se adapta a los cambios.
¿Por qué es lento?
He subido intencionalmente la versión MENOS para que pueda aprovechar al máximo lo que está sucediendo. Sin embargo, es bastante lento de esta manera y realmente solo está destinado a propósitos de prueba. Ejecutar esto a través de LESS.app nos da una versión compilada hecha de CSS antiguo y los resultados en una página mucho más ágil.
Manifestación: Haga clic aquí para ver la versión compilada de CSS.
Conclusión
Probablemente no soy el primero en intentar usar MENOS para crear un marco de diseño (aunque nunca he visto uno), pero intenté mantenerme completamente original en mi proceso de pensamiento aquí y me propuse construir algo que representara un nuevo Manera de pensar y utilizar diseños de varias columnas en CSS.
Mi larga explicación hace que esto parezca complicado, pero en realidad es un sistema súper simple que solo requiere dos breves mixines preconstruidos (que he configurado más como funciones) que puedes copiar y pegar directamente en tu código. A partir de ese momento, creará su página como desee, llamando a un mixin cuando lo necesite e insertando sus propios valores.
Deja un comentario y hazme saber lo que piensas de mi Frankenstein Framework. ¿Crees que simplifica con éxito el proceso de diseño? ¿Cómo lo cambiarías?