-
Tu mejor ayuda para aprender a hacer
webswww.desarrolloweb.com
Manual de Blueprint CSSManual 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 AlvarezDirector de
DesarrolloWeb.comhttp://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.
1
-
Tu mejor ayuda para aprender a hacer
webswww.desarrolloweb.com
Parte 1:
Introduccin a BlueprintCaptulos 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 CSSPresentacin 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 CSSQuizs 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.
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.
2
-
Tu mejor ayuda para aprender a hacer
webswww.desarrolloweb.com
1.1.2.- Caractersticas de BlueprintEl 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 Miguel Angel Alvarez
1.2.- Comenzar a usar BlueprintPrimeros 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 BlueprintEn 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:
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.
3
-
Tu mejor ayuda para aprender a hacer
webswww.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 pginaEl 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.
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 BlueprintVeamos 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.
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.
4
-
Tu mejor ayuda para aprender a hacer
webswww.desarrolloweb.com
Contenido de la pgina 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 Miguel Angel Alvarez
1.3.- Entender la rejilla de BlueprintCmo 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
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.
5
-
Tu mejor ayuda para aprender a hacer
webswww.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.
Cabecera Cuerpo izquierda Lateral derecha Pie
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 Miguel Angel Alvarez
1.4.- Primer ejemplo de pgina con BlueprintPodemos 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:
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.
6
-
Tu mejor ayuda para aprender a hacer
webswww.desarrolloweb.com
Ejemplo de Blueprint
Probando Blueprint Cuerpo... Destacado 1 Destacado 2 Destacado 3
Lateral Pie...
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 Miguel Angel Alvarez
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.
7
-
Tu mejor ayuda para aprender a hacer
webswww.desarrolloweb.com
Parte 2:
Clases de BlueprintRealizar 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 BlueprintUn 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 BlueprintClase 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.
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.
8
-
Tu mejor ayuda para aprender a hacer
webswww.desarrolloweb.com
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 Miguel Angel Alvarez
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.
9
-
Tu mejor ayuda para aprender a hacer
webswww.desarrolloweb.com
2.2.- Ejemplo de uso de las clases del grid de BlueprintUn
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:
Ejemplo de Blueprint
Logotipo!! Enlaces para suscripcin Navegador Cuerpo... 2
primeras Mitad derecha del cuerpo... Lateral Pie...
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.
10
-
Tu mejor ayuda para aprender a hacer
webswww.desarrolloweb.com
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
"span-10 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 Miguel Angel Alvarez
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.
11
-
Tu mejor ayuda para aprender a hacer
webswww.desarrolloweb.com
2.3.- Recomendaciones a la hora de disear con el framework CSS
BlueprintAlgunas 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 estilosPuede 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 columnasEl 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
contenedoresComo 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 "span-x" podemos estar
machacando los estilos creados por el propio framework. Por
ejemplo:
Aqui estoy en las dos primeras columnas de la parte de abajo del
cuerpo... 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":
Contenido que ya tiene un padding
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.
12
-
Tu mejor ayuda para aprender a hacer
webswww.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 tipografasTipografas 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 Miguel Angel Alvarez
Parte 3:
Ejemplos de maquetacin CSS realizada con BlueprintAparte 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 fluidosUn
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
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.
13
-
Tu mejor ayuda para aprender a hacer
webswww.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 BlueprintQueremos 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 elementosComo
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:
Logotipo!! Buscador................................... 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
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.
14
-
Tu mejor ayuda para aprender a hacer
webswww.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.
Columna de contenidos 1 Cuerpo principal Lateral 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.
Enlaces del pie.. logo en pequeo 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 BlueprintPodemos ver a continuacin todo el cdigo HTML y CSS
necesario para crear este esquema de pgina con cabecera y pie
fluidos.
Ejemplo de Blueprint con Cabecera y pie fluidos
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.
15
-
Tu mejor ayuda para aprender a hacer
webswww.desarrolloweb.com
#cabecera{ background-color: #333; color: #fff; } #pie{
background-color: #300; color: #fff; }
Logotipo!! Buscador................................... Columna
de contenidos 1 Cuerpo principal Lateral Enlaces del pie.. logo en
pequeo
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 Miguel Angel Alvarez
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.
16
Manual de Blueprint CSSParte 1:Introduccin a BlueprintCaptulos
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 CSS1.1.1.- Qu es un
Framework CSS1.1.2.- Caractersticas de Blueprint
1.2.- Comenzar a usar Blueprint1.2.1.- Componentes de la
descarga de Blueprint1.2.2.- Incluir los archivos de Blueprint en
la pgina1.2.3.- Contenedor principal de la pgina Blueprint
1.3.- Entender la rejilla de Blueprint1.4.- Primer ejemplo de
pgina con Blueprint
Parte 2:Clases de BlueprintRealizar 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 Blueprint2.1.1.- Clases de la
rejilla (grid) en Blueprint
2.2.- Ejemplo de uso de las clases del grid de Blueprint2.3.-
Recomendaciones a la hora de disear con el framework CSS
Blueprint2.3.1.- Aplica estilos en tu propia hoja de estilos2.3.2.-
Disea con la plantilla de 24 columnas2.3.3.- Recomendacin para
aplicar estilos adicionales a los contenedores2.3.4.- Usando
tipografas
Parte 3:Ejemplos de maquetacin CSS realizada con BlueprintAparte
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
fluidos3.1.1.- Layout fluido en Blueprint3.1.2.- Varios
"containers", para cada uno de los elementos3.1.3.- Todo el cdigo
completo para hacer cabecera y pie fluidos en Blueprint