Jepser Bernardino

• Quiero el código
• Ver demo

Grid 960 es un framework de css que facilita la maquetación a un estándar de 960px. En este tutorial vamos a crear un página utilizando este framework.

Para empezar, ¿Qué es 960 Grid?

960 Grid es un framework de CSS que nos facilita la vida en un mil por ciento (si lo sabemos utilizar). Este grid se creó por la necesidad de tener un “estándar” en el ancho de los sitios web. En nuestros días ya es sólo un pequeño porcentaje de usuarios que utilizan resolución de 800 x 600 pixeles, mientras la mayoría ya utiliza resoluciones de 1024 x 768 px o mayores. Es por eso que un grupo de personas decidió crear este sistema de maquetado basado en 960px 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.

Conociendo el grid

Como les mencionaba, 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. Sabiendo esto, decimos que si utilizo 12 columnas, cada columna será de 60px cada una y sí utilizo 16 columnas, el ancho de cada una será de 40px. Porque no visitan la página demo. Podrán observar una gama de combinaciones para darse una idea de como trabaja este framework.

Veremos ahora como es que se divide el grid 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

Como verán, cada una de las filas lleva un número, que será el identificador; es decir, el ancho de la columna corresponde al número de a la par. Y se forma así: grid_xx donde “xx” es el numero de la lista.  Pero,¿Cómo 960 grid sabe sí utilizo 12 o 16 columnas? Simple, tiene una clase .container_yy, donde “yy” es el numero de columnas que voy a utilizar.

Basta de palabrería, vamos a crear una página web con utilizando este framework y 12 columnas.

Maquetando con 960 Grid

Grid de 12 columnas

La verdad es muy sencillo maquetar así, y al observar la imagen nos damos una idea de como hacerlo. Para los fines de este tutorial, vamos a crear un layout para un sitio ficticio llamado Vos-Voz (no se me ocurría otro nombre).

Hay unos puntos importantes antes:

• IMPORTANTE, debemos saber al menos lo basico en xhtml y css
• Incluir text, reset y 960 css’s en el html
• Hay que colocar un <div class=”clear”></div> despues de cada fila, esto se debe a que cada columna está con un float:left
• Usaremos los id para diferenciar un div de otro

Así esta dividido nuestro layout en la parte del contenido

Ahora empezaremos haciendo el esqueleto del layout, crearemos los espacios que necesitamos para colocar los artículos. Como podrán darse cuenta, tenemos un mini-menú en la parte superior con dos opciones, luego nuestro logotipo, después el menú principal y por último el contenido que está subdividido en dos columnas; donde la columna izquierda está dividida por dos columnas más. Hasta abajo tenemos nuestro footer y ¡terminamos!

<div id="top">
    <!--empiezo con mi contenedor de 12 columnas-->
    <div class="container_12">
        <!--agrego un div que va ha estar ubicado 720px a la derecha y va tener un ancho de 220px-->
        <div class="grid_3 prefix_9">
        </div><!--grid_3-->
        <div class="clear"></div>
    </div><!--container_12-->
</div><!--top-->
<!--luego creo otro contenedor de 960px-->
<div class="container_12" id="bodyMain">
    <!--agrego un div de 960px, recordemos que son 940px los que podemos utilizar, por los márgenes-->
    <div class="grid_12" id="header">
        <a id="logo" title="Vos-Vos" href="#"></a>
        <img id="ciudad-logo" alt="VV City" src="images/ciudad-logo.gif"/>
    </div>
    <div class="clear"></div>
    <!--hago lo mismo para el menu, ya que se despliega por todo el layout-->
    <div class="grid_12" id="menu">
    </div><!--menu-->
    <!--lo mismo ... observen que cada uno de los grid_12 tienen un ID que les da su estilo-->
    <div class="grid_12" id="contentMain">
        <!--separo en una columna de 620px y le agrego el alpha porque es la primera columna-->
    	<div class="grid_8 alpha">
            <!--divido en 2, como se dan cuenta la primera tiene alpha-->
            <div class="grid_4 alpha">
            </div>
            <!--la ultima tiene el omega-->
            <div class="grid_4 omega">
            </div>
        </div>
        <!--tenia una columna de 620px, esta es de los restantes 940px-->
        <div class="grid_4 omega">
        </div>
        <div class="clear"></div>
    </div><!--contentMain-->
    <div class="clear"></div>
    <!--como se dan cuenta, aquí muevo mi div de 300px o grid_4 ocho columnas a la derecha (640px)-->
    <div class="grid_4 prefix_8" id="footer">
    </div><!--footer-->
</div><!--bodyMain-->

Ahora es tiempo de colocarle los estilos a nuestros div con ID, para que podamos empezar a ver las clases. En estos momentos no vamos a lograr tener algo palpable, tranquilos voy a explicar paso por paso. Yo he hecho un css para colocar mis estilos personalizados, llamado mi-estilo.css:

div.spacer{
height: 1em;
}
#top{
width:100%;
background:#29231e;
position:relative;
top:0;
left:0;
}
#top ul{
margin:10px 0 10px 0;
color:#FFFFFF;
}
#top ul li{
display:inline;
}
#bodyMain{
background:url(../images/nubes-background.jpg) top center no-repeat;
}
#rss{
background:url(../images/rss-logo.gif) no-repeat right;
padding:5px 30px 5px 0;
}
a#logo{
background:url(../images/vos-voz.gif) no-repeat;
width:470px;
height:92px;
float:left;
margin-top:150px;
}
img#ciudad-logo{
float:left;
}
#header{
border-bottom:5px solid #29231e;
}

Ya tenemos la parte superior y el icono de rss en, ahora agregamos los elementos del menú:

<div class="grid_12" id="menu">
        	<ul>
            	<li>Portada</li>
                <li>Noticias</li>
                <li>Miembros</li>
                <li>Promociones</li>
                <li>Cont&aacute;ctanos</li>
            </ul>
    </div><!--menu-->

Le damos la clase a los items del menú, recordemos que tenemos un fondo celeste en el fondo, por eso, usaremos el grid_12 que ocupa los 940px:

#menu{
background:#e7f7fb;
}
#menu ul{
padding-top:10px;
margin-bottom:10px;
}
#menu ul li{
display:inline;
font:20px bold Arial, Helvetica, sans-serif;
}

Es hora de darle estilos al footer,  simplemente haremos que tenga la licencia Creative Commons, un simple texto.

<div class="grid_4 prefix_8" id="footer">
        <p>www.vos-voz.com. Licencia por Creative Commons.</p>
    </div><!--footer-->

Inspírence ustedes en agregarle el famoso Lorem para los textos, recuerden que sus imágenes deben de ser del ancho de sus columnas, menos 20px que son los márgenes. Ahora viene lo importante, podemos probar en todos los exploradores y no hay ningún problema :D, y lo creamos en ¡menos de 20 minutos!

Así quedará el layout

Conociendo las clases

• container_yy : Donde “yy” puede ser 12 o 16, que son el número de columnas que trabajaremos.
• grid_xx: Donde “xx” será la cantidad de columnas que utilizaremos para algún proposito, la idea es formar 12 columnas en total, Ej. tengo una columna “grid_8″ y luego otra “grid_4″, entonces ya tengo mis 12 columnas.
• prefix_xx: Este se utiliza para mover “xx” columnas a la derecha es decir (como en la parte del footer en nuestro layout) moví 8 columnas o 640px a la derecha y mi div tiene una anchura de 4 columnas o 320px a los cuales debemos quitar 20px a cada uno; por el gutter o espaciamiento que les mencionaba.
• suffix_xx: Es muy parecido a prefix_xx, simplemente que en este caso el margen es a la derecha. Digamos que necesito una columna hasta la izquierda y que mi segunda columna esté 160px (2 columnas) a la derecha de esta, entonces simplemente le agrego el suffix_2 en este caso.
• alpha: Es el inicio, se utiliza cuando tenemos dos o mas columnas y deseamos que una esté a la par de la otra, entones a la primera se le añade esta clase, que elimina el margen de 10px en el lado izquierdo.
• omega: Es el final, se utiliza como el alpha pero la diferencia es que esta clase se añade a la última columna para eliminar el margen derecho de 10px.

Para finalizar

Ya ahora que les he mostrado como utilizar el grid 960 en acción ¡vayan y practiquen! Es lo mejor que pueden hacer para familiarizarse con este framework de CSS (si les llamó la atención). Recoremos que tenemos ciertas limitaciones, las cuales debemos lidiar usando nuestra imaginación. La idea de este sistema de maquetado es ahorrarnos tiempo y dolores de cabeza y NO UTILIZAR TABLAS para crear columnas (error muy común).

• Quiero el código
• Ver demo