manual blueprint css

5/11/2018 Manual Blueprint Css - slidepdf.com

http://slidepdf.com/reader/full/manual-blueprint-css 1/16

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 permitemaquetar páginas 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 capítulos)

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 autorización.

1

http://www.desarrolloweb.com/


http://www.desarrolloweb.com/manuales/manual-blueprint-css.html







Parte 1:

Introducción a BlueprintCapítulos que describen el framework CSS Blueprint y explican su modo defuncionamiento. Se detallará el uso de la rejilla, utilizada para el posicionamiento de loselementos y se presentará un primer ejemplo de uso sencillo.

1.1.- Blueprint, Framework CSSPresentación de Blueprint, un framework CSS que sirve de apoyo en el diseño y maquetación de webs 2.0,

gracias a su rejilla y otros estilos de tipografía e impresión.

Blueprint es un complemento para desarrolladores de webs que aumentará la productividad en las tareas de diseño y maquetación de páginas. Se trata de una serie de librerías de Hojas de Estilo en Cascada que contienen código útil paramaquetar una página web y aplicar otros tipos de estilos tipográficos o de impresión, algo que comúnmente conocemoscomo Framework CSS.

Este sistema nos ofrece una serie de archivos con código CSS que podremos incluir en las páginas web para aplicar estilos

de una manera rápida, y solucionar también muchos de los problemas de compatibilidad entre navegadores que puedensurgir durante la etapa de maquetación.

Existen diversos Framework CSS disponibles de manera gratuita en Internet, creados por varios desarrolladores distintos.Blueprint es quizás el más conocido, o por lo menos uno de los más populares y prueba de ello es que se han creado inclusoalgunas 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 encontrarun manual

amplio y un ejemplo completo de maquetación CSS en vídeo

.

1.1.1.- Qué es un Framework CSS

Quizás convendría definir qué se conoce como framework CSS. Pues simplemente se trata de una serie de declaraciones deestilos definidos de forma estándar para que sirvan como base para el diseño de todo tipo de webs. Por decirlo de otramanera, es un poco de código CSS que se podría considerar útil para desarrollar cualquier tipo de web y que se pone adisposición para solucionar diversos problemas o situaciones, comunes en el desarrollo de webs.

Cada framework CSS, aunque quizás deberíamos llamarles simplemente "Librerías CSS", tiene su propia filosofía a la horade crear el código 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 elección del mismo es una decisión muy particular de cadaprogramador o desarrollador web.

Existe además una discusión sobre si es o no conveniente el uso de Frameworks CSS, pero es un asunto donde no vamos aentrar en este artículo. Simplemente queremos contaros cómo funciona Blueprint y cada persona podrá elegir o no usarlo.


2


http://www.desarrolloweb.com/articulos/listado-frameworks-css.html



http://www.desarrolloweb.com/manuales/maquetacion-css-960-grid-system.html



http://www.desarrolloweb.com/articulos/maquetacion-css-960-grid-cabecera.html


http://www.desarrolloweb.com/articulos/framework-css-ventajas-inconvenientes.html














1.1.2.- Características de Blueprint

El framework CSS Blueprint está creado sobre una sólida base de código CSS que ayudará a desarrollar el diseño y maquetación de sitios web. Entre las cosas que nos aporta podemos destacar:

• Una rejilla, que nos permitirá crear cualquier estructura de página web. Básicamente se trata de un conjunto declases CSS para posicionar cualquier elemento en un espacio de 950 píxeles de anchura, dividido en 24 columnas.

• Una definición de tipografía predeterminada, de manera precisa para todos los elementos de la página quepueden tener texto.

• Estilos para formularios, con los que mejorar las interfaces de usuario.

• Estilos para impresión, con las definiciones CSS más útiles para que las páginas se lean bien cuando se imprimenen papel.

• Estilos específicos para IE, con los que resolver algunos de los problemas más comunes de Internet Explorer.

Con todo esto conseguimos una base con la que comenzar fácilmente a hacer páginas web complejas y que serán máscompatibles en distintos navegadores. Además, Blueprint se completa con algunos plugins creados por terceras personas quesirven para hacer cosas más avanzadas o diferentes. Por ejemplo hay plugins para conseguir iconos, para hacer páginas

fluidas (que se adaptan a la anchura de la ventana del navegador), etc.Para comenzar a usar Blueprint tenemos que acceder a su página web y descargarlo, a través de su página web:

http://www.blueprintcss.org/

En los siguientes artículos del Manual de Blueprint te explicaremos todo lo que tienes que conocer para comenzar con buenpie y que te sea muy sencillo adaptarte al framework CSS.

Artículo 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 artículo anterior ya ofrecimos una introducción a Blueprint y a sus características. Ahora queremos comenzar a ofrecerlas 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 artículo veremos qué es lo que trae el archivo para descarga de Blueprint y os instaremos a echar un vistazo a suscontenidos. Luego mostraremos el código que tenemos que poner en nuestra web para incluir los archivos CSS y comenzara utilizar blueprint en una página web.

1.2.1.- Componentes de la descarga de Blueprint

En la descarga del framework CSS Blueprint encontraremos algo más que el simple código CSS que necesitamos paratrabajar. Saber qué tiene el paquete de descarga y dedicarse a examinarlo un poco te puede ayudar a obtener una visióngeneral 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 están "comprimidos", es decir, sin comentarios, saltos de líneay otras cosas para que ocupen poco espacio en Kb.

Directorio blueprint/src: Son los archivos fuente del framework, pero con el código completo, con los comentarios y formato para que se puedan leercómodamente. Es conveniente echar un vistazo a estos archivos, puesto que podremos aprender muchas cosas, sobre cómoestá hecho y las clases que han creado para que utilicemos al maquetar las páginas. Tiene los siguientes archivos:


3





http://www.desarrolloweb.com/articulos/blueprint-frameworks-css.html








• reset.css: Código para resetear los estilos de todos los navegadores y hacerlos compatibles entre si.

• typography.css: definición de tipografía por defecto para la página web, que soluciona algunos problemas cuandose trabaja con fuentes

•grid.css: Este es el archivo más importante, con las clases para generar la rejilla, así que merece la pena prestaratención a cómo está hecha y qué clases nos ofrece.

• forms.css: Código para estilizar formularios y mensajes al usuario.

• ie.css: con estilos propios para Internet Explorer

• print.css: Los estilos que se utilizarán cuando se imprima la página en papel.

Insisto en que es buena idea abrir esos archivos y echar un vistazo al código, los comentarios y así vamos tomando una ideade cómo es y cómo funciona el framework.

Directorio blueprint/plugins: Una serie de plugins que funcionan sobre blueprint para diferentes casos de uso. Más adelante hablaremos sobre plugins.

Directorio lib: Con algunos scripts en el lenguaje de programación Ruby para trabajar con Blueprint.

Directorio templates: Plantillas para empezar a diseñar en un editor gráfico, con guías para ajustarse al espacio por columnas definido en la rejilla.En el momento de escribir este artículo sólo está disponible la plantilla de Photoshop (archivo PSD) con la rejilla deBlueprint.

Directorio test: Contiene ejemplos de páginas creadas para probar las características y posibilidades de Blueprint. También muy interesante,ya que es una manera interesante de ver cómo desarrollar la estructura de página de Blueprint.

1.2.2.- Incluir los archivos de Blueprint en la página

El primer paso para empezar a usar Blueprint en una página web es incluir los archivos CSS con el código comprimido delframework. 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 página se visualiza en una pantalla. Como sepuede ver, eso se indica en la etiqueta LINK en el atributo media="screen, projection". En ese archivo está la mayoría delcódigo del framework, combinando varios de los archivos de estilos CSS que hay en los archivos fuente (sin comprimir) quecomentábamos antes.

El segundo archivo que se incluye contiene el código para la versión para imprimir de la página web, con los estilos delframework que facilitarán la lectura de las webs cuando se impriman. Este archivo lo podemos además editar para hacer queno se vean elementos innecesarios en la impresión, por ejemplo con código como este:

#cabecera{display: none;}

#navegador{display: none;}

El último archivo que se incluye es el ie.css, que además se inserta dentro de un comentario, para que sólo sea visible en lafamilia de navegadores de Internet Explorer. Contiene, como podremos imaginar, código CSS para solucionar algunasdiferencias de interpretación de los estilos en los navegadores de Microsoft.

En el código HTML anterior para incluir Blueprint sólo tenemos que asegurarnos que la ruta en el atributo src esté dirigidaal lugar donde hemos guardado los correspondientes archivos del framework.

1.2.3.- Contenedor principal de la página Blueprint

Veamos ahora una página básica que usa Blueprint. Para ello primero tenemos que saber que todo el código HTML denuestra página tenemos que meterlo en un contenedor.

<div class="container">


4




<p>Contenido de la página</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 delframework, pero esto lo en el próximo artículo en el que explicamos la rejilla de Blueprint.


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

La parte más importante de este framework CSS es la rejilla, que como ya habíamos adelantado en el Manual de Blueprint,permite situar los elementos de la página de una manera precisa y sencilla. En este artículo mostraremos cómo funciona estarejilla y las principales clases para poder maquetar una página web.

Blueprint propone un contenedor de 950 píxeles de anchura, que se divide en 24 columnas. La columna ocupa un espacio de30 píxeles, con una separación de 10 píxeles entre columnas.

Mediante estas dimensiones, como decimos, se pueden conseguir 24 columnas en un diseño, pero nosotros podemos unirdos o más columnas para obtener espacios mayores. Por ejemplo, si deseamos que en nuestro diseño 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 píxeles de cada una, más los 10 píxeles de separación entre ellas, en total 70 píxeles. Si

unimos 3 columnas tendríamos 30 píxeles de cada columna menos dos separaciones de 10, con lo que suma 110 píxeles. Asípodríamos conseguir contenedores de hasta 24 anchuras distintas. En general, la anchura disponible al juntar variascolumnas la podríamos calcular con la fórmula:

anchura = (columnas_que_unimos * 40) - 10

Para que quede claro cómo se combinan columnas se puede ver esta imagen, en la que tenemos una representación de doscontenedores, 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 número de columnas que deseamos juntar.

span-1 (contenedor con 30 píxeles)span-2 (contenedor con 70 píxeles)span-3 (contenedor con 110 píxeles)...span-23 (contenedor con 910 píxeles)span-24 (contenedor con 950 píxeles)

Para hacer una estructura de página, es decir, definir los contenedores de nuestra plantilla o layout, podemos utilizar diversos


5


http://www.desarrolloweb.com/articulos/entender-rejilla-blueprint.html








contenedores span-x y además, podremos anidar contenedores para producir estructuras de página más complejas.

Tenemos que tener en cuenta que en cada sección tenemos que completar las 24 columas, es decir si dividimos el espacio dela página en diversas secciones, sumandolas en la anchura total del documento, debemos tener siempre las 24 columnas de

espacio utilizado.

Además, en el contenedor que complete hasta la columna 24 tenemos que ponerle también la clase "last".

Veamos un ejemplo de estructura de página 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 artículo Comenzara 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 navegación (con span-8) enel lateral derecho. Acabará la página con un pie que también 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 podrás crear estructuras de página todo lo complejas que desees, aunque el framework tiene muchas otrascosas que todavía no hemos visto. No obstante, con lo que sabes ya podrás hacer bastantes cosas y todo irá bien mientrasrespetes:

• 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 página tienen contenedores que ocupan las 24 columnas. En la cabecera está claroporque usamos un span-24 que ya son todas las columnas y en la parte central de la página tenemos 16 columnas del cuerpo+ 8 columnas del lateral = 24 columnas. El pie de página también tiene sus 24 columnas en un único contenedor. En elpróximo artículo veremos ya un ejemplo de página completo que utiliza Blueprint.


1.4.- Primer ejemplo de página con BlueprintPodemos ya ver un primer ejemplo de página desarrollada con el framework CSS Blueprint.

La manera más interesante de afianzar todos los conocimientos adquiridos en el Manual de Blueprint es ver un primerejemplo completo de página que usa este framework Javascript. En este ejemplo haremos una estructura de página dondeanidamos algunos contenedores y donde jugamos con columnas de distintas anchuras.

De momento sólo vamos a utilizar un pequeño grupo de clases, que conocimos en el articulo Entender la rejilla deBlueprint

, pero aun así los resultados son bastante interesantes, aun con un código sencillo.

Como ya hemos aprendido unas cuantas cosas de Blueprint, podemos pasar directamente a ver este código fuente:


6


http://www.desarrolloweb.com/articulos/comenzar-usar-blueprint.html



http://www.desarrolloweb.com/articulos/primer-ejemplo-blueprint.html















<!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-18tenemos espacio para 3 espacios de span-6). Es importante fijarse que el último span-6 tiene también la clase "last",porque termina una fila dentro del span-18.

• El pie también es span-24 y last

Este ejemplo lo podemos ver en marcha en una página aparte.

Sin embargo, esta división 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 más clara, podemos acceder a este segundo enlace en el que hemos utilizado lamisma estructura y hemos colocado algo de texto como contenido en los contenedores.

Espero que este ejemplo sirva como muestra a lo fácil que es dividir la página en diferentes espacios, de modo que creemosuna plantilla adecuada a nuestras necesidades. Las posibilidades de configuración de la rejilla son ilimitadas.

No obstante cabe señalar de nuevo que aun nos quedan muchas otras clases que conocer en el framework CSS Blueprint.



7


http://www.desarrolloweb.com/articulos/ejemplos/css/blueprint/ejemplo1.html


http://www.desarrolloweb.com/articulos/ejemplos/css/blueprint/ejemplo1-textos-muestra.html




http://www.desarrolloweb.com/articulos/clases-css-blueprint.html




Parte 2:

Clases de BlueprintRealizar los primeros pasos con el framework CSS Blueprint no resulta difícil. Habremospodido comprobar que, teniendo con unos pocos conceptos claros y mediante unpequeño conjunto de clases, se pueden hacer cosas bastante interesantes, que nosayudarán a maquetar webs de una manera muy sencilla. Sin embargo, para poder sacartodo 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 páginaweb, utilizando la rejilla.

A lo largo de los últimos artículos del Manual de Blueprint ya hemos tenido ocasión de aprender a trabajar con algunasclases principales del framework CSS para la configuración de la rejilla, pero aun quedan muchas otras clases que podremosusar para determinar otras cosas sobre el posicionamiento de los contenedores en la página.

A continuación daremos un repaso a todas las clases que podemos utilizar cuando configuramos la rejilla, lo que tambiénnos dará una visión más amplia de las posibilidades de maquetación implementadas en Blueprint.

Antes de nada, convendría recordar que nunca está de más echar un vistazo al código fuente del framework comentado, queestá en el directorio blueprint/src del paquete de descarga, en el archivo "grid.css". En ese archivo CSS encontraremoscomentarios al código con diversas informaciones útiles y breves explicaciones de los uso de las clases. Además, podremos

ver cuáles son los estilos CSS especificados por el framework y aprender un poco sobre cómo está hecho.

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

Clase container: la clase principal de la estructura de página de Blueprint. Todo debería colocarse dentro de un contenedorprincipal, con la clase container.

Nota: la clase container la utilizamos por primera vez en el artículo Comenzar a usar Blueprint

.

Clase showgrid: una clase útil para identificar visualmente la rejilla de Blueprint. La podemos asignar sobre contenedorescon clase "container" o "span-x", para mostrar con una imagen de fondo la división de columnas que implementa elframework CSS.

Clase span-x (desde span-1 a span-24): Para hacer los contenedores que se colocan en la rejilla, utilizamos un conjunto declases 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 númerodel 1 al 24 indica la cantidad de columnas que ocupa. Las clases span-x también 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 justamenteque es el último elemento de esa fila y que el siguiente empiece siempre debajo de esa fila de contenidos y a la izquierda.


8














Nota: Tanto las clases span-1, span-2, ..., span-24 como la clase "last" ya se han explicado con detalle en el artículo Entendiendo la rejilla de

Blueprint

.

Clases append-x (desde append-1 hasta append-23): estas clases sirven para rellenar con un espacio vacío después delelemento. Imaginemos que tenemos un contenedor con span-3 y luego queremos tener un espacio vacío de 6 columnas.Entonces podríamos colocarle a ese contenedor las clases "span-3 append-6", con ello el espacio total que se reservará paraese contenedor es de 3 + 6 = 9 columnas (tres columnas de espacio real para meter contenidos y 6 columnas de espacio enblanco después del contenedor).

Clases prepend-x (desde prepend-1 a prepend-23): son unas clases parecidas a append-x, con la diferencia que el espacioen 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 píxel de anchura.

Clase colborder: sirve para crear un borde, igual que la clase anterior border, pero lo hace dejando un mayor espacio enblanco entre la línea del borde y los contenidos de los lados. El tema es que si utilizamos esta clase se expandirá elcontenedor en una columna adicional y tendremos que tenerla en cuenta cuando hagamos el recuento de 24 columnas porcada 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 elcontenido de una columna y situarlo en un lugar distinto. Si utilizamos la clase pull-x es como trasladar el contenido de esecontenedor a la izquierda y en "x" colocamos el número de columnas que lo movemos. Por su parte, si util izamos las clasespush-x lo que estamos haciendo es como empujar el contenido a la derecha y en la x de 1 a 24 especificamos la cantidad deespacio que lo deseamos mover a la derecha. El contenido se colocará encima de otros contenidos que pueda haber en elsitio 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 a1.5em, osea, una vez y medio el tamaño 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 elmargen 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 elcontenido. 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 unalínea horizontal con la que separar columnas.

Clase space para elementos HR (hr.space): Es una línea de separación pero en blanco.

Clase clearfix: Esta clase es muy importante, ya que nos resuelve el problema de los fondos sobre capas que tienencontenidos 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 artículo Solución al problema de float en maquetación CSS.

Clase clear: Para que la capa se coloque en una nueva fila, dejando libres los espacios de los elementos que pueda haberflotantes 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 más utilizadas, vamos a crear un ejemplo másavanzado con Blueprint

, en el siguente artículo.



9





http://www.desarrolloweb.com/articulos/problema-float-maquetacion-css.html


http://www.desarrolloweb.com/articulos/ejemplo-clase-grid-blueprint.html














2.2.- Ejemplo de uso de las clases del grid de BlueprintUn layout creado a través del framework CSS Blueprint, con ejemplos de uso de las clases más

importantes del grid de Blueprint.

A lo largo del Manual de Blueprint ya hemos explicado las clases CSS para diseñar una web adaptando la posición de loselementos a la rejilla que nos ofrece este framework CSS. En concreto, en el artículo anterior vimos las clases que Blueprintpone a nuestra disposición para maquetar la página web . Así que en el presente texto vamos a crear un segundo ejemplo demaquetación utilizando las clases del grid de Blueprint, o por lo menos la mayoría de ellas y las que son más utilizadas.

En el presente ejemplo vamos a crear un modelo de página con tres columnas, con anidación de varios contenedores. Además vamos a usar algunas de las clases que todavía no hemos practicado, para dejar espacios en blanco entrecontenedor, ya sea columnas vacías o margen arriba y abajo de las filas. Primero presentaremos la estructura básica de estesegundo 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 página, con una única columna. Veamos el código 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>



media="screen, projection"><![endif]-->

</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 suscripción</div>

</div><div class="span-18">

<div class="span-6">Navegador


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 código 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 diseño la división en las 24 columnas que nos aportaBlueprint.

• La cabecera tiene una fila con una columna con las clases "span-24 last append-bottom". La clase append-bottom,que no habíamos utilizado todavía, 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 paralos enlaces de suscripción. Además, se está utilizando las clases append-6 y append-1 para generar espacios enblanco. Si nos fijamos los tamaños 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", loque suman un total de 8 columnas. 16 + 8 = 24 columnas en toda la cabecera.

• El área central de la página tiene una división de 18 y 6 columnas. La parte de 18 luego se divide también en otrascolumnas, una de 6 y otra de 12. En total el efecto hace que el cuerpo parezca tener 3 columnas, pero en realidadson 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 estamosdentro de un span-12, tenemos que rellenar esas 12 columnas para completar una fila, en vez de las 24 normales detodo el ancho de página. Las capas que colocamos dentro de este contenedor de 12 son dos: una capa que tieneespacio 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 división, 4 deespacio en blanco y finalmente 6 del último contenedor. Hace un total de 12 de anchura y está metida en uncontenedor de 12 de anchura, por lo tanto ocupa el espacio total disponible y tenemos que asignarle también laclase "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 cómo se organizan los espacios y cómo 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 quetambién sirva para ver cómo se puede maquetar con Blueprint y anidar contenedores para conseguir cualquier tipo delayout.

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 decontenedores, 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 página aparte el ejemplo con textos y color.

Nota: Os animo a ver el código fuente del segundo ejemplo, con capas que tienen textos y colores, para ver una posible utilización de los

contenedores y la aplicación de estilos CSS adicionales a los elementos.

En el siguiente artículo seguiremos aportando algunas recomendaciones a seguir a la hora de diseñar o maquetar páginas conBlueprint.



11




http://www.desarrolloweb.com/articulos/ejemplos/css/blueprint/ejemplo2-textos-color.html










2.3.- Recomendaciones a la hora de diseñar con el frameworkCSS Blueprint

Algunas recomendaciones para que el trabajo con Blueprint sea más sencillo y podamos sacarle mayor provecho al framework CSS.

Ya llevamos unos cuantos artículos sobre el framework CSS Blueprint, que hemos ido publicando en un Manual deBlueprint. Hemos podido conocer la rejilla para posicionamiento de elementos en la página y hemos visto un par deejemplos interesantes de páginas maquetadas con Blueprint.

Ahora vamos a hacer una pequeña aportación en forma de consejos útiles para trabajar con el framework CSS, sacarle mayorpartido y evitar problemas de diseño.

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 añadir a tu proyecto losindiques en hojas de estilo propias, que crees en archivos aparte de los del framework. Ayudará a mantener tus archivos deestilo más reducidos y no mezclar tus especificaciones con las de Blueprint.

2.3.2.- Diseña con la plantilla de 24 columnas

El primer paso para la concepción creativa de una web es el diseño en un programa de edición gráfica como Photoshop. Enel archivo de descarga de Blueprint tenemos un PSD (archivo de photoshop) con una serie de divisiones en columnas y guías para ajustarnos a ellas. Ese archivo sirve de plantilla vacía con la que generar nuestro propio diseño, que se ajuste a losespacios disponibles en Blueprint.

El archivo de Photoshop viene con una capa oculta que contiene un ejemplo de diseño de sitio web, basándose en losespacios disponibles en Blueprint. Podemos buscar esa capa en la ventana de capas, cuyo nombre es "sample site".

2.3.3.- Recomendación para aplicar estilos adicionales a los contenedores

Como se puede ver, en el ejemplo del artículo anterior ya hemos colocado algunos estilos en los contenedores de la página,como colores de fondo y hasta algún estilo de tipografía. Aun sin mucha experiencia en el Framework Blueprint podría darun 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 más la pena colocardentro 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:

<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 más estilos que los proporcionados por esa clase "span-2". Luegohemos 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 comportamientopor defecto para los contenedores, que incluye un padding entre otras cosas. Mi recomendación, igual que en el puntoanterior, sería utilizar esa clase también 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














Nosotros podríamos incluso cambiar los estilos de la clase "box" si es que no se ajustan al modelo de caja que deseamostener en nuestro sitio web.

2.3.4.- Usando tipografías Tipografías por defecto: Al usar las etiquetas estándar del HTML tenemos la ventaja de que éstas están formateadas por el framework CSS y por loque respecta a la tipografía, ya están previamente configuradas. No obstante, podríamos necesitar cambiar alguna tipografíay esto se puede hacer en nuestra propia hoja de estilo o editando el archivo del framework screen.css, en la sección que estámarcada con el comentario /* typography.css */. Aunque no sea muy recomendable cambiar el código fuente delframework, para pequeñas ediciones como la tipografía por defecto no veo problema en tocarla directamente en el códigode Blueprint.

Usar medidas em para tamaños del texto: Las medidas CSS relativas son mucho más adecuadas, como las que obtenemos con las unidades px o em. Lo másrecomendable cuando queramos cambiar el tamaño de los textos es asignarlos con la unidad em, que está explicada, juntocon sus ventajas, en el artículo Tamaños de texto con CSS: buenas prácticas.

En general, todas las prácticas recomendables para CSS también se pueden aplicar a nuestro trabajo con el framework.Después de varias prácticas seguro que irás creando un esquema de trabajo que se adapte bien a tus costumbres y conocimientos.


Parte 3:Ejemplos de

maquetación CSS

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

3.1.- Taller Blueprint: layout con cabecera y pie fluidosUn ejemplo de diseño utilizando el framework CSS Blueprint en el que realizamos la cabecera y pie de

página fluidos, que se ajustan a la anchura disponible.

Nos han preguntado en alguna ocasión cómo hacer para que la cabecera o pie de página se expanda para ocupar todo el


13


http://www.desarrolloweb.com/articulos/tamanos-texto-css.html


http://www.desarrolloweb.com/articulos/tamanos-texto-css.html






ancho de la pantalla, tal como tenemos en el diseño actual de DesarrolloWeb.com, trabajando con el framework CSSBlueprint. En este artículo vamos a realuzar una práctica de diseño de un layout con esas características.

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 página. Para elque le interese, tenemos a disposición de los lectores un completo Manual de Blueprint CSS

, que deberíamos leer si noestamos familiarizados con este interesante e útil framework para la maquetación 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 más que uno que adapta su anchura a aquella que tenga la ventana del navegador en cada momento. Generalmente con Blueprint diseñamos plantillas con una anchurapredeterminada de 950 píxeles, por lo que todos los contenidos se adaptan a ese espacio disponible. En las páginas fluidasno ocurre esto. Por el contrario, la anchura de página será variable y corresponderá con aquella que tenga el usuario en su

ventana del navegador.

Existen complementos para el framework Blueprint para permitir hacer páginas fluidas, como el plugin que podemosencontrar en Blueprint Liquid. Ahora bien, nosotros en este caso no queremos hacer justamente una página fluida, sino sólouna de las partes de la página, como la cabecera o pie. Y además, ni siquiera queremos hacer esa parte de la página realmentefluída, sino que simplemente deseamos que el fondo de la misma se adapte a toda la anchura disponible en la ventana, perolos contenidos colocados en la anchura disponible en Blueprint.

Por ello, vamos a utilizar simplemente una sencilla técnica que nos sirva para hacer que el fondo de la cabecera o el pie seadapte 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 colocación. La técnica que vamos a contar ahora trata simplemente de crear varios contenedores en lugar deuno solo.

Nota: Nada impide que creemos en un layout desarrollado con Blueprint tantos contenedores como queramos en una página web. Para ellosimplemente 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 unaanchura, que son los 950 píxeles disponibles en los layouts predeterminados de Blueprint. Si para definir un elemento contodo el ancho disponible lo colocamos dentro de un contenedor, no podrá tener más que 950 píxeles de anchura. Por tanto,tenemos que hacer que ese contenedor esté incluido dentro de otra capa. Esa capa podrá ser fluida (para ello simplementeno le vamos a indicar ninguna anchura) y podremos asignarle un color de fondo como queramos, que se adaptará a lasdimensiones de la ventana. Luego colocaremos dentro un container para que los elementos que maquetemos dentro puedanutilizar las clases de Blueprint.

El esquema en capas sería más o menos como este:

<div id="cabecera"><div class="container">



Buscador...................................</div>

</div></div>

Como vemos, tenemos un DIV con id="cabecera" y dentro un container. A continuación en el código vemos, dentro delcontaniner, que se pueden colocar todas las clases de Blueprint que necesitemos para definir y posicionar los elementos que


14



http://www.desarrolloweb.com/articulos/ejemplos/css/blueprint/cabecera-pie-fluidos-contexto.html

http://www.desarrolloweb.com/articulos/473.php

http://www.desarrolloweb.com/wiki/blueprint-liquid.html









http://www.desarrolloweb.com/articulos/473.php








irían dentro.

Ahora, esa capa con id="cabecera" está fuera de un container (contiene un container, pero no está afectada por la anchurade 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, después de la cabecera, colocaremos el cuerpo de la página. El cuerpo sí deseamos que se acople todo a los950 píxeles, y que no tenga el mismo fondo de la cabecera. Por lo que tendremos que cerrar el container de la cabecera y lacapa a la que habíamos colocado id="cabecera". Por ello, nos veremos obligados a colocar el cuerpo en un nuevocontenedor.

<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 también un fondo fluido, tendremos que colocarlo en otro contenedorindependiente del cuerpo y hacer como lo que hicimos en la cabecera, que hacemos una capa más general que el propiocontainer para aplicarle un fondo y que sea fluido.

<div id="pie"><div class="container">

<div class="span-21">Enlaces del pie..


logo en pequeño</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 anchodisponible.

#pie{background-color: #300;color: #fff;

}

3.1.3.- Todo el código completo para hacer cabecera y pie fluidos en Blueprint

Podemos ver a continuación todo el código HTML y CSS necesario para crear este esquema de página con cabecera y piefluidos.

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



media="screen, projection"><![endif]--><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">



Buscador...................................</div>

</div></div>


Columna de contenidos 1</div><div class="span-12">

Cuerpo principal</div><div class="span-7 last">

Lateral</div>

</div><div id="pie">


Enlaces del pie..</div>

<div class="span-3 last">logo en pequeño</div>

</div></div>

</body></html>

Si lo deseamos, podemos ver este ejemplo en marcha en una página aparte.

Además, hemos preparado una página adicional, basada en este mismo layout, pero a la que le hemos incluido algo de estilosCSS para las cajas, algo más de texto y un poco de color. Podemos ver el ejemplo en marcha con texto y color.



16


http://www.desarrolloweb.com/articulos/ejemplos/css/blueprint/cabecera-pie-fluidos.html









manual blueprint css

Documents