Ejemplo de uso de las clases del grid de Blueprint

  • Por
Un 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 los elementos a la rejilla que nos ofrece este framework CSS. En concreto, en el artículo anterior vimos las clases que Blueprint pone a nuestra disposición para maquetar la página web . Así que en el presente texto vamos a crear un segundo ejemplo de maquetació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 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.

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

john_elvis__durn_montoya

08/9/2010
Medidas no encajan
Saludos, muy buen tutorial, pero tengo 2 dudas:

1) Porque al seguir los mismos pasos y escribir el sigte codigo:

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

la capa "span-6 last" no encaja y baja a la sigte linea.

2)Porque el ejemplo aparece con un ancho de 1160 px, y al copiar el mismo codigo en un nuevo fichero tiene el tamaño adecuado de 950 px.

Gracias.

Allex

16/3/2012
un Margin-top graduable
a lo mejor soy nuevisimo en esto pero aun me pregunto porque en Blue print no existe un margin-top al igual que existe un margin-left o -right?
alguien me puede explicar porfavor.. perdonen mi basta ignorancia