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

Enlaces Relacionados

• Evita sobrecargar tus archivos CSS
• Un buen pie de página
• Conversor Online de JPG a HTML (IMG2HTML)
• Buenas herramientas web de diseño
• El futuro de Internet, X/HTML 5 vs XHTML 2
• Google prueba un nuevo diseño de portada
• Editores CSS
• El hack definitivo para tus CSS
• Visor de thumbnails
• Diseña menus CSS en dos clicks