Blueprint, framework para CSS

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>

Básicamente el corazón del framework son cinco estilos en cascada, cada uno con un objetivo diferente:

  • screen.css: Su cometido es cargar los estilos guardados en la carpeta ‘lib‘. Además podemos configurar para mostrar una imagen grilla que facilite la maquetación.
  • print.css: Posee algunas reglas que mejorar la vista de impresión.
  • lib/grid.css: Es el estilo en cascada que permite crear la maquetación que queramos, desde simples hasta complejas con varias columnas y secciones.
  • lib/typography.css: Establece las reglas tipográficas que mostrará el sitio (tamaño, fuente, color, etc). Tal vez sea el estilo en cascada que más modificaciones va a recibir, ya que este aspecto va a depender de cada diseño.
  • lib/reset.css: Resetea valores de margenes, padding, bordes, etc para que todos los navegadores muestren el contenido de la misma forma.

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

Leave a Reply

Your email address will not be published.