Blueprint CSS es un framework CSS, posiblemente el concepto de frameworks CSS sea un poco nuevo para ustedes pero el concepto es parecido a los frameworks de desarrollo web, es decir, una parte del trabajo ya viene hecha. En el caso de Blueprint nos trae estilos ya predefinidos basados en lo que son las mejores practicas para el diseño basado en CSS. Por ejemplo, una ves aplicamos las hojas de estilo de Blueprint, nuestros tipos de letra automáticamente reciben formatos basados en reglas básicas de buena tipografía. Pero la razón de ser principal de estos frameworks como Blueprint es facilitar el diseño basado en grid.

El diseño basado en grid quiere decir que yo mi documento lo convierto en un grid de cierta cantidad de columnas, en el caso de blueprint son 24. Una ves ya tengo mi grid, al posicionar yo mis divs solamente especifico la cantidad de columnas del grid que deseo que ocupen, sin tener que especificar el ancho en pixeles. Esto facilita el diseño bastante y ahorra tiempo, como dice el lema de blueprint, nos permite mas tiempo pasar innovando que diseñando.

Creando el diseño

Paso 1. Descargar Blueprint CSS

Descarguen Blueprint de la pagina oficial, el link esta al entrar a la pagina en su lado superior derecho.

Este es el diseño que vamos a crear, es de un blog que cree con unos amigos pero que ninguno de nosotros tuvo la dedicación para continuarlo (perdon Ofo).

Como podrán ver el diseño tiene 3 columnas, se van a sorprender lo fácil que es crear este diseño con blueprint a comparación de que si lo hiciéramos a mano.

Paso 2. Crear el documento HTML y referenciar los archivos CSS de Blueprint

Como podrán ver Blueprint no es nada mas que un conjunto de archivos CSS de los cuales los siguientes tenemos que referenciar en nuestras paginas:
screen.css
print.css
ie.css

Pueden empezar por crear el siguiente documento HTML:

<html>
<head>
<title>Bloquiemos.com</title>
<link rel=”stylesheet” href=”blueprint/screen.css” type=”text/css” media=”screen, projection” />
<link rel=”stylesheet” href=”blueprint/print.css” type=”text/css” media=”print” />
<!–[if IE]><link rel=”stylesheet” href=”blueprint/ie.css” type=”text/css” media=”screen, projection” /><![endif]–>
</head>
<body>
</body>
</html>

Como podran ver, referenciamos los archivos que les mencione anteriormente.

Paso 3. Agregando nuestro div “contenedor”

Ahora vamos a crear el div principal de nuestro disenio el cual contendra el resto de nuestros divs. A este div se le asigna la clase “container” la cual pertence a blueprint.

<div class=”container”>
 </div>

Ahora vamos a creer el div del encabezado y del menu de la siguiente manera:

<div class=”container”>
  <div id=”header” class=”span-24 last”>
    <h1>Bloguiemos.com</h1>
   <hr/>
    <div>
    <div id=”menu” class=”span-24 last”>
    Inicio | Deportes | Tecnologia | Videos
   <hr/>
   </div>
  </div>

Como podrán ver el div de encabezado lleva una clase que se llama “span-24 last”, se acuerdan que les mencione que nuestro grid tiene 24 columnas? entonces por medio de esta clase estamos especificando que nuestro div del encabezado abarcara las 24 columnas del contenedor y la clase “last” especifica que es el ultimo div en la fila, mas adelante van a entender mejor este concepto. Si yo quisiera que mi div solo utilizara 12 columnas, entonces la clase a asignar seria “span-12”. Vamos agregar mas divs para que vayan comprendiendo.

Ahora vamos agregar los primeros div de contenido(el div de la noticia principal, el de aplicaciones y el de herramientas). Estos 3 div van estar dentro de otro div con el id “contenido” de la forma siguiente:

<h1>Bloguiemos.com</h1>

<hr/>

<div>

Inicio | Deportes | Tecnologia | Videos

<hr/>

</div>

<h1>Se murio alguien</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>

</div>

<div id=”aplicaciones” class=”span-4?>

<h4>Aplicaciones</h4>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

<div id=”herramientas” class=”span-4 last”>

<h4>Herramientas</h4>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

</div>

</div>

como podran ver ahora especificamos que nuestros divs utilicen menos columnas, aparte de eso utilizamos la clase “colborder”, esto es para que nuestro div muestre un borde a la derecha como el borde gris que separa cada parte del contenido en nuestro disenio. Hasta ahorita asi se deberia de ver el disenio:

Ahora solo nos falta agregar los dos side bars de la derecha, el que contiene los últimos posts, y el de los videos. Para hacerlo solo necesitamos agregar dos div mas que ocupen el resto de columnas del grid. Hemos utilizado nueve columnas del grid hasta ahorita, ya que el div que contiene los ultimos 3 divs que agregamos le pusimos span-8 mas el borde que ocupa una columna, serian 9, así que tenemos 15 columnas para los demás divs.

Agreguemos la columna de últimos posts así:

<div id=”ultimos_posts” class=”span-4 colborder”>

<h3>Breaking News</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

Y la columna de videos asi:

<div id=”sidebar” class=”span-10 last”>

<h3>Breaking News</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.