Usando un CSS Grid Framework a la hora de diseñar

Un CSS Grid Framework es una herramienta que nos facilita el maquetado y el desarrollo de un sitio web al proveernos una guía sobre la cual trabajar. Esta guía consiste en un sistema de columnas, espacios y márgenes que nos ayudan a posicionar los bloques de contenido de nuestro diseño de manera rápida y organizada. Hay muchas ventajas estéticas y de diseño que obtendremos al usar un framework, entre las cuales puedo mencionar las siguientes: - Uniformidad y consistencia en la posición de los elementos. - Elimina el uso de tablas. - Soporte para múltiples navegadores y pantallas. - Provee una base de css con la cual trabajar rápidamente, ahorrando el tiempo necesario para construir una. - Cohesion visual entre los elementos de la página. - Fácil de implementar y mantener

Como pueden ver, el contenido en la primera imagen se ve mucho más organizado que la segunda. Es casi como si tuviera un sentido lógico y eso se debe a que como humanos siempre tendemos a buscar patrones. (Aquí pueden ver una charla de Michael Shermer en TED.com explicando como los seres humanos tendemos a buscar patrones en nuestro entorno. [02:20 - 02:50] Charla en TED ) En internet podemos encontrar muchos frameworks tales como: Blueprint CSS Grid Framework, Yahoo! YUI Grids CSS, YUI: CSS Grid Builder, YAML, 960 Grid System o herramientas para crear un framework propio: Grid Designer 2. Nosotros preferimos utiliza 960.gs como framework porque es fácil de mantener y su semántica es fácil de aprender. Aquí pongo un ejemplos del uso de las columnas del 960.gs en nuestro sitio:

Más adelante estaré hablando del 960.gs y el tema Omega de Drupal que es utilizado para construir sub-temas basados en él y es el que estamos utilizando en este sitio. Enlaces: Imagen de mala maquetación. 960.gs Blueprint CSS Grid Framework Yahoo! YUI Grids CSS YUI: CSS Grid Builder YAML Grid Designer 2