La parte más importante de este framework CSS es la rejilla, que como ya habíamos adelantado en el Manual de Blueprint, permite situar los elementos de la página de una manera precisa y sencilla. En este artículo mostraremos cómo funciona esta rejilla y las principales clases para poder maquetar una página web.

Blueprint propone un contenedor de 950 píxeles de anchura, que se divide en 24 columnas. La columna ocupa un espacio de 30 píxeles, con una separación de 10 píxeles entre columnas.

Mediante estas dimensiones, como decimos, se pueden conseguir 24 columnas en un diseño, pero nosotros podemos unir dos o más columnas para obtener espacios mayores. Por ejemplo, si deseamos que en nuestro diseño haya dos columnas, podemos dividir las 24 disponibles en 18 para el cuerpo y 6 para la barra de enlaces lateral.

Dos columnas juntas miden 30 píxeles de cada una, más los 10 píxeles de separación entre ellas, en total 70 píxeles. Si unimos 3 columnas tendríamos 30 píxeles de cada columna menos dos separaciones de 10, con lo que suma 110 píxeles. Así podríamos conseguir contenedores de hasta 24 anchuras distintas. En general, la anchura disponible al juntar varias columnas la podríamos calcular con la fórmula:

anchura = (columnas_que_unimos * 40) - 10

Para que quede claro cómo se combinan columnas se puede ver esta imagen, en la que tenemos una representación de dos contenedores, como en el ejemplo anterior, uno para el cuerpo con 18 columnas y otro para el lateral, de 6 columnas.

Para generar todas las columnas existen unas clases CSS que van desde span-1 a span-24. Simplemente se utiliza la palabra "span-" y el número de columnas que deseamos juntar.

span-1 (contenedor con 30 píxeles)
span-2 (contenedor con 70 píxeles)
span-3 (contenedor con 110 píxeles)
...
span-23 (contenedor con 910 píxeles)
span-24 (contenedor con 950 píxeles)

Para hacer una estructura de página, es decir, definir los contenedores de nuestra plantilla o layout, podemos utilizar diversos contenedores span-x y además, podremos anidar contenedores para producir estructuras de página más complejas.

Tenemos que tener en cuenta que en cada sección tenemos que completar las 24 columas, es decir si dividimos el espacio de la página en diversas secciones, sumandolas en la anchura total del documento, debemos tener siempre las 24 columnas de espacio utilizado.

Además, en el contenedor que complete hasta la columna 24 tenemos que ponerle también la clase "last".

Veamos un ejemplo de estructura de página basada en Blueprint.

<div class="container">
   <div class="span-24 last">
      Cabecera
   </div>
   <div class="span-16">
      Cuerpo izquierda
   </div>
   <div class="span-8 last">
      Lateral derecha
   </div>
   <div class="span-24 last">
      Pie
   </div>
</div>

En esta estructura tendremos una cabecera que ocupará toda la anchura disponible (con span-24), una parte central que está dividida en dos columnas, una para el cuerpo a la izquierda (con span-16) y otra para la barra de navegación (con span-8) en el lateral derecho. Acabará la página con un pie que también ocupa todo el ancho disponible del contenedor.

Es importante ver que cada una de las secciones (o filas de contenidos) acaba con un contenedor que tiene la clase "last".

Con estas clases podrás crear estructuras de página todo lo complejas que desees, aunque el framework tiene muchas otras cosas que todavía no hemos visto. No obstante, con lo que sabes ya podrás hacer bastantes cosas y todo irá bien mientras respetes:

• Poner siempre la clase "last" en la última columna de cada fila.
• Que la suma de las columnas en cada fila sea siempre 24

Hay que fijarse que todas las partes de la página tienen contenedores que ocupan las 24 columnas. En la cabecera está claro porque usamos un span-24 que ya son todas las columnas y en la parte central de la página tenemos 16 columnas del cuerpo + 8 columnas del lateral = 24 columnas. El pie de página también tiene sus 24 columnas en un único contenedor. En el próximo artículo veremos ya un ejemplo de página completo que utiliza Blueprint.