Professional Documents
Culture Documents
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.
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
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.
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.
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
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
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
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.
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
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
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.
Parte 3:
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.
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"> <!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]--> <style type="text/css">
15
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