KompoZer y Blueprint CSS Framework: Maquetación sencilla a cuatro columnas

En mi navegación por internet buscando temas relacionados con Inkscape me topé con un recurso del que no tenía la más remota idea de su existencia y con el que he quedado maravillado en mi primer contacto.

Blueprint CSS Framework no es un software aunque en la carpeta de descarga incluye algunos javascript a los que en este primer contacto no vamos a prestar atención.

La carpeta llamada blueprint incluye unos CSS prediseñados que debemos enlazar en nuestro HTML. Después tendremos que ocuparnos de crear los contenedores DIV y de darles el class necesario acorde al comportamiento que deseamos.

Lo primero es descargar el ZIP o el TAR.GZ desde la web oficial BlueprintCSS  que una vez descomprimido incluye estos archivos

De todos ellos, tal y como muestra la imagena anterior, sólo nos interesa la carpeta blueprint. La colocamos dentro de la carpeta que tengamos destinada a los CSS de la web que estemos diseñando. Damos por supuesto que esa carpeta se llama css y que está junto al index.html que es la página que vamos a editar

Este orden en la colocación y nombre de los archivos y carpetas es importante para que funcionen las rutas relativas que enlazarán con las hojas de estilo.

Abrimos (o creamos) en KompoZer la página index.html y desde el modo de edición Código fuente insertamos entre <head> y </head> la llamada a la hoja de estilo acorde a las ruta relativa antes mencionada:

<link rel=”stylesheet” href=”css/blueprint/screen.css” type=”text/css” media=”screen, projection”>

Tras guardar (incluso es posible vernos obligados a salir y volver a entrar en KompoZer) para que los cambios tengan efecto y las llamadas a los CSS queden operativas añadimos un simple contenedor genérico

El contenedor se extiende de lado a lado de la interfaz como es lógico. Echando mano del potencial de Blueprint CSS framework nos dirigimos a la parte inferior y con clic derecho sobre la etiqueta <div> nos dirigimos al apartado Clases y escogemos container

Al darle ese class al DIV se le aplican automáticamente varias ediciónes: queda centrado y su ancho es de 950px (muy habitual). Una de las caracteráiticas de Blueprint CSS Framework es que está destinado a webs de ancho fijo y no de ancho líquido. Como esto es un tutorial no me dirijo a Cascades para cambiar el ancho… pero si accedo a su información me encontraré con esto:

Dentro de ese div podemos crear otro con algo de texto…

Y antes de comenzar a editar el ancho de ese nuevo div le aplicamos al div container un class extra de tipo showgrid del mismo modo de antes. Eso se traduce en que aparecen una serie de columnas para ayudarnos visualmente en la maquetación. podemos aplicar este class a cualquiera de los divs.

De nuevo vuelve a aparecer la comodidad de trabajar con Blueprint CSS Framework para elegir el ancho de la columna para el texto. Queremos que ocupe 6 de las 24 columnas; así que sólo tenemos que aplicar a ese div el class span-6

Una de las ventajas de esto es que el div ya queda preparado para añadir contenido flotando por la derecha

Elimino ese texto que he puesto de ejemplo y repito la operación de antes para conseguir cuatro columnas de texto como la primera; es decir con class span-6

¿Qué ha ocurrido?, ¿Por qué la cuarta columna no queda flotando a la derecha de la tercera?. Muy sencillo. Los espaciós que se generan entre columna y columna son consecuencia de que esos divs tienen un margen derecho de 10px. Si el contenedor general midiera 960px todo habría salido bien pero se puerde la esencia de la ayuda visual de las columnas. Para hacer que la última columna se coloque correctamente es necesario decirle al contenedor que tenga un margen derecho de 0px anulando lo anterior.
Para eso le aplicamos un nuevo class a ese contenedor de tipo last con el método que ya conocemos. Si vamos a Cascades podemos ver que last incluye ese valor.

Ahora la maquetación queda así:

Podemos quitar el class showgrid del contenedor en cualquier momento.

  1. No trackbacks yet.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: