Para trabajar con el diseño de un sitio y crear su CSS, ver las tipografías, hacer los ajustes necesarios para imprimir el contenido, etc., una excelente forma de ahorrar tiempo y hacer las tareas mucho más fáciles, es usar algún framework CSS, que por estos días abundan y ofrecen muchas opciones que sin dudas hacen que nuestro trabajo sea mucho más fácil.
He probado muchos de estos recursos, pero sólo he usado uno, no obstante, les presento los que me parecen que son más interesantes y potentes.
Ya pasó algún tiempo desde que descubrí BluePrint, este es un framework que, como casi todo los de su tipo, ayuda acortar los tiempos de desarrollos de la maquetación, brindando un sistema de reticulado, de tipografía, de reseteo de la CSS, etc. De esta forma con este, podemos crear una reticula e ir posicionado el contenido para luego desarrollar la CSS.
Luego conocí 960.gs que es similar a BluePrint pero que ofrece un ancho 960px además de dos variaciones de 12 y 16 columnas. El motivo de usar 960 píxeles, es debido a que en la actualidad, muchos monitores poseen una resolución de 1024×768 y esta magnitud es divisible por 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 y 480. Ya tengo planeado en mi próximo proyecto, usar a 960.gs en vez de BluePrint, justamente porque creo que se adapta mejor a las espcificaciones del diseño.
The Golden Grid fué el último de estos frameworks CSS que descubrí por medio del sitio Web Resources Depot. Este se especializa en presentar un modelo de diseño basado en un reticulado, de hecho ofrece: variaciones de 6 y 12 columnas, un reticulado, otro para incluir fotos y videos, etc.
emastic que es otro framework CSS, también creado por Vladimir Carrer que es el mismo de The Golden Grid. Este entorno se caracteriza por: ser muy liviano (menos de 4kb); permitir personalizar el ancho de página en: em, px y %; utilizar columnas fijas y fluídas; etc.
Por último, también le quería recomendar YAML, este es muy completo, ofrece todo lo que uno esperaría de un producto de su tipo y mucho más, documentación, demos, ejemplos muy completos y también, una herramienta de edición online.
¿Por qué usar un framewrok CSS?
Ofrecen muchas ventajas entre ellas, son muy fáciles y rápidos de aprender y en verdad ayudan mucho a trabajar en cada detalle del diseño, sobre todo si la plantilla que nos pasa el diseñador gráfico es muy elaborada.
Y tú ¿cuál conoces? ¿cuál utilizas?
Suscribirse para recibir las últimas actualizaciones de Pixelco.
Personalmente he probado y trabajado con 960, Blueprint y YAML y siempre he tenido los mismos inconvenientenes: son demasiado grandes, ocupan mucho código para armar la estructura y a veces ocupan contenedores vacíos para hacerlo. Hace 1 año decidí tomar los, a mi juicio, mejores principios y técnicas de cada uno e hice mi propia grilla o framework css. Hace un mes atrás decidí compartirla ya que me ha sido de gran utilidad al estar adaptada a mis necesidades como diseñador y tomando como base la simpleza y facilidad como base para construirla. Se llama Simple, Grilla CSS y tanto el código, como su manual y ejemplos estan en mi blog a disposición de todos los que quieran usarla: http://rgarcia.cl/compartiendo-una-grilla-css-de-uso-personal/
Ha sido testeada en Firefox (Windows, Mac Ubuntu) | Explorer 7, 6 y 5.5 (Windows) | Opera (Windows) | Chrome 0.2.1 (Windows) | Safari (Windows, Mac) y el despliegue es consistente en todos. No usa contenedores vacíos para estructurar las secciones y está en español.