Introducción a 960 Grid System

En este post empezaré diciendo que no soy diseñador sino programador. Es por eso que siempre estoy buscando soluciones para maquetar más rápido en HTML/CSS y sobre todo, maquetar más sencillo. En esta búsqueda, he descubierto recientemente el mundo de los framework CSS y más concretamente, el concepto Grid CSS.

En el blog de Koalite, hay un interesantísimo artículo que habla sobre ello Diseño Web Sensible y Grids CSS.

También hay disponible un excelente tutorial en desarrolloweb.com, http://www.desarrolloweb.com/manuales/maquetacion-css-960-grid-system.html y otro tutorial más en http://jepserbernardino.com/idea/960-grid-un-framework-para-css/

Yo por mi parte voy a apostar inicialmente por 960 Grid System para un par de sencillos proyectos que tengo que abordar próximamente.

En mis propias palabras, 960gs es un framework CSS que nos permitirá maquetar nuestras páginas web como si estuviéramos trabajando con tablas HTML. Está claro que por hoy por hoy maquetar con tablas es contra-natura, pero también hay que reconocer que maquetar con tablas (y siempre que no las anidaras excesivamente) era sencillo e intuitivo y sobre todo, muy accesible para los maquetadores noveles. Siendo así, 960gs combina para mí un diseño tableless con bondades similares a la maquetación con tablas (y que nadie me crucifique por hablar de bondades en lo relativo a tablas, ¿eh?)

Como el movimiento se demuestra andando, veamos un sencillo ejemplo con 960grid.

Queremos maqueta una típica página maestra de backend. Algo parecido a esto:

Está claro que este diseño tampoco supone un reto de gran calibre, pero
¿Por qué pegarse con float, width, height, etc. si puedo hacerlo más sencillo con 960gs?

Veamos el código necesario para llevarlo a cabo:

<div class="container_12">
    <div id="header" class="grid_3 prefix_9">
        header
    </div>
    <div class="clear">
    </div>
    <div id="logo" class="grid_12">
        logo</div>
    <div class="clear">
    </div>
    <div id="menu" class="grid_12">
        menu</div>
    <div class="clear">
    </div>
    <div id="sidebar" class="grid_3">
        sidebar</div>
    <div class="grid_9">
        <div id="title" class="grid_7 alpha">
            title</div>
        <div id="help" class="grid_2 omega">
            help</div>
        <div class="clear">
        </div>
        <div id="content" class="grid_9 alpha">
            content</div>
    </div>
    <div class="clear">
    </div>
    <div id="footer" class="grid_12">
        footer</div>
</div>

El resultado es el siguiente (he activado ver los bordes de los DIV desde la IE Developer Toolbar):

Como podemos comprobar hemos podido crear el layout de nuestra página con poco código y poco esfuerzo.

Ciertamente tampoco quiero dar demasiado misterio al concepto de framework CSS.
En resumen, nos son más (ni menos tampoco) que 3 ficheros css que tenemos que incluir en la cabecera de nuestra página.

<link href="StyleSheets/reset.css" rel="stylesheet" type="text/css" />
<link href="StyleSheets/text.css" rel="stylesheet" type="text/css" />
<link href="StyleSheets/960.css" rel="stylesheet" type="text/css" />

• reset.css es un reseteador de estilos para intentar homogenizar la visualización en todos los navegadores.


• text.css es una hoja de estilos que define los estilos básicos de texto (h1…h6, p, etc.)


• 960.css es realmente quien define la rejilla.

Las clases definidas en el fichero 960.css son:

container_12 y container_16 que tiene que ser asignadas al DIV contenedor de una rejilla. Digo “una” rejilla porque se pueden anidar columnas e incluso podemos tener varias rejillas al mismo nivel en la misma página (incluso de distinto número de columnas).

Si no tenemos suficiente con una división de 12 o 16 columnas, también podemos utilizar el generador on-line para definir el número, anchura y margen entre columnas desde http://grids.heroku.com/

Después de haber definido el contenedor, tenemos las clases grid_1 hasta grid_12 o grid_16, que lo que hacen es definir el número de columnas que utilizará cada uno de nuestros DIV.

También tenemos las clases alpha y omega, que sirven al propósito de eliminar el margen izquierdo y derecho, respectivamente, cuando anidemos columnas dentro de otras columnas. En líneas generales, primera columna de una columna anidada tiene que llevar alpha y última columna de una columna anidada tiene que llevar la clase omega. Todo ello para eliminar margen izquierdo de la primera columna y margen derecho de la última columna.

Si queremos crear espacios en blanco antes o después del contenido, tenemos igualmente las clase prefix_1 hasta prefix_11 o prefix_15 y la clase suffix_1 hasta suffix_11 o suffix_15.

Para limpiar los floats, tenemos la clase clear que tendremos que meter siempre después de una separación horizontal.

Como últimas clases disponibles, también es posible alterar o intercambiar columnas en lo relativo a su posición con las clases pull y push. Más información sobre reorganizar las columnas en http://www.clubosc.com/960-grid-tutorial-understanding-push-and-pull-classes.html

Por último, también hay herramientas disponibles para ver la grilla en Photoshop o desde el mismo navegador (esto nos ayudará bastante a la hora de plantear el Layout a conseguir con 960gs). Por ejemplo y ver la grilla en el navegador podemos seguir las instrucciones de esta página http://peol.github.com/960gridder/ que lo que hace es agregar un bookmarklet al navegador para cargar un overlay con la grilla.

Está claro que para mi las grillas CSS son aún un terreno por explorar y sobre todo llegar al convencimiento de que son útiles y no intentar utilizar para nada más que para lo que son, es decir, Layouts.

Un saludo.