A lo largo de los últimos artículos del Manual de Blueprint ya hemos tenido ocasión de aprender a trabajar con algunas clases principales del framework CSS para la configuración de la rejilla, pero aun quedan muchas otras clases que podremos usar para determinar otras cosas sobre el posicionamiento de los contenedores en la página.

A continuación daremos un repaso a todas las clases que podemos utilizar cuando configuramos la rejilla, lo que también nos dará una visión más amplia de las posibilidades de maquetación implementadas en Blueprint.

Antes de nada, convendría recordar que nunca está de más echar un vistazo al código fuente del framework comentado, que está en el directorio blueprint/src del paquete de descarga, en el archivo "grid.css". En ese archivo CSS encontraremos comentarios al código con diversas informaciones útiles y breves explicaciones de los uso de las clases. Además, podremos ver cuáles son los estilos CSS especificados por el framework y aprender un poco sobre cómo está hecho.

Clases de la rejilla (grid) en Blueprint

Clase container: la clase principal de la estructura de página de Blueprint. Todo debería colocarse dentro de un contenedor principal, con la clase container.

Clase showgrid: una clase útil para identificar visualmente la rejilla de Blueprint. La podemos asignar sobre contenedores con clase "container" o "span-x", para mostrar con una imagen de fondo la división de columnas que implementa el framework CSS.

Clase span-x (desde span-1 a span-24): Para hacer los contenedores que se colocan en la rejilla, utilizamos un conjunto de clases que va de la span-1 a la span-24. Estos contenedores se anclan en una de las filas de contenido de la rejilla y el número del 1 al 24 indica la cantidad de columnas que ocupa. Las clases span-x también se pueden aplicar sobre elementos INPUT o TEXTAREA, para asignar la anchura de esos elementos de formulario.

Clase last: La clase CSS "last" se coloca en el último contenedor que haya en una fila de contenidos, para indicar justamente que es el último elemento de esa fila y que el siguiente empiece siempre debajo de esa fila de contenidos y a la izquierda.

Clases append-x (desde append-1 hasta append-23): estas clases sirven para rellenar con un espacio vacío después del elemento. Imaginemos que tenemos un contenedor con span-3 y luego queremos tener un espacio vacío de 6 columnas. Entonces podríamos colocarle a ese contenedor las clases "span-3 append-6", con ello el espacio total que se reservará para ese contenedor es de 3 + 6 = 9 columnas (tres columnas de espacio real para meter contenidos y 6 columnas de espacio en blanco después del contenedor).

Clases prepend-x (desde prepend-1 a prepend-23): son unas clases parecidas a append-x, con la diferencia que el espacio en blanco se coloca antes del contenedor. Esta clase se utiliza en conjunto con las clases span-x, igual que append-x.

Clase border: crea un borde en la parte derecha del contenedor, de un píxel de anchura.

Clase colborder: sirve para crear un borde, igual que la clase anterior border, pero lo hace dejando un mayor espacio en blanco entre la línea del borde y los contenidos de los lados. El tema es que si utilizamos esta clase se expandirá el contenedor en una columna adicional y tendremos que tenerla en cuenta cuando hagamos el recuento de 24 columnas por cada fila de contenidos.

Clases pull-x y push-x: que van desde pull-1 a pull-24 y desde push-1 hasta push-24 y sirven para empujar o traer el contenido de una columna y situarlo en un lugar distinto. Si utilizamos la clase pull-x es como trasladar el contenido de ese contenedor a la izquierda y en "x" colocamos el número de columnas que lo movemos. Por su parte, si utilizamos las clases push-x lo que estamos haciendo es como empujar el contenido a la derecha y en la x de 1 a 24 especificamos la cantidad de espacio que lo deseamos mover a la derecha. El contenido se colocará encima de otros contenidos que pueda haber en el sitio donde lo estamos trasladando.

Clase prepend-top: Sirve para dejar un espacio en blanco sobre un contenedor. El espacio en blanco que deja es igual a 1.5em, osea, una vez y medio el tamaño de la fuente configurada en el elemento.

Clase append-bottom: Sirve para dejar espacio en blanco debajo de un contenedor, igual que prepend-top, pero dejando el margen en la parte de abajo.

Clase box: para crear una caja con padding (espacio en blanco entre el borde del elemento y el lugar donde empieza el contenido. Se puede utilizar esta clase para las capas con contenido a colocar en una de las columnas, es decir, para un DIV que coloquemos anidado dentro del DIV span-x para definir la columna.

Estilo para etiqueta HR: Esto no es una clase, sino el estilo que dan en Blueprint a las etiquetas HR. Sirve para crear una línea horizontal con la que separar columnas.

Clase space para elementos HR (hr.space): Es una línea de separación pero en blanco.

Clase clearfix: Esta clase es muy importante, ya que nos resuelve el problema de los fondos sobre capas que tienen contenidos flotantes, que a veces el fondo no ocupa todo el espacio que ocupa la caja. Para quien no sepa a qué me refiero, consultar el artículo Solución al problema de float en maquetación CSS.

Clase clear: Para que la capa se coloque en una nueva fila, dejando libres los espacios de los elementos que pueda haber flotantes en anteriores filas. Esta clase implementa el clear:both que ya debemos saber lo que signigica en CSS.

Para ilustrar el funcionamiento de algunas de estas clases, por lo menos las más utilizadas, vamos a crear un ejemplo más avanzado con Blueprint, en el siguente artículo.