CSS

Maquetación CSS con 960 Grid System

23 abril, 2012

¿Que es 960 Grid System?

960 Grid System es un framework CSS, es una declaración de estilos que dispone las clases necesarias para implementar columnas en una página web, de diversos tamaños, con las que maquetar contenidos de una forma fácil y ordenada.

La mayoría de las actuales resoluciones de pantalla que  utilizan los usuarios es de 1024 x 768, por este motivo se basa en un diseño de 960px de ancho, con configuraciones de 12 y 16 columnas para poder combinar entre sí y así crear nuestra “cajas” de una forma simple y rápida.

¿Porqué utilizar un Framework?

Nosotros mismos podríamos hacer un sistema propio para maquetar una página con diversas columnas, pero utilizando un framework como 960 Grid tendremos la mayor parte del trabajo realizado. Solamente tendremos que colocar a cada contenedor de elementos las clases disponibles en el sistema, para que tengan la anchura y posición deseadas.

Descripción del Grid 960

Como ya hemos comentado, tiene dos variantes, de 12 o de 16 columnas. Cada una de las columnas tiene un margen izquierdo y derecho de 10px, por ello tendremos en total una separación de 20px entre cada columna. Teniendo esto en cuenta, si decidimos  12 columnas el ancho será de 60px, y si decidimos 16 columnas el ancho será de 40px

[box]12 columnas: 12 x 60 + 12 x 20 (de los márgenes) = 720 + 240 = 960 px[/box] [box]16 columnas: 16 x 40 + 16 x 20 (de los márgenes) = 640 + 320 = 960 px[/box]

Anchura con la variante de 12 columnas

Con la primera de las variantes de 960 Grid podemos hacer divisiones en hasta 12 columnas distintas. Teniendo en cuenta los márgenes a la izquierda y la derecha de las columnas, las anchuras de las que disponemos serán las siguientes:

1 – 60px
2 – 140px (60 + 20 + 60  = 140px, lo mismo que: 2 x 60 + 1 x 20 = 140px)
3 – 220px (3 x60 + 2 x 20 = 220px)
4 – 300px (4 x 60 + 3 x 20 = 300px )
5 – 380px (5 x 60 + 4 x 20 = 380px)
6 – 460px (6 x 60 + 5 x 20 = 460px)
7 – 540px (7 x 60 + 6 x 20 = 540px)
8 – 620px (8 x 60 + 7 x 20 = 620px)
9 – 700px (9 x 60 + 8 x 20 = 700px)
10 – 780px (10 x 60 + 9 x 20 = 780px)
11 – 860px (11 x 60 + 10 x 20 = 860px)
12 – 940px (12 x 60 + 11 x 20 = 940px)

Como ejemplo podemos poner una sola columna con lo que tendríamos toda la anchura disponible, 940px, para ello utilizo la clase grid_12, el código sería:

<div class="container_12">
   <div class="grid_12">
      <p>Columna de 940 px</p>
   </div>
   <div class="clear"></div>
</div>

En la primera linea le decimos que estamos trabajando con 12 columnas con la clase container_12. Después le digo el tamaño de la columna, que en este caso es de 940px y para terminar siempre se añade la clase clear para limpiar todos los posible float que tengamos (class=”clear”).

Siempre tenemos que conseguir que la suma de todas las columnas sea de 940px de ancho, por ejemplo, si quiero conseguir tres columnas las posibles convinaciones serían muchas, por ejemplo:

Columna 7 + Columna 4 + Columna 1 = 540 + 300 + 60 = 900

Si suma los márgenes, como son tres columnas tengo 2 x 20 = 40px de márgenes, llegando a los 940px totales. Conclusión que sacamos como posibles soluciones: que las suma de columnas siempre sea 12: Columna 7 + Columna 4 + Columna 1 = Columna 12 (7 + 4 + 1 = 12).

Anchuras posibles con la variante de 16 columnas

La variante de 16 columnas tenemos 16 posibles anchuras de elementos de la página, lo que puede aumentar las posibilidades de elección. Las distintas anchuras sobre las que podríamos trabajar son las siguientes (en este caso la anchura es de 40px = 960/16 – margen = 60 -10 -10 = 40px):

1: 40px
2: 100px
3: 160px
4: 220px
5: 280px
6: 340px
7: 400px
8: 460px (8 x 40 + 7 x 20 = 460px)
9: 520px
10: 580px
11: 640px
12: 700px
13: 760px
14: 820px
15: 880px
16: 940px (16 x 40 + 15 x 20 = 940px)

Ver demo: http://960.gs/demo.html

Descargar 960 Grid

Conociendo la hoja de estilos de 960 Grid System

Vamos a ver las distintas clases que se utilizan en 960 Grid System, son muy sencillas de entender, veamos:

Class container_xx:
Esta clase sirve para definir un contenedor, donde estará contenido todo nuestro diseño, es decir aquí decimos si trabajaremos con 12 o con 16 columnas. Las clases serán container_12 y container_16.

Class grid_xx:
La clase grid_xx define un elemento del diseño que será colocado en un contenedor. El valor “xx”, de grid_xx, expresa el tamaño de la rejilla que se está definiendo. A un número mayor, más anchura. En los diseños con el container_12 se tienen doce columnas y con grid_xx conseguiremos también doce distintos anchos de columnas, desde grid_1, grid_2… hasta grid_12. En el caso del container_16 tendríamos hasta 16 tipos de elementos con distintas anchuras, desde grid_1 hasta grid_16.

Class alpha y class omega:
Estas dos clases sirven cuando estamos anidando unos grid dentro de otros, para ajustar los márgenes de los distintos elementos anidados. Como ya hemos comentado arriba, todas las columnas tienen un margen de 10px a la izquierda y 10 pixel a la derecha. Si vamos anidando unas columnas dentro de otras, por ejemplo en un grid_8 puedo poner varios grid_4, en tería podría pensar que 2 pero vemos las dimensiones que tengo:

grid_8 = 620px
grid_4 =  300px
2 x grid_4 = 300 + 20 + 300 = 620px

Parece que el tamaño es perfecto, pero si pensamos un poco, al anidar del grid_4 dentro del grid_8, el grid_4 comienza a 10px del borde izquierdo del grid_8 ya que tiene un margen de 10 pixel a la izquierda, hemos desplazado todo 10 pixel a la izquierda, si vuelvo a anidar otro grid tendré un desplazamiento de otros 10 pixel,  con un total de 20px, si vuelvo a anidar serán 30px… y así sucesivamente. Para el caso que nos lleva con el grid_4 el tamaño real que ocupamos es:

Primer grid_4: 10 + 60 + 20 + 60 + 20 + 60 + 20 + 60 + 10 = 320px
Segundo grid_4 : 10 + 60 + 20 + 60 + 20 + 60 + 20 + 60 + 10 = 320px
Como se trata de 2 x grid_4 = 310 + 20 + 300 = 640px
Vemos que es mayor que los 620px de grid_8, luego no entra

Visto esto necesitamos restar los márgenes izquierdo y derecho cuando anidamos columnas, que ocurrirá en muchas ocasiones. Para ello utilizamos las clases alpha y omega.  La clase alpha sirve para eliminar el margen de 10 píxeles a la izquierda y la clase omega para eliminar el margen de 10 píxel de la derecha. En este caso que tenemos sería (supongo que es para 12 columnas):


<div class="grid_8">
  <div class="grid_4 alpha">
    <p>Columa de 300px</p>
  </div>
  <div class="grid_4 omega">
    <p>Columna de 300px</p>
  </div>
</div>

Class prefix_xx:
Esta clase nos sirve para dejar espacios vacíos a la izquierda de las columnas. Por ejemplo, si quiero comenzar el diseño con grid_5 totalmente a la derecha, tendré que dejar un espacio vacío equivalente a un grid_7. En esta caco concreto el código será (supongo que es para 12 columnas):

<div class="container_12">
   <!--agrego un div que va ha estar ubicado 540px
    a la derecha y va tener un ancho de 380px-->
   <div class="grid_5 prefix_7">
      <p>Columna de ancho 380px</p>
   </div><!--grid_5-->
</div>

Class suffix_xx:
De igual forma que prefix_xx, la clase sufix_xx sirve para colocar un espacio vacío a la derecha de la capa. Para el mismo ejemplo anterior tendremos:

<div class="container_12">
   <!--agrego un div con ancho de 380px
     espacio vacio de 220px y otro div de 300px -->
   <div class="grid_5 suffix_3">
      <p>Columna 5</p>
   </div><!--grid_5-->
   <div class="grid_4">
      <p>Columna 4</p>
   </div><!--grid_4-->
</div>

En esta imagen vemos el resultado de estos dos casos:

Ejemplo de las clases con espacio vacios

Ejemplo de las clases con espacio vacíos

¿Cómo enlazar las hojas de estilos para utilizar el framework?

Después de las explicaciones anteriores solamente falta decir como enlazar, utilizar… este framwork.

En primer lugar descargar de la web, puedes descargar desde aquí. Verás varias carpetas, la que te interesa es la carpeta llamada code donde están los ficheros interesantes. Copia completamente esta carpeta a tu web (copia todo para no tener problemas). Después solamente tienes que enlazar con varias hojas de estilo y tendrás el siguiente código (puedes copiar y pegar antes de </head>:

<link rel="stylesheet" href="code/css/reset.css" />
<link rel="stylesheet" href="code/css/text.css" />
<link rel="stylesheet" href="code/css/960.css" />

Veamos que es cada fichero:

  • reset.css: para resetar todos los estilos. Fichero opcional pero recomendable.
  • text.css: para dar formato a los textos que utilices en tu web. Fichero opcional.
  • 960.css: donde tenemos nuestras columnas.

Con esto ya tenemos casi todo listo, solo falta practicar y ver un ejemplo práctico, lo dejamos para mas adelante y no alargar demasiado este post.

También podría gustarte

Sin Comentarios

Dejar un Comentario