Manual de Blueprint CSS

Introducción a Blueprint

Capítulos que describen el framework CSS Blueprint y explican su modo de funcionamiento. Se detallará el uso de la rejilla, utilizada para el posicionamiento de los elementos y se presentará un primer ejemplo de uso sencillo.

1.- Blueprint, Framework CSS
Presentación de Blueprint, un framework CSS que sirve de apoyo en el diseño y maquetación de webs 2.0, gracias a su rejilla y otros estilos de tipografía e impresión. Entrar

2.- Comenzar a usar Blueprint
Primeros pasos con Blueprint: Identificar los contenidos del archivo para descarga y empezar a usar el framework CSS Blueprint. Entrar

3.- Entender la rejilla de Blueprint
Cómo es la rejilla por columnas disponible en Blueprint y las primeras clases para comenzar a posicionar los elementos en ella. Entrar

4.- Primer ejemplo de página con Blueprint
Podemos ya ver un primer ejemplo de página desarrollada con el framework CSS Blueprint. Entrar

Clases de Blueprint

Realizar los primeros pasos con el framework CSS Blueprint no resulta difícil. Habremos podido comprobar que, teniendo con unos pocos conceptos claros y mediante un pequeño conjunto de clases, se pueden hacer cosas bastante interesantes, que nos ayudarán a maquetar webs de una manera muy sencilla. Sin embargo, para poder sacar todo el provecho al framework, necesitaremos dominar las clases que nos ofrece.

5.- Clases CSS principales del grid Blueprint
Un listado de las clases del framework CSS Blueprint que sirven para definir el layout de nuestra página web, utilizando la rejilla. Entrar

6.- Ejemplo de uso de las clases del grid de Blueprint
Un layout creado a través del framework CSS Blueprint, con ejemplos de uso de las clases más importantes del grid de Blueprint. Entrar

7.- Recomendaciones a la hora de diseñar con el framework CSS Blueprint
Algunas recomendaciones para que el trabajo con Blueprint sea más sencillo y podamos sacarle mayor provecho al framework CSS. Entrar

Ejemplos de maquetación CSS realizada con Blueprint

Aparte de los ejemplos vistos hasta el momento sobre la maquetación CSS con Blueprint, realizamos varios talleres para aprender a manejar mejor el framework CSS.

8.- Taller Blueprint: layout con cabecera y pie fluidos
Un ejemplo de diseño utilizando el framework CSS Blueprint en el que realizamos la cabecera y pie de página fluidos, que se ajustan a la anchura disponible. Entrar

9.- Vídeo del diseño web con Photoshop y la plantilla de Blueprint
Vídeo tutorial del diseño con Photoshop de una web básica, utilizando una rejilla de 24 columnas obtenida del framework Blueprint CSS. Entrar

10.- Vídeo: Maquetación de un diseño con Blueprint CSS. Parte 1 de 3
Vídeo de la maquetación CSS ayudados por el framework CSS Blueprint. Partimos de un diseño con Photoshop y generamos la plantilla en HTML y CSS. Entrar

11.- Vídeotutorial sobre la maquetación con Blueprint CSS. Parte 2 de 3
Segunda parte del videotutorial de diseño web y maquetación con el framework CSS Blueprint. Entrar

12.- Maquetación de una web con Blueprint CSS. Vídeo final parte 3 de 3
Último vídeo de la práctica de maquetación web con CSS ayudados por el framework CSS Blueprint. Entrar

13.- Estilos CSS para formularios en el framework Blueprint
En el archivo forms.css de Blueprint encontraremos definiciones de estilos CSS para ayudarnos a estilizar formularios en HTML. Entrar