Un layout creado a través del framework CSS Blueprint, con ejemplos de uso de las clases más importantes del grid de Blueprint.
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 entre contenedor, ya sea columnas vacías o margen arriba y abajo de las filas. Primero presentaremos la estructura básica 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 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>
<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]-->
</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
</div>
<div class="span-12 last">
Cuerpo...
<div class="span-2">
2 primeras
</div>
<div class="span-6 prepend-4 last">
Mitad derecha del cuerpo...
</div>
</div>
</div>
<div class="span-6 last">
Lateral
</div>
<div class="span-24 last prepend-top">
Pie...
</div>
</div>
</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 aporta Blueprint.
- 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 para los enlaces de suscripción. Además, se está utilizando las clases append-6 y append-1 para generar espacios en blanco. 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", lo que 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 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 página. 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 división, 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 también 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 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 que también sirva para ver cómo 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 página aparte el ejemplo con textos y color.
En el siguiente artículo seguiremos aportando algunas recomendaciones a seguir a la hora de diseñar o maquetar páginas con Blueprint.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...