Hace mucho escuché sobre ellos, pero nunca los había probado. Una promesa de solución al problema del layout —la parte de la disposición de los elementos en el diseño—.
Al omnisciente Google emití una plegaria de ayuda para ver de qué venía tanta alharaca, y me choqué primero con 960 Grid System, que parece ser el más simple de la familia.
Lo usé para armar un diseño que necesitaba rápido, y en seguida vi la mayoría de sus ventajas y desventajas:
Pros:
- Diseñar con “grillas” (grids) da resultados bastante buenos, con una apariencia ordenada.
- Si nos mantenemos dentro de los márgenes que el sistema de grillas propone, armar los diseños es rapidísimo y simplísimo.
- Todos los problemas de compatibilidad de navegadores son cosa del pasado. Claro, sólo en la parte de división en columnas y eso.
- Los templates que traen para Photoshop y demás facilitan el diseño.
Contras:
- ¿División de contenido y presentación? ¿Qué es eso?
- Diseños fijos1.
- Cambiar una columna implica cambiar las demás para realinear.
- La necesidad de agregar la clase
clearfixen un elemento vacío es poco semántico. - El tamaño no es algo que se pueda decir «minúsculo»2.
Los frameworks CSS tienen una utilidad innegable. Ayudan a armar un diseño muy rápidamente, sin tener que preocuparnos por si va a andar o no en “el otro navegador”.
Por otro lado, puristas de la separación3 se van a quejar de que usar un framework CSS vence el propósito de usar CSS: estamos poniendo en el HTML las clases que determinan el tamaño de cada columna, en vez de poner eso en el CSS, como corresponde. Al poner clases sin significado (¿Qué es un «grid_3»?) a los elementos, estamos agregando información que no es nada semántica, y no ayuda en nada a un parser, pero este problema se minimiza si usamos, además de las clases de grid, ids y clases significativos.
En fin, los frameworks pueden dar resultados excelentes si lo que buscamos se presta al diseño en grillas, además de hacerlo rápido y fácil, y sólo los muy extremistas tienen lugar para quejarse —y aún así, tienen una opción de usar los frameworks «correctamete», usándolos primero para «ver cómo va a quedar», y después armar su propia hoja de estilos destilada—.
Martes 3 de Marzo de 2009, 18:57
No pude probar a fondo 960.gs en su version fixed o fluid, pero puedo decirte que Blueprint CSS tiene un par de scripts para pasar de “grid_3″ a “thisIsTheSidebar”. Lo que tiene de interesante un framework es la velocidad para prototipear y el hecho de que esta probado en una infinidad de navegadores. Blueprint va a un paso mas alla y te permite usar el CSS como es debido. Probalo!
Martes 3 de Marzo de 2009, 20:54
Lo de generarme los CSS correctos suena interesante.
Aún así… bajé Blueprint para ver qué tal, y todavía no logra convencerme.
La parte de hacer que el texto se ciña a la línea base es algo muy interesante, pero no es demasiado práctico; «Todas las imágenes tienen que tener una altura múltiplo de 18px» ya, por un lado, no es múltiplo de 16 e implica que a los íconos (que suelen tener tamaños que son potencias de 2) hay que cambiarles el tamaño.
Además, que ponga los márgenes de un solo lado hace necesaria la clase ‘last’, que 960, por ejemplo, no usa.
Es genial que me provea de varios “helpers” como .error, pero no me parece algo necesario; prefiero la simplicidad.
Claro que queda para cada para uno, pero 24 columnas con canaletas de 10px me parece un poco escuálido, y me gustan más las 12 columnas con 10px a cada lado.
Miércoles 4 de Marzo de 2009, 12:44
Las columnas pueden ser 24 o 12 o lo que vos quieras. 24 es el default
Te recuerdo que estos frameworks son para hacer prototipos rapidos y no para tener un sitio live (seria muy desprolijo)