En otra ocasión mencionamos en The Process, qué es y cómo se trabaja con un framework llamado 960grid. En este artículo abordaremos otro sistema de grid con CSS que para mi gusto es bastante más potente y completo, BluePrint.
Lo primero es ubicarnos sobre lo que hablamos. Blueprint es una gran librería de estilos CSS que nos ahorrará mucho tiempo a la hora de escribir el código. No nos engañemos, el HTML hay que escribirlo igual, pero si a nuestro código le aplicamos las clases de BluePrint, les aseguro que tendrán un resultado estándar en la mayoría de los navegadores, ojo, que entre ellos incluyo IE6 y superiores y ahorrarán mucho tiempo.
¿En qué consiste esto?, pues BluePrint tiene establecidas propiedades como anchos, márgenes, estilos para formularios y botones, etc, que con solo escribir la clase correspondiente obtendremos el resultado.
(Descargar la Guía de estilos de BluePrint)
BluePrint establece un ancho para la web de 250px que están divididos en 24 columnas de 40px más 10px de margen a la derecha. Para determinar el ancho aun elemento, solo hay que agregarle la clase span-x, donde X es un valor entre 1 y 24.
Además de esta plantilla para dibujar los sketch de nuestros proyectos tenemos un documento para Photoshop con las líneas guías ya marcadas a la distancia que corresponde, para así poder diseñar sobre la rejilla.
(Descargar Grid de BluePrint para Photoshop)
Si desde un principio, generamos nuestro diseño pensando e intentando que se acople a estas medidas, BluePrint será la herramienta ideal para nuestros proyectos.
Para comenzar a trabajar con BluePrint, debemos ir a la web oficial de BluePrint., www.blueprintcss.org y descargarnos un fichero .rar o .zip donde está la librería, que por cierto, la actualizan periódicamente. En la web pueden ver ejemplos de sitios hechos con este sistema y herramientas de trabajo y tutoriales.
Al descompactar este fichero encontraremos varias carpetas donde hay ejemplos, test, y una carpeta que se llama BluePrint, donde hay carios ficheros CSS. En la carpeta Template, encontraremos un aplantilla para Photoshop con las líneas quía de la rejilla de BluePrint.
Yo particularmente solo utilizo los siguientes: ie.css (para Internet Explorer), print.css (son estilos para cuando se imprima el sitio web), y el screen.css (este fichero es el que contiene la librería de BluePrint). >>Cogemos estos tres ficheros y los copiamos donde vamos a guardar nuestro sitio, y le asignamos a los HTML, las rutas para que los enlace a las páginas.
<link rel="stylesheet" href="estilos/screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="estilos/print.css" type="text/css" media="print" />
<link rel="stylesheet" href="estilos/ie.css" type="text/css" media="screen" />
Además de estas hojas de estilos, nos faltaría la que crearemos nosotros, la que definirá nuestro diseño, main.css.
<link rel="stylesheet" href="estilos/main.css" type="text/css" media="screen" />
¿Cómo escribir el código?
Todo lo que va a estar dentro de BluePrint debe ser escrito dentro de un <div> con la clase “container”.
<body
<div class="container">
</div>
</body>
Lo siguiente será escribir nuestro código HTML según el diseño que hemos desarrollado. Crearemos contenedores y le aplicaremos la clase “span-x” donde X variará según el tamaño.
.span-1 { width: 50px; }
.span-2 { width: 120px; }
.span-3 { width: 190px; }
.span-4 { width: 260px; }
.span-5 { width: 330px; }
.span-6 { width: 400px; }
.span-7 { width: 470px; }
.span-8 { width: 540px; }
.span-9 { width: 610px; }
.span-10 { width: 680px; }
.span-11 { width: 750px; }
.span-12 { width: 820px; }
.span-13 { width: 890px; }
.span-14 { width: 960px; margin: 0; }
Ejemplo:
<body>
<div class="container">
<div div="class="span-24 last">
<h1>Este es el header</h1>
</div>
</div>
</body>
Para crear una columna a todo lo ancho, al div se le asigna el valor máximo de la clase “span”, 24 que tiene un valor de 960px y la clase last para elimiar el margen de la derecha.
<body>
<div class="container">
<div class="span-24">
<h1>Este es el header</h1>
</div>
<div class="span-18">
<h2>Contenido Principal</h2>
</div>
<div class="span-4">
<h3>Segunda Columna</h3>
</div>
<div class="span-2 last">
<h3>Tercera Columna</h3>
</div>
</div>
</body>
Espero que lo disfruten.
