Blueprint: CSS sencillo

Últimamente he estado probando un poco Blueprint, un proyecto de código libre alojado en Google Code. En esta entrada voy a presentar esta librería o «framework» para trabajar con CSS.

Lo primero que quiero destacar es que yo no soy diseñador ni maquetador, y por tanto voy a dar una visión bastante superficial.

Bien, ¿y para qué sirve Blueprint?. Pues Blueprint es una herramienta que divide nuestro área de diseño en una cuadrícula, lo que nos facilita el diseño y situación de los distintos elementos de nuetsra página. Realmente no es una cuadrícula porque la división es únicamente horizontal.

Existen otras herramientas similares como 960 Grid System o YUI Grids CSS.

En el caso de Blueprint, la configuración básica nos fija un ancho de 950px dividido en 24 columnas de 30px con 10px entre ellas.

Para utilizarlo basta con añadir sus archivos css en la cabecera de nuestras páginas:

	<link type="text/css" rel="stylesheet" href="css/blueprint/screen.css" />
	<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">
	<!--&#91;if IE&#93;>
	<link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection">
	<!&#91;endif&#93;-->

Ahora, marcamos con un div class="container" la zona controlada por Blueprint. Como podemos ver en las rutas habremos situado screen.css, ie.css y print.css en css/blueprint y es conveniente poner también src/grid.png, ya que si añadimos la clase showgrid nos pone de fondo una cuadrícula muy útil en tiempo de diseño.

Y ahora empezamos a maquetar la página con la ayuda de Blueprint.

<div class="container showgrid">
	<div class="span-15">
		<p>Lorem...</p>
		<p>Proin...</p>
		<p>Nam... </p>
	</div>

	<div class="span-9 last">
		<p>Duis...</p>
		<p>Fusce...</p>
	</div>
</div>

Como vemos un poco de código tiene un resultado bastante notable. Las clases span-15 y span-9 dan la anchura a cada parte (15 + 9 = 24) y con la clase last (obligatoria) le indicamos que es el último elemento de una fila.

Existen otras posibilidades para dejar columnas libres delante (prepend-1) o detrás (append-2) y algunas más.

Para terminar un apunte. He comentado la configuración básica de Blueprint, que es la que aparece en los css comprimidos que se adjuntan. Pero si no se ajusta a nuestros gustos o necesidades, en la descarga del producto se adjunta unos scripts en Ruby que nos generan los css con una configuración que le suministramos.