Less Framework: una retícula CSS que no cambia tu forma de trabajo

Por Ernesto Jiménez · 29 diciembre, 2011
Publicado en Recursos

Aunque los he usado alguna vez, no soy gran admirador de los frameworks de retículas de CSS. He utilizado algunos de los famosos, como 960, y me parecieron muy potentes al principio. Con apenas unas líneas de código podía plantear la estructura del sitio. Todo era maravillosamente fácil. Aún así, conforme iba creando detalles y miraba el código había algo que no me terminaba de cuadrar. No me gustaban todas esas clases indicando el número de columnas.

Siempre he preferido usar las clases para indicar qué tipo de contenido contienen las capas. Mezclar tipo de contenido con indicaciones de la presentación me parecía ir en contra de la separación ideal de contenido y visualización.

El autor de 960 no para de reivindicar que las clases tampoco son semánticas –sólo en los microformatos– pero a mí sigue sin convencerme este enfoque. Mi escepticismo por estos frameworks ha fluctuado bastante: hay épocas que siento curiosidad y pruebo alguno, cuando confirmo que tendré que cambiar drásticamente mi forma de trabajar decido que estas herramientas no son para mí. Así ha sido hasta que un día llegué a la página de Less Framework (no lo confundamos con LESS CSS). Desde que hice algunas pruebas con él es la estructura que utilizo de base para diseñar mis sitios.

En esencia este sistema sólo nos proporciona unas guías para que establezcamos un número de columnas en función del ancho disponible para la visualización de la página web. Si diseñamos para un ordenador de sobremesa disponemos de diez columnas para un ancho de 992 píxeles. Cuanto más estrecha la pantalla iremos utilizando menos columnas (8 columnas para tabletas en formato vertical y un ancho de 768 píxeles, 3 columnas para móviles, 5 para móviles anchos y ya está, no hace falta más).

Uno de sus puntos fuertes es que la retícula que propone está centrada en la tipografía. Así establece pautas en función del tamaño del texto base y nos ofrece tres opciones (con altos de línea de 1.5, 1.4 y 1.33).

Lo mejor de Less Framework es que no ha cambiado mi forma de trabajar. Mis clases se siguen llamando como yo quiero y no tengo que ir poniendo cajas vacías para separar filas. Además es muy fácil romper la retícula en cualquier momento, algo que no siempre está claro en otros sistemas. Si tengo un artículo y quiero que se extienda a lo ancho de 6 columnas sólo tendría que ver que 6 columnas son 528 píxeles y definir:


article{ width: 528px; }

En el html sólo tendría <article> mientras que en otros frameworks debería empezar a usar clases de este estilo:

<article class=“6_col”>

No digo que esto esté mal sólo que me gusta más la forma en que puedo trabajar con Less Framework.

El autor está en proceso de publicar un sistema similar pero usando columnas flexibles, muy interesante para 2012 en que nos tendremos que poner todos las pilas con el tema de las maquetas flexibles (responsive web design). Y hablando de 2012 aprovecho para desearos a todos un 2012 lleno de buenas noticias y de buen diseño. Salud.

¿Te ha gustado el post? Puedes seguirme en Twitter o en Facebook donde seguimos hablando de diseño web