Primer ejemplo de página con Blueprint

  • Por
Podemos 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 primer ejemplo completo de página que usa este framework Javascript. En este ejemplo haremos una estructura de página donde anidamos 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 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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Drhank

21/7/2010
Excelente!
Excelente framework, lo estoy utilizando para una web que estoy empezando a hacer y te facilita en 100% la maquetacion,ademas tenes la posibilidad de extraer del codigo solo lo que te interesa...

Super recomendado :)

Tomas

31/8/2010
Gracias
Execelente tutorial, solo una corrección mínima. Donde dice "framework javascript" al principio debería decir, creo, "framework css"

ialex

14/4/2011
Error en la pagina
se menciona el uso del framework Javascript??? Cuando el Framework es CSS

Byeve

06/7/2011
Las columnas (span-18) por ejemplo
Hola amigos, he probado a copiar los código fuente en otro html normal, con dreamweaver. Lo que ocurre que pongo el código tal cual y no me respeta las columnas, todo me lo hace en una fila, no me lo hace como columnas si no como filas. ¿por que puede ser?

Rosmel

10/2/2012
Pregunta sobre el framework BluePrint
Hola amigo, solo es curiosidad; al utilizars el framework BluePrint, NO estariamos creando una web estatica?

Lo digo por las dimensiones exactas que se utiliza sobre todo en el ancho de pa pagina, Que pasaria si lo quiero navegar desde un celular u otro equipo movil?