Experto en diseño, HTML/CSS, y encargado de las campañas de marketing online de Axtro. Con años de experiencia en el mundo del diseño, además de formar parte de nuestro equipo realiza cursos de formación en diseño.
960 Grid System es un framework CSS, o sea, un patrón de estilos que establece las clases necesarias para crear columnas en un sitio web de diversos tamaños, con la que podremos maquetar los contenidos de la web de manera fácil y ordenada.
Lo interesante de este sistema es que una vez que tenemos memorizadas las clases, podremos ahorrar mucho tiempo en la maquetación, ya que solo tendremos que asignarle a cada contenedor de elementos las clases disponibles en el sistema, para que tenga el ancho y la posición deseada.
En la web de este sistema, www.960.gs, podremos encontrar toda la documentación, en inglés, que nos permitirá ver ejemplos, tutoriales, etc.
Ya sabemos lo que es 960 Grid System, ahora veremos cómo funciona. Antes de realizar el diseño del sitio, debemos tener en cuanta que este framework trabaja con un ancho máximo de 960px. Dentro de este ancho, el sistema nos permite adaptar nuestros diseños en 12 o 16 columnas. Tanto en la variante de 12 y la de 16, cada columna dispondrá de un margen lateral derecho e izquierdo de 10px, por lo que debemos asumir que el ancho entre columnas será de 20px.
En la web oficial podemos descargarnos (http://960.gs/files/960_download.zip) un archivo que contiene las plantillas para determiandos programas utilizados para diseñar (Photoshop, Adobe Ilustrator, etc), sobre las que podremos montar nuestros diseños una vez que tengamos claro si nos favorece mejor utilizar 12 o 16 columnas.
12 Columnas.
Anchos posibles:
1: 60px
2: 140px
3: 220px
4: 300px
5: 380px
6: 460px
7: 540px
8: 620px
9: 700px
10: 780px
11: 860px
12: 940px
Sabiendo esto, adaptaremos nuestros contenedores a estos anchos. Por ejemplo, para un diseño de 3 columans, una combinación de anchuras podría ser de 140px, 460px, 300px.
16 Columnas.
Anchos posibles:
1: 40px
2: 100px
3: 160px
4: 220px
5: 280px
6: 340px
7: 400px
8: 460px
9: 520px
10: 580px
11: 640px
12: 700px
13: 760px
14: 820px
15: 880px
16: 940px
Con este sistema podríamos maquetar hasta 16 columnas de 40 pixeles de ancho, o cualquier otra combinación que deseemos, siempre que el ancho máximo del diseño sea, incluyendo los márgenes, de 960px.
Hasta aquí hemos esxplicado en qué consiste este sistema, en el próximo capítulo hablaremos de cómo utilizarlo.
Compartir
0 comentarios sobre "960 Grid System - Maquetador de CSS"