Maquetación web usando CSS con el sistema 960 Grid

29 de Mayo de 2009 | Herramientas, Tutoriales

Actualmente ya solo un pequeño porcentaje de usuarios utilizan 800×600 e inferiores para mostrar webs en sus exploradores, así como la mayoria utiliza 1024×768 o superiores como resolución de pantalla. A raiz de estos datos un equipo de personas creó este sistema de maquetado basado en 960 píxeles de ancho, con configuraciones de 12 y 16 columnas para poder combinar entre sí y así crear nuestros layout de una forma simple y rápida.

El sistema Grid

Podemos utilizar 12 o 16 columnas para crear nuestros layouts, cada una de las columnas tiene un margen izquierdo y derecho de 10px, para crear 20px de separación entre columnas. Por lo tanto, cuando utilizamos el grid de 12 columnas, cada columna tendra 60px y en caso de utlizar el grid de 16, nuestro ancho por columna sera de 40px. Al tener 10px de margen a ambos lados, realmente el espacio que utilizaremos para nuestros elementos es de 940px. En el gráfico siguiente podemos observar una gama de las posibles combinaciones para acercarnos mas al funcionamiento del framework.

En 960 Grid System podemos ver este mismo gráfico a modo de demo usando online el framework. Aqui debajo un ejemplo en un caso real que usa el sistema de rejilla de 12 columnas:

Los contenedores
Cualquier elemento que deseemos colocar en la página debe ir en un contenedor principal. Este contenedor tiene el nombre de la clase CSS “container_xx”, donde xx es el número de columnas que vamos a utilizar. Para los modelos de rejilla estandar será 12 o 16.

Los elementos en la rejilla

Cada elemento que colocamos en nuestro contenedor tiene la clase CSS “grid_x”, siendo x el número de la clase que tiene la anchura deseada para nuestro elemento en concreto. A continuación tienes la tabla con el listado de columnas permitidas por 960 Grid, tanto para 12 columnas, como para 16.

Grid_id	12 Columnas	16 Columnas
1	60px	40px
2	140px	100px
3	220px	160px
4	300px	220px
5	380px	280px
6	460px	340px
7	540px	400px
8	620px	460px
9	700px	520px
10	780px	580px
11	860px	640px
12	940px	700px
13		760px
14		820px
15		880px
16		940px

Para usar grid en nuestro código es necesario añadir éste código XHTML dentro de la etiqueta <head>…</head> para añadir las clases del framework a nuestro diseño web:

Un ejemplo, si queremos un elemento que utilice una columna con toda la anchura disponible (940px) usaremos el id de la rejilla correspondiente al total de la anchura (número 12 o 16, dependiendo del contenedor):

</div>

Como vemos en el ejemplo anterior (que usa un contenedor de 16 columnas), dentro de la clase container, después de cada fila de elementos, hay que colocar un DIV con la clase “clear”, que elimina los posibles problemas de float que pudiéramos tener en un diseño con columnas.

Ahora otro ejemplo un poco “más complicado”. Una estructura web completa, compuesta de cabecera con ancho total, un cuerpo con 3 columnas y un pie de pagina con 2 columnas, usando el sistema de rejilla de 12 columnas:

<!– La Cabecera –>

<div class=”grid_12″>
<p>Ancho total (940 px)</p>
</div>

<!– El cuerpo –>

<div class=”grid_2″>
<p>Columna izquierda de 140 px</p>
</div>

<div class=”grid_7″>
<p>Columna central de 540 px</p>
</div>

<div class=”grid_3″>
<p>Columna derecha de 220 px</p>
</div>

<!–El pie de pagina –>

<div class=”grid_6″>
<p>Columna izquierda de 460 px</p>
</div>

<div class=”grid_6″>
<p>Columna derecha de 460 px</p>
</div>

</div>

La idea o propósito es siempre cubrir las 12 columnas de cada fila con elementos, y aplicar la clase “clear” para saltar a la siguiente fila de elementos.

Las otras clases

Ademas de las clases container_xx y grid_xx, 960 Grid incorpora otras que nos pueden ayudar a la hora de crear nuestro layout.

prefix_xx: Esta clase se utiliza para desplazar xx columnas a la derecha de un elemento. Basicamente sirve para ahorrar lineas de código, evitandonos declarar otro DIV que no ibamos a usar en esa fila. (por ejemplo un texto en el lateral derecho al pie de pagina, y que en la izquierda no irá nada)

….

(en el ejemplo, creamos una rejilla de 4 columnas “grid_4″ y la desplazamos 12 “prefix_12″, que hace un total 16. Si lo hacemos en una rejilla de 12 el prefix sería de 8 para completar la fila)

suffix_xx: Exactamente igual que prefix_xx pero con desplazamiento de columnas a la izquierda de un elemento.

alpha y omega: Sirven para ajustar los distintos margenes de los elementos que anidemos, alpha es el margen izquierdo y omega el derecho. Como se explicó al inicio del tutorial, cada “grid” posee un margen de 10px por cada lateral, con esto eliminaremos ese margen a nuestro gusto, y si anidamos muchos elementos será un clase más que necesaria. “grid_12″ utiliza todo el ancho de la página, pero en realidad tiene 940 píxeles, que es el resultado de a 960 restarle 10 píxeles de margen a la izquierda y otros 10 a la derecha, de la primera y la ultima columna.

contenido de la columna izquierda

</div>

contenido de la columna derecha

</div>

Este sistema de maquetado, aunque puede tener sus limitaciones, cumple perfectamente su propósito, que es el de ahorrarnos mucho tiempo a la hora de generar clases, dejándonos mas tiempo para la creatividad de nuestro proyecto.

Podemos descargar aquí el framework (260 KB) que incluye Plantillas para Fireworks, Inkscape, Illustrator, OmniGraffle, Photoshop y Visio. Ademas de un PDF imprimible muy util para realizar nuestros bocetos sobre una rejilla.

Enlace a la pagina oficial Grid 960: http://960.gs/

2 comentarios a “Maquetación web usando CSS con el sistema 960 Grid”

Theme base para Wordpress basado en Grid 960 | Designios
20:55| 7 de Julio de 2009
[...] Maquetación web usando CSS con el sistema 960 Grid [...]
Maquetación web usando CSS con el sistema 960 Grid | Designios
21:28| 12 de Diciembre de 2009
[...] here to see the original: Maquetación web usando CSS con el sistema 960 Grid | Designios Comments0 Leave a Reply Click here to cancel [...]

Historias de diseño para todos….

Suscripcion RSS

Ultimos articulos:

Enlaces (Castellano):

Enlaces (Ingles):

Partner links

Destacados

Categorias:

Archivo Mensual

Meta

Maquetación web usando CSS con el sistema 960 Grid

29 de Mayo de 2009 | Herramientas, Tutoriales

Deja un comentario!