Blueprint, framework para css

Blueprint es un framework para CSS que se centra en reducir el tiempo de desarrollo de tus CSS con numerosas interesantes características que te permiten hacer más con menos.

Este framework de CSS por lo tanto nos da soporte para organizar y desarrollar nuestros CSS e ir encajando todas aquellas piezas que integren nuestra plantilla final.

Instalación

Para instalar Blueprint deberemos descargarnos el paquete y colocarlo en el directorio de CSS de nuestro sitio, una vez hecho esto tendremos que añadir estas líneas a la cabecera de la página en la que queramos utilizarlo.

<link rel=”stylesheet” href=”css/blueprint/screen.css” type=”text/css” media=”screen, projection”>
<link rel=”stylesheet” href=”css/blueprint/print.css” type=”text/css” media=”print”>

Ejemplo de uso de Blueprint

Vamos a crear la estructura de un sitio simple que se componga de una cabecera, columna derecha, columna izquierda y contenido.

<div class=”container”>
<div class=”column span-14″>
Header
</div>
<div class=”column span-3 first”>
Left sidebar
</div>

<div class=”column span-8″>
Main content
</div>
<div class=”column span-3 last”>
Right sidebar
</div>
</div>

Resultado

Descarga: Blueprint
Primeros pasos con Blueprint
Ejemplo de sitio desarrollado con Blueprint