SummArg | Cursos y recursos para webmasters

09/04/2010

CSS Framework: El sistema de 960.gs

Los frameworks son estructuras “pre-armadas” para facilitarnos ciertas tareas. El sistema de grilla 960 apunta justamente a ahorrarnos un poco de esfuerzo en la tarea de maquetar un sitio web, proporcionándonos las bases para que diseñemos sitios que por defecto tendrán un ancho de 960 pixeles (de ahí su nombre).

906.gs nos ofrece un set de columnas escritas en CSS que podemos descargar desde su sitio oficial. Además del CSS, en dicho sitio se nos ofrecen templates para Fireworks, Photoshop, InDesign, Flash, GIMP y hasta PDFs para hacer bocetos. Con su editor de código favorito, o incluso con el notepad, ya podrán comenzar a trabajar. Les recomendamos el Notepad ++

Columnas y contenedores

Las columnas están divididas dentro de contenedores, así determinada cantidad de columnas compone un contenedor. Los contenedores por defecto son container_12 y container_16, los cuales encierran 12 y 16 columnas respectivamente.

El contenedor de 12 columnas otorga un ancho de 60 pixeles a cada columna y el de 16 lo hace con columnas de 40 pixeles de ancho. El espacio entre columnas es de 20px para ambos casos, así como los márgenes laterales de ambos sets son de 10px (dejandonos un espacio para contenidos de 940px).

Dentro de cada contenedor, nos manejaremos indicando la cantidad de columnas que deseamos abarcar. En Webdesigner Depot nos ofrecen este ejemplo muy claro para lo que comentamos.

Obviamente las secciones que vemos en gris son meramente ilustrativas, para darnos una idea de la división que tienen las columnas de container_16. Los conjuntos de columnas se llaman grid. De ese modo, grid_4, contiene 4 columnas y grid_12 engloba 12 columnas dentro del contenedor principal.

Obtener una grilla personalizada

En el home de 960.gs nos encontraremos con una sección llamada Custom CSS Generator en donde podremos seleccionar un número determinado de columnas, ver el ancho que tendrán y asignar un nuevo número a los separadores (gutter). Si necesitamos obtener un html y el CSS, podemos acceder al HTML Layout Generator y jugar con los valores de las columnas.

De ninguna manera esto nos generará un sitio automáticamente, pero es un gran punto de partida para poder maquetar un sitio con dimensiones adecuadas.

Dejar un comentario

  1. ¿Una grilla???, digo yo qué será una traducción automática, sino…
    REJILLA, coño 😉

  2. Nekko

    En España veo que dicen rejilla, en Argentina y otros paises latinoamericanos decimos Grilla. Saludos.

Dejar un comentario