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