Podemos ya ver un primer ejemplo de página desarrollada con el framework CSS Blueprint.
De momento sólo vamos a utilizar un pequeño grupo de clases, que conocimos en el articulo Entender la rejilla de Blueprint, 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:
<!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">
<!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
</head>
<body>
<div class="container">
<div class="span-24 last">
<h1>Probando Blueprint</h1>
</div>
<div class="span-18">
<p>Cuerpo...</p>
<div class="span-6">
Destacado 1
</div>
<div class="span-6">
Destacado 2
</div>
<div class="span-6 last">
Destacado 3
</div>
</div>
<div class="span-6 last">
Lateral
</div>
<div class="span-24 last">
Pie...
</div>
</div>
</body>
</html>
- En el HEAD incluimos los archivos con el CSS de blueprint
- En el BODY comenzamos con un "container"
- Colocamos una cabecera, una fila con una única columna de span-24 y last
- En el cuerpo dividimos los espacios en dos columnas principales, de span-18 y span-6 (18+6=24).
- En el cuerpo, dentro del contenedor de span-18, anidamos tres columnas de span-6 (como estamos en un span-18 tenemos espacio para 3 espacios de span-6). Es importante fijarse que el último span-6 tiene 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 la misma 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 creemos una 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.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...