Comenzar a usar Blueprint

En este artículo veremos qué es lo que trae el archivo para descarga de Blueprint y os instaremos a echar un vistazo a sus contenidos. Luego mostraremos el código que tenemos que poner en nuestra web para incluir los archivos CSS y comenzar a utilizar blueprint en una página web.

Componentes de la descarga de Blueprint

Directorio Blueprint:
Tenemos los archivos del framework ie.css, print.css y screen.css. Esos tres archivos son los que tendremos que incluir y luego comentaremos para qué sirve cada uno. Estos archivos están "comprimidos", es decir, sin comentarios, saltos de línea y otras cosas para que ocupen poco espacio en Kb.

Directorio blueprint/src:
Son los archivos fuente del framework, pero con el código completo, con los comentarios y formato para que se puedan leer cómodamente. Es conveniente echar un vistazo a estos archivos, puesto que podremos aprender muchas cosas, sobre cómo está hecho y las clases que han creado para que utilicemos al maquetar las páginas. Tiene los siguientes archivos:

• reset.css: Código para resetear los estilos de todos los navegadores y hacerlos compatibles entre si.
• typography.css: definición de tipografía por defecto para la página web, que soluciona algunos problemas cuando se trabaja con fuentes
• grid.css: Este es el archivo más importante, con las clases para generar la rejilla, así que merece la pena prestar atención a cómo está hecha y qué clases nos ofrece.
• forms.css: Código para estilizar formularios y mensajes al usuario.
• ie.css: con estilos propios para Internet Explorer
• print.css: Los estilos que se utilizarán cuando se imprima la página en papel.

Insisto en que es buena idea abrir esos archivos y echar un vistazo al código, los comentarios y así vamos tomando una idea de cómo es y cómo funciona el framework.

Directorio blueprint/plugins:
Una serie de plugins que funcionan sobre blueprint para diferentes casos de uso. Más adelante hablaremos sobre plugins.

Directorio lib:
Con algunos scripts en el lenguaje de programación Ruby para trabajar con Blueprint.

Directorio templates:
Plantillas para empezar a diseñar en un editor gráfico, con guías para ajustarse al espacio por columnas definido en la rejilla. En el momento de escribir este artículo sólo está disponible la plantilla de Photoshop (archivo PSD) con la rejilla de Blueprint.

Directorio test:
Contiene ejemplos de páginas creadas para probar las características y posibilidades de Blueprint. También muy interesante, ya que es una manera interesante de ver cómo desarrollar la estructura de página de Blueprint.

Incluir los archivos de Blueprint en la página

<link href="css/blueprint/screen.css" type="text/css" rel="stylesheet" media="screen, projection">
<link href="css/blueprint/print.css" type="text/css" rel="stylesheet" media="print">   
<!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->

El primer archivo screen.css contiene todos los estilos que se aplican cuando la página se visualiza en una pantalla. Como se puede ver, eso se indica en la etiqueta LINK en el atributo media="screen, projection". En ese archivo está la mayoría del código del framework, combinando varios de los archivos de estilos CSS que hay en los archivos fuente (sin comprimir) que comentábamos antes.

El segundo archivo que se incluye contiene el código para la versión para imprimir de la página web, con los estilos del framework que facilitarán la lectura de las webs cuando se impriman. Este archivo lo podemos además editar para hacer que no se vean elementos innecesarios en la impresión, por ejemplo con código como este:

#cabecera{display: none;}
#navegador{display: none;}

El último archivo que se incluye es el ie.css, que además se inserta dentro de un comentario, para que sólo sea visible en la familia de navegadores de Internet Explorer. Contiene, como podremos imaginar, código CSS para solucionar algunas diferencias de interpretación de los estilos en los navegadores de Microsoft.

En el código HTML anterior para incluir Blueprint sólo tenemos que asegurarnos que la ruta en el atributo src esté dirigida al lugar donde hemos guardado los correspondientes archivos del framework.

Contenedor principal de la página Blueprint

<div class="container">
   <p>Contenido de la página</p>
</div>

Como vemos, para el contenedor principal usamos la clase "container".

Dentro del DIV "container" colocaremos otros contenedores, con etiquetas DIV a las que le ponemos otras clases del framework, pero esto lo en el próximo artículo en el que explicamos la rejilla de Blueprint.