960 grid system, un framework para css – parte 1

31Ene10

El propósito de todo framework no es otro que el de facilitar el trabajo al no tener que reinventar la rueda cada vez que tenemos que realizar un trabajo, en nuestro caso, cada vez que tenemos que hacer una maquetacion en css.

El propósito y los detalles de este framework están claramente detallados en su página (en inglés):     http://960.gs/

Este grid fija un “estándar” en el ancho de los sitios web, 960 píxeles. Este tamaño no devería ser un problema puesto que, actualmente, según se dice, un pequeño porcentaje de usuarios sigue utilizando una resolución de 800 x 600 pixeles, mientras la mayoría de las usadas son de 1024 x 768 px o mayores. A este maquetado de 960px se lo divide en 12 o 16 partes o columnas, según sea nuestra necesidad. Una vez que nos hemos decido por 12 o 16 columnas, podemos crear un <div> que tenga 1 ancho de columna, o un <div> que tenga 2 anchos de columna y así. Hasta podemos crear un único <div> de 12 anchos de columna de tal manera que ocupe todo el ancho disponible (si es que nos decidimos por una configuración de 12 columnas). Básicamente, eso es lo que hace este framework, nos permite ahorrarnos tiempo en el maquetado sin tener que preocuparnos, además, por el tipo de navegador que utilicemos puesto que el propio framework se encarga de solucionar los hacks… interesante, verdad?

Lo básico de 960grid system

Si consideramos una configuración de 12 columnas (la cual se indica con una clase .container_12 ), los 960px  quedan divididos en 12 columnas de 80px cada una. A su vez cada columna tiene un margen derecho de 10px y un margen izquierdo también de 10px, lo que da un espacio útil de 60px.  Siempre tenemos 10px de margen derecho y 10px de margen izquierdo para cada una de las columnas disponibles. Esto es, para un<div> de 2 columnas, tenemos que mide 160px a los cuales hay que restar los 10px de margen derecho y los 10px de margen izquierdo, lo que da un espacio útil de 140px. Y así lo mismo para un ancho de 3, 4, 5 … 12 columnas.

Ahora vemos el ancho útil para cada columna en una configuración de 12 columnas:

1. 60px

2. 140px

3. 220px

4. 300px

5. 380px

6. 460px

7. 540px

8. 620px

9. 700px

10. 780px

11. 860px

12. 940px

En la práctica, cada <div> será de una clase .grid_xx, donde xx será alguno de los números de 1 a 12 de la lista de más arriba.

En el próximo post, les mostraré un caso práctico de todo esto.

Anuncios


No Responses Yet to “960 grid system, un framework para css – parte 1”

  1. Dejar un comentario

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s


A %d blogueros les gusta esto: