Blueprint, pasa tus diseños de imágenes a HTML + CSS facilmente
Publicado el 26/02/2010 en Diseño por Alejandro Castillo Cantón
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.
Compartir
Estoy trabajando con HTML y este framework me parece muy completo, la verad es que recorta brutalmente el tiempo para hacer una pagina web, pero como no te prepares una buena plantilla en photoshop por exemplo, ya no te salen tan bien las cuentas... De todas maneras me gusta y seguiré usando el Blueprint hasta que no ecuentro otro mejor..... Un Saludo a Tod@s y hasta pronto
Hola Dani gracias por tu comentario, te recomiendo que visites la web oficial de blueprint. Entre los tutoriales y recursos de trabajo para trabajar con Blueprint hay dos plantillas, una para photoshop y otra para illustrator. La de photoshop tiene las líneas guías de las columnas ya creadas para empezar a diseñar. Un saludo y seguimos en contacto.