Desde que probé este framework de CSS, el ‘960 grid system’ venía barruntando la posibilidad de dedicarle un tutorial más o menos amplio en este blog. Pero me cuando finalmente me he decidido ha sido el sábado, tras estar comentándolo con Alberto, cuando me he dado cuenta de que si bien todavía hay cosas que se me escapan, tengo ya muchas cosas claras en cuanto al funcionamiento de este framework. Así que me tomaré este post como una recopilación de todo lo que he sacado en claro sobre el sistema y de paso, dejo disponible un poco de documentación que, de momento en español escasea.
El sistema 960 ofrece una rejilla de doce o de dieciséis columnas sobre la que podremos maquetar a nuestro gusto el diseño de nuestra página web. Sobre ese esqueleto podremos colocar módulos que, según la cantidad de columnas que tomemos, nos van a permitir bastante versatilidad a la hora de ajustar nuestros diseños.
De la web 960.gs nos descargamos una serie de archivos. Lo que de verdad nos va a interesar se encuentra en la carpeta ‘/code/css’. Contamos ahí con tres archivos a los que es bueno echarles un vistazo para saber de qué estamos hablando (para esto será más útil si abrís los que están bajo la carpeta ‘/uncompressed’)
En primer lugar tenemos un reset.css que realiza una serie de definiciones a valores por defecto de las etiquetas de HTML, para asegurarnos de que en caso de no especificar nada, los elementos se verán igual independientemente del navegador. En segundo está text.css que define los tamaños y espaciado de todo lo que tenga que ver con texto dentro de la web (h1,h2, p...). Y finalmente el que más nos interesa: 960.css.
El framework trabaja sobre un diseño de ancho fijo de 960 pixel, pensando en el estándar de las pantallas de 1024 de ancho, sobre la que podremos definir o bien una rejilla de doce columnas (60 pixel/columna y 20 pixel de espaciado) o de dieciséis (40 pixel/columna y 20 pixel de espaciado). Sobre esta base utilizará la herencia de clases en css para definir los márgenes y paddings adecuados para que todo se ajuste a la perfección a esa rejilla.
Las clases que hay que conocer
A partir de ahora, te vendrá bien tener el archivo demo.html a mano, a modo de chuleta. En él veremos el uso que se da a las clases de tipo container_n, grid_n, prefix_n, suffix_n y clear.
container: Esta clase define al div padre de toda la página y determina la rejilla que hayamos escogido:
<div class="container_12"></div>
<div class="container_16"></div>
grid: Seguido de un valor del uno al doce o al dieciséis, según la rejilla en que trabajemos va a determinar el número de bloques de ancho que queremos que tenga nuestro div. Así para abarcar cuatro columnas sería:
<div class="grid_4"></div>
prefix y suffix: El grid vacío de contenido no ocupa anchura, por eso cuando queramos dejar espacio libre a izquierda o derecha tendremos que utilizar estas clases. Un div de tres columnas de ancho pero que en lugar de alinearse a la izquierda de la página, deje dos columnas libres se definiría:
<div class="prefix_2 grid_3"></div>
Y si queremos que esas dos columnas las deje después sería:
<div class="grid_3 suffix_2"></div>
alpha y omega: El espacio entre columnas se realiza dejándole a cada div 10px de margin a izquierda y derecha. Esto provoca que si tenemos dos clases de tipo grid_n anidadas, la div hija dejaría 10 pixel adicionales provocando que se desalineasen en los extremos. Por eso en estos casos habrá que corregir esto aplicando a la primera de las anidadas la clase alpha y a la última la clase omega, para corregir esos 10 pixel de más.
clear: La que vamos a utilizar para limpiar los saltos de lineas, siempre entendidos en cuanto a bloques se refiere.
Un ejemplo práctico, rediseñando mi blog
Vamos a hacer una nueva distribución con las tres últimas noticias de mi blog parecida a esta:
Una vez tenemos claro qué queremos (en este caso la imagen es del trabajo ya acabado, aquí vienen bien las plantillas para bocetos de las que ya hemos hablado) hay que diseccionar ese diseño para adaptarlo a la rejilla.
Si nos decantamos por una rejilla a doce columnas, nos encontramos con que header y footer van a ocupar las doce columnas (grid_12 ). El bloque gris de información personal también cubre las doce columnas aunque dentro lo vamos a estructurar para sacar las cuatro columnas. Los posts están organizados dejando dos columnas libres a la izquierda. En este caso las dejaremos “inutilizadas” con la clase prefix_2, pero bien se podrían utilizar en la realidad para un menú de navegación, por ejemplo, con una clase de tipo grid. De las otras diez, los dos primeros post van a abarcar seis columnas (grid_6) y el tercero cuatro (grid_4).
<div class="container_12">
<div class="grid_12"></div>
<div class="clear"> </div>
<div class="grid_12"></div>
<div class="clear"> </div>
<div class="prefix_2 grid_6"></div>
<div class="grid_4"></div>
<div class="clear"> </div>
<div class="grid_12"></div>
<div class="clear"> </div>
</div>
header
El título del blog utiliza las etiquetas h1, que habrá que redefinir en la css. También le damos un id para poder poner el color de fondo en la css. Este es el código para el HTML:
<div class="grid_12" id="header">
<h1>PINTURA BLANCA</h1>
</div>
<div class="clear"> </div>
Y el CSS:
div#header {
background-color: #ff8930
}
#header h1{
color: #fff;
font-size: 45px;
font-weight: 300;
letter-spacing: 3px;
margin-left: 15px;
margin-top: 25px;
word-spacing: 0.1em;
}
personal
El espacio de información personal va maquetado a cuatro columnas. Eso significa que hay que coger las columnas de la rejilla de tres en tres. Como estamos anidando estos tres grids dentro de otro, es importante que nos acordemos de aplicar las clases alpha y omega a primero y último. El esqueleto va a quedar así:
<div class="grid_12" id="personal">
<div class="grid_3 alpha"></div>
<div class="grid_3"></div>
<div class="grid_3"></div>
<div class="grid_3 omega"></div>
</div>
<div class="clear"> </div>
Y si alguien quiere echarle un ojo al estilo CSS:
div#personal {
background-color: #ccc;
margin-top: 10px;
}
Dentro llenamos las cajas con texto de relleno y redefinimos los estilos de texto a nuestro gusto.
posts
En concreto para el primer post vamos a incluir una foto a tres columnas (220 pixel de ancho) y el resto del texto a otras tres. Como queremos que el título se ajuste al ancho total, anidaremos el h1 directamente bajo el grid_6. Para el contenido, como imaginais: dos grid_3. Aquí simplemente hay que preocuparse de ajustar el ancho de la imagen al ancho de las tres columnas para que no se salga por ningún lado. Para este tipo de medidas es muy útil la chuleta del demo.html.
<div class="prefix_2 grid_6">
<h1>Cineforum: The Wrestler, de Darren Aronofsky</h1>
<div class="grid_3 alpha"></div>
<div class="grid_3 omega">
<img src="Image0.jpg" width="220" />
</div>
</div>
El segundo post no tiene más misterio que, como acabamos de hacer con la imagen, ajustar el ancho al correspondiente a las seis columnas, que es de 460 pixel. Y el tercer post se escribe directamente dentro del grid_4 que escribimos en el esqueleto inicial.
En conclusión
Hemos realizado así un sencillo ejemplo en el que tocamos todas las claves para poder estar haciendo rápidamente el esqueleto de una página web apoyándonos en la rejilla que nos provee el ‘960 grid system’. Como puntos más importantes para tener en cuenta (es probable que la mayoría de quebraderos de cabeza que puedan surgir tengan que ver con estos):
- Usar las clases prefix y suffix (ojo con la 'ff' de suffix, que se me llevaba escapando no sé cuanto tiempo)siempre que queramos dejar espacios en blanco, antes que un grid vacío, porque éstos sin contenido no tienen anchura.
- Prestar mucha atención a las clases alpha y omega siempre que anidemos unos grid dentro de otros. Si algo se nos desalinea cuando no debería seguramente se nos haya escapado esto.
- Acordarnos siempre de un div de la clase clear al completar una línea, antes de pasar a la siguiente.
Link: 960 Grid System
Yo ya lo advertí, éste es un deporte que me gusta demasiado y de vez en cuando iba a merecerse unas líneas en este blog. Y hoy con más razón que nunca, porque no sólo ha vuelto la Fórmula 1, sino que se ha recuperado parte de ese viejo espectáculo que algunos añorábamos, en el que había vida más allá de McLaren y Ferrari, con un abanico de equipos con posibilidades de hacer buenos resultados.
