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>
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.
Compartir en redes sociales
 Drhank | Excelente! | 21/7/2010 |
Usuarios: 
19 de julio de 2010
Valoración del artículo:
