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:
- 60px
- 140px
- 220px
- 300px
- 380px
- 460px
- 540px
- 620px
- 700px
- 780px
- 860px
- 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á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).
35 Comentarios
Que tal vos, dejame felicitarte por el tutorial, y en general por todo lo que estas haciendo mano, yo ando cabal en las mismas y es bueno saber que no es uno el unico que anda ahi, tratando de hacer del internet en guatemala algo con estandares de nivel mundial.
Segui mano!!! enserio pilas ahi!!!!
Shhh buena mano que buen tutorial te hechaste dale mano y quien quita mano yegas hacer un gran web master dale mano buena por el tutorial
Hola que tal, aún diseñaba sitios utilizando celdas o tablas, pero veo que ya quedó obsoleto el sistema además de ser pesadas para el sitio, por lo que veo practico este sistema css con div y con la mejora del 960 grid, pero me queda la duda de si es a fuerza que los márgenes laterales sean de 10 px, pueden ser de 5 o de 20px?
Estoy en la oficina donde no he tenido el tiempo suficiente de hacer pruebas, de hecho vi este sitio por medio de un amigo que me comentó del nuevo 960 grid (nuevo para mi), así que me quedan dudas sobre si se puede hacer como con las tablas que puedes meter varias columnas o rows en una sola para poner una imagen seccionada en varias más pequeñas para hacer botones de diferentes partes de esa misma imagen? bajaré tu código y trataré de seguirlo, aclaro soy diseñador gráfico y soy lento en la parte técnica más no en la gráfica.
@Neil Gonzáles Pues el que tengas 10px de cada lado es para que diseño “respire” y no esté todo muy pegado pero tampoco con mucho espacio. Ahora si deseas cambiar esta configuración (no te lo recomiendo) debes modificar el “960.css”.
Y de hecho el layout del tutorial coloqué dos columnas dentro de la columna de la izquierda. :D
Hola todo bien hasta para un novato como yo, pero alguien me puede dar una web donde aprender css con un poco mas de profundidad, creo que me hace falta, y gracias por aporte hermano.
Hola amigo interesante este framework la verdad es que es completo, por otro lado con que editor o IDE recomiendas hacer las modificaciones?, un abrazo desde Colombia!
Mira, yo utilizo Dreamweaver pero también puedes utilizar textmate para mac o notepad++ (windows) que es gratis, y según he escuchado es bueno.
Es cosa de gustos, lo que te aconsejo es que no trates de modificar el framework (si no tienes mucha experiencia en css) sino que lo hagas con los ID.
Hombre, felicitaciones por su facilidad para hacernos entender este maravilloso sistema, y mil gracias por ayudar de manera tan desinteresada a quienes no tenemos esa facilidad, nuevamente mil gracias desde Colombia.
Atentamente Juan Carlos U.
buen tutorial pero sigo diciendo como en todo lado ke posteo haszlo en video por favor.
muchas gracias
Me encanta tu sitio!! Y este tutorial esta muy bueno pero igual estos grid me tienen loco :P
Te felicito!
Gracias! Pero vas a tener que acostumbrarte a la nueva version de mi sitio.. jojo pronto estara.. espero que les guste a todos!
de donde bajo el código del grid? no comprendo casi nada. veo que maquetan en columnas, pero donde está el código? gracias
el codigo del xhtml/css que he hecho en el tuto, esta hasta abajo, donde dice “quiero el código”.. te contiene los 4 css (960.css,reset.css,text.css y el mio que es mi_estilo.css) los primeros 3 son del grid, alli podras ver como es que se hacen las columnas. Si no resuelvo tu duda, por favor hazmelo saber…
El sitio oficial http://960.gs/ enlaza con este sitio http://www.spry-soft.com/grids/ donde generan un grid personalizado. Se pueden configurar las 3 variables básicas, ancho de columnas, cantidad de columnas y separación de columnas.
Por otra parte muy bueno el tutorial.
Interesante, yo estoy tomando un pequeño curso de css y creo que esto va a estar muy bueno, gracias por el tiempo que invertiste y saludos desde Mexico
¡Que tal! Aparte de estrenar con mi primer comentario con mi nuevo sitio jeje Les quiero decir que estoy preparando mi primer freebie, con el layout que acabamos de hacer implementado para wordpress :D
Hola amigo, me gustaria que me pudieras ayudar o hace un tutorial sobre como crear un layout en photoshop para posteriormente usarlo con este framework
Ok! te parece si lo hacemos con el ejemplo que tenemos u otro :) … Y sabes que si deseas proponerme temas, con gusto lo puedes hacer en la sección de contacto en el formulario está la opción, por si tienes otras ideas y yo pueda ayudar ;)
Muy buen tutorial! Antes no creia en los frameworks de CSS, pero este se ve muy prometedor, lo estare usando en mi proximo proyecto. Gracias!
Gracias por le tutorial tenia algunas dudas pero con el tuto se an solucionado
sigue asi…
Mira esta muy bien tu tutorial y me llego la explicación que hiciste en barcamp, solo que fijate que me funciona muy bien, el problema es que yo lo quiero utilizar para las plantillas para joombla, pero no me hagarra los css y yo solo inserte la carpeta de css de grid 960, en el template que cree en joombla.
Una sola frase:
¡MIS RESPETOS!
Hoy empezé a leer acerca de este framework que estubo guardado en mi disco por mucho tiempo, y en la pagina de 960 vi el screenshot de tu sitio, realmente impresionante.
Saludos!
Hola Jepser! Muy bueno el tutorial. Además es bueno el acostumbrar a la gente que diseña webs a laburar con grillas o retículas. Esa es una deuda que tenía pendiente la web con los comunicadores visuales (como yo). Un saludo y gracias por el tuto! :)
Que excelente tu blog! y de veras q ando en busca de aprender mas sobre diseño web. Muy buenos aportes!
Hola jesper! soy diseñadora web que empieza con estas cosas maravillosas del CSS y buscando documentación me tope con tu blog GRACIAS POR COMPARTIR TUS CONOCIMIENTOS :D!!!
Tu blog està hecho en wordpress cierto? tienes planeado hacer algun tuto para personaliszar los blogs de wordpress? :) Es muy difícil pero tu eres tan genial que seguro no se te dificulta ;)
Saludos y estaré pendiente de tus actualizaciones ^^
Hola
pues no soy diseñador grafico, soy mas desarrollador de aplicaciones y me enfoque bastante al manejo de informacion; obiamente mis web no tienen nada estetico destacable y un css horrible, pero con este framework y l buena explicacion que usted da, creo que mejorare muchisimo.
a por un layout mas decente en mis desarrollos :P
Gracias
Si deseo realizar un esquema mayor a 960px como por ejemplo de 1024px. Cómo puedo hacerlo?
En http://www.960.gs te brindan herramientas para que puedas personalizar tu grid… pruebalo!
el código para descargar tiene un enlace erroneo 404
Hola, cual es la diferencia en usar una grilla de 12 o de 16 columnas?
el numero de columnas y la forma que puedes combinarlas es la diferencia rosi.
hola, quiziera saber por que al aser el codigo la maquetazion que quiero no me queda es decir coloco el container de 12 y quiero el grid de 6 * 6 pero no se be lo que quiero cada grid sale uno debajo del otro gracias
pues no debería pasar eso amigo, pues el codigo sería algo asi:
Me encantó tu blog. Además los temas están a todo dar. La experiencia que tengo es en todo lo que tiene que ver con telecomunicaciones móviles, y me gustaría apoyarte en lo que se pueda. Además, me gustaría poner un blog, pero no sé como empezar. El estilo y toque que le has puesto a tu pagina está fantástico. Saludos!!!