960 Grid, un framework para CSS

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

[caption id=”attachment_195” align=”aligncenter” width=”300”]Grid de 12 columnasGrid de 12 columnas Grid de 12 columnas[/caption] 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

[caption id=”attachment_201” align=”aligncenter” width=”250”]Así esta dividido nuestro layout en la parte del cotenidoAsí esta dividido nuestro layout en la parte del cotenido Así esta dividido nuestro layout en la parte del contenido[/caption] 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!

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:

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

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:

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

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! [caption id=”attachment_193” align=”aligncenter” width=”250”]Así quedará el layoutAsí quedará el layout Así quedará el layout[/caption]

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).

·

🇨🇴 Colombia en abril, speaker en JS Colombia meetup.

🇪🇸 Madrid el 20 y 21 de abril, speaker en WordCamp Madrid.

🇵🇹 Porto 18 y 19 de mayo, speaker en WordCamp Porto.

🇵🇱 Polonia 4 y 5 de Diciembre, speaker en Frontend Connect.