Manual Blueprint Css

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.
com
Manual de Blueprint CSS

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

Este manual ha sido realizado por los siguientes colaboradores de DesarrolloWeb.com:
Miguel Angel Alvarez
Director de DesarrolloWeb.com http://www.desarrolloweb.com (8 captulos)
Manual de Blueprint CSS: http://www.desarrolloweb.com/manuales/manual-blueprint-css.html

Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com
Parte 1:
Introduccin a Blueprint
Captulos 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.1.- Blueprint, Framework CSS

Presentacin de Blueprint, un framework CSS que sirve de apoyo en el diseo y maquetacin de webs 2.0, gracias a su rejilla y otros estilos de tipografa e impresin. Blueprint es un complemento para desarrolladores de webs que aumentar la productividad en las tareas de diseo y maquetacin de pginas. Se trata de una serie de libreras de Hojas de Estilo en Cascada que contienen cdigo til para maquetar una pgina web y aplicar otros tipos de estilos tipogrficos o de impresin, algo que comnmente conocemos como Framework CSS. Este sistema nos ofrece una serie de archivos con cdigo CSS que podremos incluir en las pginas web para aplicar estilos de una manera rpida, y solucionar tambin muchos de los problemas de compatibilidad entre navegadores que pueden surgir durante la etapa de maquetacin. Existen diversos Framework CSS disponibles de manera gratuita en Internet, creados por varios desarrolladores distintos. Blueprint es quizs el ms conocido, o por lo menos uno de los ms populares y prueba de ello es que se han creado incluso algunas variantes o productos derivados para ajustar Blueprint a las distintas necesidades de los desarrolladores.
Nota: Otro de los Frameworks CSS que tenemos bien documentado en DesarrolloWeb.com es 960 Grid System, del que podemos encontrar un manual amplio y un ejemplo completo de maquetacin CSS en vdeo.
1.1.1.- Qu es un Framework CSS

Quizs convendra definir qu se conoce como framework CSS. Pues simplemente se trata de una serie de declaraciones de estilos definidos de forma estndar para que sirvan como base para el diseo de todo tipo de webs. Por decirlo de otra manera, es un poco de cdigo CSS que se podra considerar til para desarrollar cualquier tipo de web y que se pone a disposicin para solucionar diversos problemas o situaciones, comunes en el desarrollo de webs. Cada framework CSS, aunque quizs deberamos llamarles simplemente "Libreras CSS", tiene su propia filosofa a la hora de crear el cdigo para solucionar esos problemas. Algunas veces las formas de actuar son similares y otras veces distintas, por ello el uso o no de los frameworks CSS, as como la eleccin del mismo es una decisin muy particular de cada programador o desarrollador web. Existe adems una discusin sobre si es o no conveniente el uso de Frameworks CSS, pero es un asunto donde no vamos a entrar en este artculo. Simplemente queremos contaros cmo funciona Blueprint y cada persona podr elegir o no usarlo.

1.1.2.- Caractersticas de Blueprint

El framework CSS Blueprint est creado sobre una slida base de cdigo CSS que ayudar a desarrollar el diseo y maquetacin de sitios web. Entre las cosas que nos aporta podemos destacar: Una rejilla, que nos permitir crear cualquier estructura de pgina web. Bsicamente se trata de un conjunto de clases CSS para posicionar cualquier elemento en un espacio de 950 pxeles de anchura, dividido en 24 columnas. Una definicin de tipografa predeterminada, de manera precisa para todos los elementos de la pgina que pueden tener texto. Estilos para formularios, con los que mejorar las interfaces de usuario. Estilos para impresin, con las definiciones CSS ms tiles para que las pginas se lean bien cuando se imprimen en papel. Estilos especficos para IE, con los que resolver algunos de los problemas ms comunes de Internet Explorer.
Con todo esto conseguimos una base con la que comenzar fcilmente a hacer pginas web complejas y que sern ms compatibles en distintos navegadores. Adems, Blueprint se completa con algunos plugins creados por terceras personas que sirven para hacer cosas ms avanzadas o diferentes. Por ejemplo hay plugins para conseguir iconos, para hacer pginas fluidas (que se adaptan a la anchura de la ventana del navegador), etc. Para comenzar a usar Blueprint tenemos que acceder a su pgina web y descargarlo, a travs de su pgina web: http://www.blueprintcss.org/ En los siguientes artculos del Manual de Blueprint te explicaremos todo lo que tienes que conocer para comenzar con buen pie y que te sea muy sencillo adaptarte al framework CSS.
Artculo por
1.2.- Comenzar a usar Blueprint

Primeros pasos con Blueprint: Identificar los contenidos del archivo para descarga y empezar a usar el framework CSS Blueprint. En el artculo anterior ya ofrecimos una introduccin a Blueprint y a sus caractersticas. Ahora queremos comenzar a ofrecer las explicaciones necesarias para empezar a utilizarlo. Para minimizar en la medida de lo posible tu curva de aprendizaje y ayudarte a sacar provecho del framework CSS desde el primer momento. En este artculo 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 cdigo que tenemos que poner en nuestra web para incluir los archivos CSS y comenzar a utilizar blueprint en una pgina web.
1.2.1.- Componentes de la descarga de Blueprint

En la descarga del framework CSS Blueprint encontraremos algo ms que el simple cdigo CSS que necesitamos para trabajar. Saber qu tiene el paquete de descarga y dedicarse a examinarlo un poco te puede ayudar a obtener una visin general del producto y ser til durante tu aprendizaje. 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 estn "comprimidos", es decir, sin comentarios, saltos de lnea y otras cosas para que ocupen poco espacio en Kb. Directorio blueprint/src: Son los archivos fuente del framework, pero con el cdigo completo, con los comentarios y formato para que se puedan leer cmodamente. Es conveniente echar un vistazo a estos archivos, puesto que podremos aprender muchas cosas, sobre cmo est hecho y las clases que han creado para que utilicemos al maquetar las pginas. Tiene los siguientes archivos:

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com reset.css: Cdigo para resetear los estilos de todos los navegadores y hacerlos compatibles entre si. typography.css: definicin de tipografa por defecto para la pgina web, que soluciona algunos problemas cuando se trabaja con fuentes grid.css: Este es el archivo ms importante, con las clases para generar la rejilla, as que merece la pena prestar atencin a cmo est hecha y qu clases nos ofrece. forms.css: Cdigo para estilizar formularios y mensajes al usuario. ie.css: con estilos propios para Internet Explorer print.css: Los estilos que se utilizarn cuando se imprima la pgina en papel.
Insisto en que es buena idea abrir esos archivos y echar un vistazo al cdigo, los comentarios y as vamos tomando una idea de cmo es y cmo funciona el framework. Directorio blueprint/plugins: Una serie de plugins que funcionan sobre blueprint para diferentes casos de uso. Ms adelante hablaremos sobre plugins. Directorio lib: Con algunos scripts en el lenguaje de programacin Ruby para trabajar con Blueprint. Directorio templates: Plantillas para empezar a disear en un editor grfico, con guas para ajustarse al espacio por columnas definido en la rejilla. En el momento de escribir este artculo slo est disponible la plantilla de Photoshop (archivo PSD) con la rejilla de Blueprint. Directorio test: Contiene ejemplos de pginas creadas para probar las caractersticas y posibilidades de Blueprint. Tambin muy interesante, ya que es una manera interesante de ver cmo desarrollar la estructura de pgina de Blueprint.
1.2.2.- Incluir los archivos de Blueprint en la pgina

El primer paso para empezar a usar Blueprint en una pgina web es incluir los archivos CSS con el cdigo comprimido del framework. Esto lo tenemos que hacer con la conocida etiqueta LINK, enlazada con las hojas de estilo.
<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"> 
El primer archivo screen.css contiene todos los estilos que se aplican cuando la pgina 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 mayora del cdigo del framework, combinando varios de los archivos de estilos CSS que hay en los archivos fuente (sin comprimir) que comentbamos antes. El segundo archivo que se incluye contiene el cdigo para la versin para imprimir de la pgina web, con los estilos del framework que facilitarn la lectura de las webs cuando se impriman. Este archivo lo podemos adems editar para hacer que no se vean elementos innecesarios en la impresin, por ejemplo con cdigo como este:
#cabecera{display: none;} #navegador{display: none;}
El ltimo archivo que se incluye es el ie.css, que adems se inserta dentro de un comentario, para que slo sea visible en la familia de navegadores de Internet Explorer. Contiene, como podremos imaginar, cdigo CSS para solucionar algunas diferencias de interpretacin de los estilos en los navegadores de Microsoft. En el cdigo HTML anterior para incluir Blueprint slo tenemos que asegurarnos que la ruta en el atributo src est dirigida al lugar donde hemos guardado los correspondientes archivos del framework.
1.2.3.- Contenedor principal de la pgina Blueprint

Veamos ahora una pgina bsica que usa Blueprint. Para ello primero tenemos que saber que todo el cdigo HTML de nuestra pgina tenemos que meterlo en un contenedor.
<div class="container">


<p>Contenido de la pgina</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 prximo artculo en el que explicamos la rejilla de Blueprint.
Artculo por
1.3.- Entender la rejilla de Blueprint

Cmo es la rejilla por columnas disponible en Blueprint y las primeras clases para comenzar a posicionar los elementos en ella. La parte ms importante de este framework CSS es la rejilla, que como ya habamos adelantado en el Manual de Blueprint, permite situar los elementos de la pgina de una manera precisa y sencilla. En este artculo mostraremos cmo funciona esta rejilla y las principales clases para poder maquetar una pgina web. Blueprint propone un contenedor de 950 pxeles de anchura, que se divide en 24 columnas. La columna ocupa un espacio de 30 pxeles, con una separacin de 10 pxeles entre columnas.
Mediante estas dimensiones, como decimos, se pueden conseguir 24 columnas en un diseo, pero nosotros podemos unir dos o ms columnas para obtener espacios mayores. Por ejemplo, si deseamos que en nuestro diseo haya dos columnas, podemos dividir las 24 disponibles en 18 para el cuerpo y 6 para la barra de enlaces lateral. Dos columnas juntas miden 30 pxeles de cada una, ms los 10 pxeles de separacin entre ellas, en total 70 pxeles. Si unimos 3 columnas tendramos 30 pxeles de cada columna menos dos separaciones de 10, con lo que suma 110 pxeles. As podramos conseguir contenedores de hasta 24 anchuras distintas. En general, la anchura disponible al juntar varias columnas la podramos calcular con la frmula:
anchura = (columnas_que_unimos * 40) - 10
Para que quede claro cmo se combinan columnas se puede ver esta imagen, en la que tenemos una representacin de dos contenedores, como en el ejemplo anterior, uno para el cuerpo con 18 columnas y otro para el lateral, de 6 columnas.
Para generar todas las columnas existen unas clases CSS que van desde span-1 a span-24. Simplemente se utiliza la palabra "span-" y el nmero de columnas que deseamos juntar. span-1 (contenedor con 30 pxeles) span-2 (contenedor con 70 pxeles) span-3 (contenedor con 110 pxeles) ... span-23 (contenedor con 910 pxeles) span-24 (contenedor con 950 pxeles) Para hacer una estructura de pgina, es decir, definir los contenedores de nuestra plantilla o layout, podemos utilizar diversos

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com contenedores span-x y adems, podremos anidar contenedores para producir estructuras de pgina ms complejas. Tenemos que tener en cuenta que en cada seccin tenemos que completar las 24 columas, es decir si dividimos el espacio de la pgina en diversas secciones, sumandolas en la anchura total del documento, debemos tener siempre las 24 columnas de espacio utilizado. Adems, en el contenedor que complete hasta la columna 24 tenemos que ponerle tambin la clase "last". Veamos un ejemplo de estructura de pgina basada en Blueprint.
<div class="container"> <div class="span-24 last"> Cabecera </div> <div class="span-16"> Cuerpo izquierda </div> <div class="span-8 last"> Lateral derecha </div> <div class="span-24 last"> Pie </div> </div>
Nota: Recordemos que ha de colocarse siempre un contenedor principal, con class="container", tal como se explic en el artculo Comenzar a usar Blueprint.
En esta estructura tendremos una cabecera que ocupar toda la anchura disponible (con span-24), una parte central que est dividida en dos columnas, una para el cuerpo a la izquierda (con span-16) y otra para la barra de navegacin (con span-8) en el lateral derecho. Acabar la pgina con un pie que tambin ocupa todo el ancho disponible del contenedor. Es importante ver que cada una de las secciones (o filas de contenidos) acaba con un contenedor que tiene la clase "last". Con estas clases podrs crear estructuras de pgina todo lo complejas que desees, aunque el framework tiene muchas otras cosas que todava no hemos visto. No obstante, con lo que sabes ya podrs hacer bastantes cosas y todo ir bien mientras respetes: Poner siempre la clase "last" en la ltima columna de cada fila. Que la suma de las columnas en cada fila sea siempre 24
Hay que fijarse que todas las partes de la pgina tienen contenedores que ocupan las 24 columnas. En la cabecera est claro porque usamos un span-24 que ya son todas las columnas y en la parte central de la pgina tenemos 16 columnas del cuerpo + 8 columnas del lateral = 24 columnas. El pie de pgina tambin tiene sus 24 columnas en un nico contenedor. En el prximo artculo veremos ya un ejemplo de pgina completo que utiliza Blueprint.
Artculo por
1.4.- Primer ejemplo de pgina con Blueprint

Podemos ya ver un primer ejemplo de pgina desarrollada con el framework CSS Blueprint. La manera ms interesante de afianzar todos los conocimientos adquiridos en el Manual de Blueprint es ver un primer ejemplo completo de pgina que usa este framework Javascript. En este ejemplo haremos una estructura de pgina donde anidamos algunos contenedores y donde jugamos con columnas de distintas anchuras. De momento slo vamos a utilizar un pequeo grupo de clases, que conocimos en el articulo Entender la rejilla de Blueprint, pero aun as los resultados son bastante interesantes, aun con un cdigo sencillo. Como ya hemos aprendido unas cuantas cosas de Blueprint, podemos pasar directamente a ver este cdigo fuente:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > <html> <head> <title>Ejemplo de Blueprint</title> <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">  </head> <body> <div class="container"> <div class="span-24 last"> <h1>Probando Blueprint</h1> </div> <div class="span-18"> <p>Cuerpo...</p> <div class="span-6"> Destacado 1 </div> <div class="span-6"> Destacado 2 </div> <div class="span-6 last"> Destacado 3 </div> </div> <div class="span-6 last"> Lateral </div> <div class="span-24 last"> Pie... </div> </div> </body> </html>
En el HEAD incluimos los archivos con el CSS de blueprint En el BODY comenzamos con un "container" Colocamos una cabecera, una fila con una nica columna de span-24 y last En el cuerpo dividimos los espacios en dos columnas principales, de span-18 y span-6 (18+6=24). En el cuerpo, dentro del contenedor de span-18, anidamos tres columnas de span-6 (como estamos en un span-18 tenemos espacio para 3 espacios de span-6). Es importante fijarse que el ltimo span-6 tiene tambin la clase "last", porque termina una fila dentro del span-18. El pie tambin es span-24 y last
Este ejemplo lo podemos ver en marcha en una pgina aparte. Sin embargo, esta divisin en contenedores la verdad es que no se aprecia muy bien si no metemos algo de texto en ellos. Para poder ver el ejemplo de una manera ms clara, podemos acceder a este segundo enlace en el que hemos utilizado la misma estructura y hemos colocado algo de texto como contenido en los contenedores. Espero que este ejemplo sirva como muestra a lo fcil que es dividir la pgina en diferentes espacios, de modo que creemos una plantilla adecuada a nuestras necesidades. Las posibilidades de configuracin de la rejilla son ilimitadas. No obstante cabe sealar de nuevo que aun nos quedan muchas otras clases que conocer en el framework CSS Blueprint.
Artculo por

7

Parte 2:
Clases de Blueprint
Realizar los primeros pasos con el framework CSS Blueprint no resulta difcil. Habremos podido comprobar que, teniendo con unos pocos conceptos claros y mediante un pequeo conjunto de clases, se pueden hacer cosas bastante interesantes, que nos ayudarn 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.
2.1.- Clases CSS principales del grid Blueprint

Un listado de las clases del framework CSS Blueprint que sirven para definir el layout de nuestra pgina web, utilizando la rejilla. A lo largo de los ltimos artculos del Manual de Blueprint ya hemos tenido ocasin de aprender a trabajar con algunas clases principales del framework CSS para la configuracin de la rejilla, pero aun quedan muchas otras clases que podremos usar para determinar otras cosas sobre el posicionamiento de los contenedores en la pgina. A continuacin daremos un repaso a todas las clases que podemos utilizar cuando configuramos la rejilla, lo que tambin nos dar una visin ms amplia de las posibilidades de maquetacin implementadas en Blueprint. Antes de nada, convendra recordar que nunca est de ms echar un vistazo al cdigo fuente del framework comentado, que est en el directorio blueprint/src del paquete de descarga, en el archivo "grid.css". En ese archivo CSS encontraremos comentarios al cdigo con diversas informaciones tiles y breves explicaciones de los uso de las clases. Adems, podremos ver cules son los estilos CSS especificados por el framework y aprender un poco sobre cmo est hecho.
2.1.1.- Clases de la rejilla (grid) en Blueprint

Clase container: la clase principal de la estructura de pgina de Blueprint. Todo debera colocarse dentro de un contenedor principal, con la clase container.
Nota: la clase container la utilizamos por primera vez en el artculo Comenzar a usar Blueprint.
Clase showgrid: una clase til para identificar visualmente la rejilla de Blueprint. La podemos asignar sobre contenedores con clase "container" o "span-x", para mostrar con una imagen de fondo la divisin de columnas que implementa el framework CSS. Clase span-x (desde span-1 a span-24): Para hacer los contenedores que se colocan en la rejilla, utilizamos un conjunto de clases que va de la span-1 a la span-24. Estos contenedores se anclan en una de las filas de contenido de la rejilla y el nmero del 1 al 24 indica la cantidad de columnas que ocupa. Las clases span-x tambin se pueden aplicar sobre elementos INPUT o TEXTAREA, para asignar la anchura de esos elementos de formulario. Clase last: La clase CSS "last" se coloca en el ltimo contenedor que haya en una fila de contenidos, para indicar justamente que es el ltimo elemento de esa fila y que el siguiente empiece siempre debajo de esa fila de contenidos y a la izquierda.

Nota: Tanto las clases span-1, span-2, ..., span-24 como la clase "last" ya se han explicado con detalle en el artculo Entendiendo la rejilla de Blueprint.
Clases append-x (desde append-1 hasta append-23): estas clases sirven para rellenar con un espacio vaco despus del elemento. Imaginemos que tenemos un contenedor con span-3 y luego queremos tener un espacio vaco de 6 columnas. Entonces podramos colocarle a ese contenedor las clases "span-3 append-6", con ello el espacio total que se reservar para ese contenedor es de 3 + 6 = 9 columnas (tres columnas de espacio real para meter contenidos y 6 columnas de espacio en blanco despus del contenedor). Clases prepend-x (desde prepend-1 a prepend-23): son unas clases parecidas a append-x, con la diferencia que el espacio en blanco se coloca antes del contenedor. Esta clase se utiliza en conjunto con las clases span-x, igual que append-x. Clase border: crea un borde en la parte derecha del contenedor, de un pxel de anchura. Clase colborder: sirve para crear un borde, igual que la clase anterior border, pero lo hace dejando un mayor espacio en blanco entre la lnea del borde y los contenidos de los lados. El tema es que si utilizamos esta clase se expandir el contenedor en una columna adicional y tendremos que tenerla en cuenta cuando hagamos el recuento de 24 columnas por cada fila de contenidos.
Nota: veremos muchas de estas clases con detenimiento en el ejemplo siguiente.
Clases pull-x y push-x: que van desde pull-1 a pull-24 y desde push-1 hasta push-24 y sirven para empujar o traer el contenido de una columna y situarlo en un lugar distinto. Si utilizamos la clase pull-x es como trasladar el contenido de ese contenedor a la izquierda y en "x" colocamos el nmero de columnas que lo movemos. Por su parte, si utilizamos las clases push-x lo que estamos haciendo es como empujar el contenido a la derecha y en la x de 1 a 24 especificamos la cantidad de espacio que lo deseamos mover a la derecha. El contenido se colocar encima de otros contenidos que pueda haber en el sitio donde lo estamos trasladando. Clase prepend-top: Sirve para dejar un espacio en blanco sobre un contenedor. El espacio en blanco que deja es igual a 1.5em, osea, una vez y medio el tamao de la fuente configurada en el elemento. Clase append-bottom: Sirve para dejar espacio en blanco debajo de un contenedor, igual que prepend-top, pero dejando el margen en la parte de abajo. Clase box: para crear una caja con padding (espacio en blanco entre el borde del elemento y el lugar donde empieza el contenido. Se puede utilizar esta clase para las capas con contenido a colocar en una de las columnas, es decir, para un DIV que coloquemos anidado dentro del DIV span-x para definir la columna. Estilo para etiqueta HR: Esto no es una clase, sino el estilo que dan en Blueprint a las etiquetas HR. Sirve para crear una lnea horizontal con la que separar columnas. Clase space para elementos HR (hr.space): Es una lnea de separacin pero en blanco. Clase clearfix: Esta clase es muy importante, ya que nos resuelve el problema de los fondos sobre capas que tienen contenidos flotantes, que a veces el fondo no ocupa todo el espacio que ocupa la caja. Para quien no sepa a qu me refiero, consultar el artculo Solucin al problema de float en maquetacin CSS. Clase clear: Para que la capa se coloque en una nueva fila, dejando libres los espacios de los elementos que pueda haber flotantes en anteriores filas. Esta clase implementa el clear:both que ya debemos saber lo que signigica en CSS. Para ilustrar el funcionamiento de algunas de estas clases, por lo menos las ms utilizadas, vamos a crear un ejemplo ms avanzado con Blueprint, en el siguente artculo.
Artculo por

2.2.- Ejemplo de uso de las clases del grid de Blueprint

Un layout creado a travs del framework CSS Blueprint, con ejemplos de uso de las clases ms importantes del grid de Blueprint. A lo largo del Manual de Blueprint ya hemos explicado las clases CSS para disear una web adaptando la posicin de los elementos a la rejilla que nos ofrece este framework CSS. En concreto, en el artculo anterior vimos las clases que Blueprint pone a nuestra disposicin para maquetar la pgina web . As que en el presente texto vamos a crear un segundo ejemplo de maquetacin utilizando las clases del grid de Blueprint, o por lo menos la mayora de ellas y las que son ms utilizadas. En el presente ejemplo vamos a crear un modelo de pgina con tres columnas, con anidacin de varios contenedores. Adems vamos a usar algunas de las clases que todava no hemos practicado, para dejar espacios en blanco entre contenedor, ya sea columnas vacas o margen arriba y abajo de las filas. Primero presentaremos la estructura bsica de este segundo layout de ejemplo y luego mostraremos el mismo ejercicio, pero colocando un poco de texto en los contenedores y algo de color de fondo para diferenciarlos bien. En este ejemplo tendremos una cabecera (dividida en dos columnas y con un espacio en blanco en el medio), un cuerpo (dividido en otras dos columnas, pero que tiene diversos elementos anidados para generar otras columnas dentro de ellos) y un pie de pgina, con una nica columna. Veamos el cdigo HTML completo del ejemplo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > <html lang="es"> <head> <title>Ejemplo de Blueprint</title> <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">  </head> <body> <div class="container showgrid"> <div class="span-24 last append-bottom"> <div class="span-10 append-6"> Logotipo!! </div> <div class="span-7 append-1 last"> Enlaces para suscripcin </div> </div> <div class="span-18"> <div class="span-6"> Navegador </div> <div class="span-12 last"> Cuerpo... <div class="span-2"> 2 primeras </div> <div class="span-6 prepend-4 last"> Mitad derecha del cuerpo... </div> </div> </div> <div class="span-6 last"> Lateral </div> <div class="span-24 last prepend-top"> Pie... </div> </div>

10
</body> </html>
Ahora har unos comentarios acerca del cdigo anterior: El contenedor principal tiene las clases "container showgrid". La clase "container" es obligada para el contenedor y la clase "showgrid" la utilizo para marcar como fondo del diseo la divisin en las 24 columnas que nos aporta Blueprint. La cabecera tiene una fila con una columna con las clases "span-24 last append-bottom". La clase append-bottom, que no habamos utilizado todava, sirve para generar un margen debajo de la cabecera. Dentro de esa columna para la cabecera, a su vez tenemos otro par de columnas. Una para el logotipo y otra para los enlaces de suscripcin. Adems, se est utilizando las clases append-6 y append-1 para generar espacios en blanco. Si nos fijamos los tamaos de los contenedores de la cabecera suman 24 columnas. El logotipo tiene "span10 append-6", lo que suma un total de 16 columnas. La otra capa de la cabecera tiene "span-7 append-1 last", lo que suman un total de 8 columnas. 16 + 8 = 24 columnas en toda la cabecera. El rea central de la pgina tiene una divisin de 18 y 6 columnas. La parte de 18 luego se divide tambin en otras columnas, una de 6 y otra de 12. En total el efecto hace que el cuerpo parezca tener 3 columnas, pero en realidad son dos y con divisiones anidadas para generar otras columnas. En el rea de la columna de 12 que hay en el cuerpo, anidamos varios contenedores. Dado que ahora estamos dentro de un span-12, tenemos que rellenar esas 12 columnas para completar una fila, en vez de las 24 normales de todo el ancho de pgina. Las capas que colocamos dentro de este contenedor de 12 son dos: una capa que tiene espacio de 2 y otra capa de espacio 6, pero dejando un espacio en blanco entre ellas de otras 4 columnas, con "prepend-4" en la capa de 6 columnas de anchura . Entre todas sumamos 2 de espacio de la primera divisin, 4 de espacio en blanco y finalmente 6 del ltimo contenedor. Hace un total de 12 de anchura y est metida en un contenedor de 12 de anchura, por lo tanto ocupa el espacio total disponible y tenemos que asignarle tambin la clase "last" al contenedor de span-6, por ser el ltimo del espacio disponible. En el pie, para dejar un margen arriba, colocamos la clase "prepend-top".
Lo importante en este ejemplo es ver cmo se organizan los espacios y cmo todas las filas siempre tienen contenedores cuyas anchuras sumadas son igual a los espacios disponibles (24 columnas). Si no es as, siempre debemos rellenar los "huecos" con espacios en blanco (que conseguimos con las clases "prepend-x" o "append-x"). El ejemplo espero que tambin sirva para ver cmo se puede maquetar con Blueprint y anidar contenedores para conseguir cualquier tipo de layout. Para los interesados, dejamos un enlace al ejemplo en marcha. Ahora, para mejorar el ejemplo anterior, o mejor dicho, para que se vea mejor el resultado obtenido con esta estructura de contenedores, vamos a llenar de texto las distintas capas y a asignarles un de color de fondo para que se puedan indentificar visualmente. Podemos ver en una pgina aparte el ejemplo con textos y color.
Nota: Os animo a ver el cdigo fuente del segundo ejemplo, con capas que tienen textos y colores, para ver una posible utilizacin de los contenedores y la aplicacin de estilos CSS adicionales a los elementos.
En el siguiente artculo seguiremos aportando algunas recomendaciones a seguir a la hora de disear o maquetar pginas con Blueprint.
Artculo por

11
2.3.- Recomendaciones a la hora de disear con el framework CSS Blueprint

Algunas recomendaciones para que el trabajo con Blueprint sea ms sencillo y podamos sacarle mayor provecho al framework CSS. Ya llevamos unos cuantos artculos sobre el framework CSS Blueprint, que hemos ido publicando en un Manual de Blueprint. Hemos podido conocer la rejilla para posicionamiento de elementos en la pgina y hemos visto un par de ejemplos interesantes de pginas maquetadas con Blueprint. Ahora vamos a hacer una pequea aportacin en forma de consejos tiles para trabajar con el framework CSS, sacarle mayor partido y evitar problemas de diseo.
2.3.1.- Aplica estilos en tu propia hoja de estilos

Puede ser una buena idea que mantengas los CSS del framework inalterados y los estilos que quieras aadir a tu proyecto los indiques en hojas de estilo propias, que crees en archivos aparte de los del framework. Ayudar a mantener tus archivos de estilo ms reducidos y no mezclar tus especificaciones con las de Blueprint.
2.3.2.- Disea con la plantilla de 24 columnas

El primer paso para la concepcin creativa de una web es el diseo en un programa de edicin grfica como Photoshop. En el archivo de descarga de Blueprint tenemos un PSD (archivo de photoshop) con una serie de divisiones en columnas y guas para ajustarnos a ellas. Ese archivo sirve de plantilla vaca con la que generar nuestro propio diseo, que se ajuste a los espacios disponibles en Blueprint. El archivo de Photoshop viene con una capa oculta que contiene un ejemplo de diseo de sitio web, basndose en los espacios disponibles en Blueprint. Podemos buscar esa capa en la ventana de capas, cuyo nombre es "sample site".
2.3.3.- Recomendacin para aplicar estilos adicionales a los contenedores

Como se puede ver, en el ejemplo del artculo anterior ya hemos colocado algunos estilos en los contenedores de la pgina, como colores de fondo y hasta algn estilo de tipografa. Aun sin mucha experiencia en el Framework Blueprint podra dar un par de recomendaciones: Aplicar estilos en contenedores distintos de los span-x: Para aplicar estilos a los contenidos de cada uno de los contenedores que colocamos en la rejilla, merece ms la pena colocar dentro del DIV "span-x" otro segundo DIV al que podremos darle estilos. Si aplicamos CSS directamente sobre los "spanx" podemos estar machacando los estilos creados por el propio framework. Por ejemplo:
<div class="span-2"> <div id="cuerpoizq"> Aqui estoy en las dos primeras columnas de la parte de abajo del cuerpo... </div> </div>
Has visto que el DIV contenedor "span-2" no tiene ms estilos que los proporcionados por esa clase "span-2". Luego hemos colocado dentro otro DIV y a ste es al que le asignamos estilos particulares de nuestro sitio. Utilizar la clase "box" para conseguir un padding: En Blueprint hay una clase pensada para que las cajas tengan padding, llamada "box". Esa clase provee un comportamiento por defecto para los contenedores, que incluye un padding entre otras cosas. Mi recomendacin, igual que en el punto anterior, sera utilizar esa clase tambin sobre un DIV que anidamos dentro del contenedor "span-x":
<div class="span-4"> <div class="box"> Contenido que ya tiene un padding </div> </div>

12
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com Nosotros podramos incluso cambiar los estilos de la clase "box" si es que no se ajustan al modelo de caja que deseamos tener en nuestro sitio web.
2.3.4.- Usando tipografas

Tipografas por defecto: Al usar las etiquetas estndar del HTML tenemos la ventaja de que stas estn formateadas por el framework CSS y por lo que respecta a la tipografa, ya estn previamente configuradas. No obstante, podramos necesitar cambiar alguna tipografa y esto se puede hacer en nuestra propia hoja de estilo o editando el archivo del framework screen.css, en la seccin que est marcada con el comentario /* typography.css */. Aunque no sea muy recomendable cambiar el cdigo fuente del framework, para pequeas ediciones como la tipografa por defecto no veo problema en tocarla directamente en el cdigo de Blueprint. Usar medidas em para tamaos del texto: Las medidas CSS relativas son mucho ms adecuadas, como las que obtenemos con las unidades px o em. Lo ms recomendable cuando queramos cambiar el tamao de los textos es asignarlos con la unidad em, que est explicada, junto con sus ventajas, en el artculo Tamaos de texto con CSS: buenas prcticas. En general, todas las prcticas recomendables para CSS tambin se pueden aplicar a nuestro trabajo con el framework. Despus de varias prcticas seguro que irs creando un esquema de trabajo que se adapte bien a tus costumbres y conocimientos.
Artculo por
Parte 3:
Ejemplos de maquetacin CSS realizada con Blueprint

Aparte de los ejemplos vistos hasta el momento sobre la maquetacin CSS con Blueprint, realizamos varios talleres para aprender a manejar mejor el framework CSS.
3.1.- Taller Blueprint: layout con cabecera y pie fluidos

Un ejemplo de diseo utilizando el framework CSS Blueprint en el que realizamos la cabecera y pie de pgina fluidos, que se ajustan a la anchura disponible. Nos han preguntado en alguna ocasin cmo hacer para que la cabecera o pie de pgina se expanda para ocupar todo el

13
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com ancho de la pantalla, tal como tenemos en el diseo actual de DesarrolloWeb.com, trabajando con el framework CSS Blueprint. En este artculo vamos a realuzar una prctica de diseo de un layout con esas caractersticas. Para ello, tal como nos solicitan, vamos a utilizar el Framework CSS Blueprint, que nos ofrece una serie de clases muy tiles para maquetar con CSS utilizando una rejilla de 24 columnas, que nos ayuda a posicionar los elementos en la pgina. Para el que le interese, tenemos a disposicin de los lectores un completo Manual de Blueprint CSS, que deberamos leer si no estamos familiarizados con este interesante e til framework para la maquetacin web. Antes de ponernos manos a la obra, dejamos un enlace para ver el objetivo que pretendemos realizar en este ejercicio.
3.1.1.- Layout fluido en Blueprint

Queremos empezar explicando qu es un layout fluido. No es ms que uno que adapta su anchura a aquella que tenga la ventana del navegador en cada momento. Generalmente con Blueprint diseamos plantillas con una anchura predeterminada de 950 pxeles, por lo que todos los contenidos se adaptan a ese espacio disponible. En las pginas fluidas no ocurre esto. Por el contrario, la anchura de pgina ser variable y corresponder con aquella que tenga el usuario en su ventana del navegador. Existen complementos para el framework Blueprint para permitir hacer pginas fluidas, como el plugin que podemos encontrar en Blueprint Liquid. Ahora bien, nosotros en este caso no queremos hacer justamente una pgina fluida, sino slo una de las partes de la pgina, como la cabecera o pie. Y adems, ni siquiera queremos hacer esa parte de la pgina realmente fluda, sino que simplemente deseamos que el fondo de la misma se adapte a toda la anchura disponible en la ventana, pero los contenidos colocados en la anchura disponible en Blueprint. Por ello, vamos a utilizar simplemente una sencilla tcnica que nos sirva para hacer que el fondo de la cabecera o el pie se adapte a la ventana del navegador.
3.1.2.- Varios "containers", para cada uno de los elementos

Como debemos saber, si hemos seguido el Manual de Blueprint, en este framework colocamos un contenedor principal y luego dentro de l, colocamos todas las capas que queremos situar en la rejilla, con diversas clases para definir sus dimensiones y colocacin. La tcnica que vamos a contar ahora trata simplemente de crear varios contenedores en lugar de uno solo.
Nota: Nada impide que creemos en un layout desarrollado con Blueprint tantos contenedores como queramos en una pgina web. Para ello simplemente colocaremos la class "container" a todas las divisiones que queramos que se comporten como contenedor.
Una capa que hace de contenedor en Blueprint (a la que le hemos colocado la clase CSS "container") tiene definida una anchura, que son los 950 pxeles disponibles en los layouts predeterminados de Blueprint. Si para definir un elemento con todo el ancho disponible lo colocamos dentro de un contenedor, no podr tener ms que 950 pxeles de anchura. Por tanto, tenemos que hacer que ese contenedor est incluido dentro de otra capa. Esa capa podr ser fluida (para ello simplemente no le vamos a indicar ninguna anchura) y podremos asignarle un color de fondo como queramos, que se adaptar a las dimensiones de la ventana. Luego colocaremos dentro un container para que los elementos que maquetemos dentro puedan utilizar las clases de Blueprint. El esquema en capas sera ms o menos como este:
<div id="cabecera"> <div class="container"> <div class="span-10 append-3"> Logotipo!! </div> <div class="span-11 last"> Buscador................................... </div> </div> </div>
Como vemos, tenemos un DIV con id="cabecera" y dentro un container. A continuacin en el cdigo vemos, dentro del contaniner, que se pueden colocar todas las clases de Blueprint que necesitemos para definir y posicionar los elementos que

14
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com iran dentro. Ahora, esa capa con id="cabecera" est fuera de un container (contiene un container, pero no est afectada por la anchura de la class container), por lo que se adaptar a las dimensiones de la ventana del navegador. Para que se note esto, podremos asignarle a la cabecera un color de fondo, o cualquier otro estilo CSS que deseemos.
#cabecera{ background-color: #333; color: #fff; }
Para continuar, despus de la cabecera, colocaremos el cuerpo de la pgina. El cuerpo s deseamos que se acople todo a los 950 pxeles, y que no tenga el mismo fondo de la cabecera. Por lo que tendremos que cerrar el container de la cabecera y la capa a la que habamos colocado id="cabecera". Por ello, nos veremos obligados a colocar el cuerpo en un nuevo contenedor.
<div class="container"> <div class="span-5"> Columna de contenidos 1 </div> <div class="span-12"> Cuerpo principal </div> <div class="span-7 last"> Lateral </div> </div>
Al final del todo, si deseamos hacer un pie con tambin un fondo fluido, tendremos que colocarlo en otro contenedor independiente del cuerpo y hacer como lo que hicimos en la cabecera, que hacemos una capa ms general que el propio container para aplicarle un fondo y que sea fluido.
<div id="pie"> <div class="container"> <div class="span-21"> Enlaces del pie.. </div> <div class="span-3 last"> logo en pequeo </div> </div> </div>
En los estilos CSS de la capa con id="pie", colocaremos el fondo para nuestro pie, que se adaptar a todo el ancho disponible.
#pie{ background-color: #300; color: #fff; }
3.1.3.- Todo el cdigo completo para hacer cabecera y pie fluidos en Blueprint
Podemos ver a continuacin todo el cdigo HTML y CSS necesario para crear este esquema de pgina con cabecera y pie fluidos.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > <html lang="en"> <head> <title>Ejemplo de Blueprint con Cabecera y pie fluidos</title> <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">  <style type="text/css">

15

#cabecera{ background-color: #333; color: #fff; } #pie{ background-color: #300; color: #fff; } </style> </head> <body> <div id="cabecera"> <div class="container"> <div class="span-10 append-3"> Logotipo!! </div> <div class="span-11 last"> Buscador................................... </div> </div> </div> <div class="container"> <div class="span-5"> Columna de contenidos 1 </div> <div class="span-12"> Cuerpo principal </div> <div class="span-7 last"> Lateral </div> </div> <div id="pie"> <div class="container"> <div class="span-21"> Enlaces del pie.. </div> <div class="span-3 last"> logo en pequeo </div> </div> </div> </body> </html>
Si lo deseamos, podemos ver este ejemplo en marcha en una pgina aparte. Adems, hemos preparado una pgina adicional, basada en este mismo layout, pero a la que le hemos incluido algo de estilos CSS para las cajas, algo ms de texto y un poco de color. Podemos ver el ejemplo en marcha con texto y color.
Artculo por

16

Manual Blueprint Css

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Manual Blueprint Css

Загружено:

Авторское право:

Доступные форматы

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.

Manual de Blueprint CSS

Autores del manual

Director de DesarrolloWeb.com http://www.desarrolloweb.com (8 captulos)

Manual de Blueprint CSS: http://www.desarrolloweb.com/manuales/manual-blueprint-css.html

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

1.1.- Blueprint, Framework CSS

1.1.1.- Qu es un Framework CSS

Manual de Blueprint CSS: http://www.desarrolloweb.com/manuales/manual-blueprint-css.html

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

1.1.2.- Caractersticas de Blueprint

Miguel Angel Alvarez

1.2.- Comenzar a usar Blueprint

1.2.1.- Componentes de la descarga de Blueprint

Manual de Blueprint CSS: http://www.desarrolloweb.com/manuales/manual-blueprint-css.html

1.2.2.- Incluir los archivos de Blueprint en la pgina

1.2.3.- Contenedor principal de la pgina Blueprint

Manual de Blueprint CSS: http://www.desarrolloweb.com/manuales/manual-blueprint-css.html

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Miguel Angel Alvarez

1.3.- Entender la rejilla de Blueprint

Manual de Blueprint CSS: http://www.desarrolloweb.com/manuales/manual-blueprint-css.html

Miguel Angel Alvarez

1.4.- Primer ejemplo de pgina con Blueprint

Manual de Blueprint CSS: http://www.desarrolloweb.com/manuales/manual-blueprint-css.html

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Miguel Angel Alvarez

Manual de Blueprint CSS: http://www.desarrolloweb.com/manuales/manual-blueprint-css.html

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

2.1.- Clases CSS principales del grid Blueprint

2.1.1.- Clases de la rejilla (grid) en Blueprint

Manual de Blueprint CSS: http://www.desarrolloweb.com/manuales/manual-blueprint-css.html

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Miguel Angel Alvarez

Manual de Blueprint CSS: http://www.desarrolloweb.com/manuales/manual-blueprint-css.html

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

2.2.- Ejemplo de uso de las clases del grid de Blueprint

Manual de Blueprint CSS: http://www.desarrolloweb.com/manuales/manual-blueprint-css.html

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Miguel Angel Alvarez

Manual de Blueprint CSS: http://www.desarrolloweb.com/manuales/manual-blueprint-css.html

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

2.3.- Recomendaciones a la hora de disear con el framework CSS Blueprint

2.3.1.- Aplica estilos en tu propia hoja de estilos

2.3.2.- Disea con la plantilla de 24 columnas

2.3.3.- Recomendacin para aplicar estilos adicionales a los contenedores

Manual de Blueprint CSS: http://www.desarrolloweb.com/manuales/manual-blueprint-css.html

2.3.4.- Usando tipografas

Miguel Angel Alvarez

Ejemplos de maquetacin CSS realizada con Blueprint

3.1.- Taller Blueprint: layout con cabecera y pie fluidos

Manual de Blueprint CSS: http://www.desarrolloweb.com/manuales/manual-blueprint-css.html

3.1.1.- Layout fluido en Blueprint

3.1.2.- Varios "containers", para cada uno de los elementos

Manual de Blueprint CSS: http://www.desarrolloweb.com/manuales/manual-blueprint-css.html

Manual de Blueprint CSS: http://www.desarrolloweb.com/manuales/manual-blueprint-css.html

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Miguel Angel Alvarez

Manual de Blueprint CSS: http://www.desarrolloweb.com/manuales/manual-blueprint-css.html

Вам также может понравиться