Manual de Blueprint CSS

Manual del framework CSS Blueprint, con explicaciones y ejemplos de la rejilla que permite maquetar páginas web de una manera sencilla y compatible con todos los navegadores.

Listado de los capítulos

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.

2.- Comenzar a usar Blueprint

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

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.

4.- Primer ejemplo de página con Blueprint

Podemos ya ver un primer ejemplo de página desarrollada con el framework CSS Blueprint.
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.

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.

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.
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.

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.

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.

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.

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.

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.

Descargas

 Si eres usuario de DesarrolloWeb:
Archivo de descarga Manual de Blueprint CSS Texto completo en PDF, listo para imprimir, del manual de DesarrolloWeb.com Manual de Blueprint CSS. Descarga compilada y actualizada el día 8/10/2010.
Tamaño: 253880

Compartir

Comentarios

ruben__chvez

15/7/2010
Ejemplos Completos
Exelente manual para comprender Blueprint. Me gustaría ver más ejemplos y códigos completos usando este framework. Alguién sabe de temas ya listos con colores y estilos ya definidos....?

Gracias,
Ruben.

Francisco

17/7/2010
Asi sí
hay vamos entendiendo bien lo del blueprint,
muy bueno.
gracias

anthony

18/8/2010
Blueprint CSS
Muy interesante el aporte...pero me gustaria saber un poco mas a fondo del tema...sis contaras con unos manuales se te agradeceria mucho...me lo enviarias a mi msn anthony_fl1@hotmail.com GRACIAS....

tzetze

02/2/2011
Blueprint me gusta... pero...
Tengo entendido que el uso de frameworks CSS como blueprint tiene algunos inconvenientes como la optimización de un sitio web. ¿Qué nos pueden comentar acerca de ese asunto? ¿alguna sugerencia para los que queremos aprovechar las ventajas de blueprint pero queremos que nuestro sitio siga perfectamente optimizado?

Luis-Ponce

25/4/2011
Duda sobre Blueprint
Saludos!!!

Excelente manual, me ha servido de maravilla para adentrarme en esto de la maquetación CSS, pero tengo una duda, como colocar un fondo degradado en el body de la página, lo he intentado y me doy cuenta que el archivo screen.css es el que impide colocar colores de fondo.

Gracias, un saludo.

eugim

13/5/2011
mira el video 1 de 3 de la maquetación
Hola Luis,

Nosotros no hemos visto problema en colocar un fondo en el body, puedes ver en el Videotutorial Maquetación de un diseño con Blueprint CSS. Parte 1 de 3.
http://www.desarrolloweb.com/articulos/video-maquetacion-css-blueprint.html

Comprueba que no estés sobreescribiendo tus estilos con los de Blueprint, por ejemplo, en Firebug.

O usa la directiva !important de CSS para asegurarte que tus estilos son los que se tienen en cuenta.
http://www.desarrolloweb.com/articulos/declaracion-important-css.html

miguelanjel

09/6/2011
ESTUPENDO MANUAL
Me gustaría saber para cuando teneis planeado publicar la parte "3 de 3" del manual.

Gracias,

eugim

29/7/2011
Parte 3 de 3 del manual
Hola,
Supongo que te referirás al vídeo de maquetación 3 de 3. Está ya publicado...
Saludos!