Tutorial 960 Grid System

A partir de estas dimensiones seran las columnas que crearemos, en cada seccion se pueden crear todas las columnas que necesitemos siempre y cuando no superemos el ancho maximo de 960px, teniendo en cuenta los pixeles de los margenes. Ej: Una seccion donde tenemos el Contenido y una Sidebar (16 Columnas): Columna 12 (700px) + Columna 4 (220px) + Margenes (40px) = 960px

Ese fue solo un simple ejemplo, nosotros podemos varias los distintos tamaños de columnas con la cantidad siempre teniendo en cuenta que no se superen los 960px de ancho sumando los 10px de margen de cada lado de cada columna.

Bueno ahora comenzaremos con un Ejemplo de tipico diseño de Web, de un Header, Contenido, Sidebar y Footer (Para este vamos a usar el Sistema de 12 Columnas):

Primero Incluimos los archivos CSS de 960 Grid System:

<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> 
<link rel="stylesheet" type="text/css" media="all" href="css/text.css" /> 
<link rel="stylesheet" type="text/css" media="all" href="css/960.css" />

Ahora tenemos que crear un contenedor principal que en este caso va a ser de 12 columnas:

<div class="container_12">
 
</div>

Como ven si fuera un Contenedor de 16 columnas solo tendremos que cambiar el nombre de la clase a “container_16″.
Cada elemento que va a tener este contenedor va a tener el nombre de clase: “grid_xx”, donde xx es el numero de la anchura de la columna (Ver Tabla anterior para conocer los valores).
Así que primero creamos el contenedor del header:

<div class="container_12">
   <div class="grid_12" id="header">
      <h1>Header</h1>
   </div>
   <div class="clear"></div>
</div>

Al usar todo el ancho para el Header use la clase: “grid_12″, un recordatorio importante es que después de cada fila debemos agregar un div con class: “clear” para que no tengamos problemas con los Float. Ahora creamos los divs para el Contenido y el Sidebar (siempre adentro de nuestro contenedor principal):

<div class="container_12">
   <div class="grid_12" id="header">
      <h1>Header</h1>
   </div>
   <div class="clear"></div>
 
   <div class="grid_9" id="contenido">
   	<p>Contenido de la Web!</p>
   </div>
   <div class="grid_3" id="sidebar">
   	<h2>Sidebar</h2>
   </div>
   <div class="clear"></div>
 
</div>

Asi ya tenemos nuestro Header, nuestro espacio del contenido y un lindo sidebar para crear nuestro menu
Pero todavia no terminas y seguimos con el Footer:

<div class="container_12">
   <div class="grid_12" id="header">
      <h1>Header</h1>
   </div>
   <div class="clear"></div>
 
   <div class="grid_9" id="contenido">
   	<p>Contenido de la Web!</p>
   </div>
   <div class="grid_3" id="sidebar">
   	<h2>Sidebar</h2>
   </div>
   <div class="clear"></div>
 
   <div class="grid_12" id="footer">
   	<p>Tutorial - 960 Grid System By <a href="http://www.matydesign.com">MatyDesign</a></p>
   </div>
   <div class="clear"></div>
</div>

Aqui el Ejemplo!

Bueno asi terminamos nuestro diseño Web simple, y concluye este tutorial.

hasta la Próxima.