Blueprint: CSS sencillo

19 junio 2008 at 8:00 pm 2 comentarios

Últimamente he estado probando un poco Blueprint, un proyecto de código libre alojado en Google Code. En esta entrada voy a presentar esta librería o “framework” para trabajar con CSS.

Lo primero que quiero destacar es que yo no soy diseñador ni maquetador, y por tanto voy a dar una visión bastante superficial.

Bien, ¿y para qué sirve Blueprint?. Pues Blueprint es una herramienta que divide nuestro área de diseño en una cuadrícula, lo que nos facilita el diseño y situación de los distintos elementos de nuetsra página. Realmente no es una cuadrícula porque la división es únicamente horizontal.

Existen otras herramientas similares como 960 Grid System o YUI Grids CSS.

En el caso de Blueprint, la configuración básica nos fija un ancho de 950px dividido en 24 columnas de 30px con 10px entre ellas.

Para utilizarlo basta con añadir sus archivos css en la cabecera de nuestras páginas:

	<link type="text/css" rel="stylesheet" href="css/blueprint/screen.css" />
	<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">
	<!--&#91;if IE&#93;>
	<link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection">
	<!&#91;endif&#93;-->

Ahora, marcamos con un div class="container" la zona controlada por Blueprint. Como podemos ver en las rutas habremos situado screen.css, ie.css y print.css en css/blueprint y es conveniente poner también src/grid.png, ya que si añadimos la clase showgrid nos pone de fondo una cuadrícula muy útil en tiempo de diseño.

Y ahora empezamos a maquetar la página con la ayuda de Blueprint.

<div class="container showgrid">
	<div class="span-15">
		<p>Lorem...</p>
		<p>Proin...</p>
		<p>Nam... </p>
	</div>

	<div class="span-9 last">
		<p>Duis...</p>
		<p>Fusce...</p>
	</div>
</div>

Como vemos un poco de código tiene un resultado bastante notable. Las clases span-15 y span-9 dan la anchura a cada parte (15 + 9 = 24) y con la clase last (obligatoria) le indicamos que es el último elemento de una fila.

Existen otras posibilidades para dejar columnas libres delante (prepend-1) o detrás (append-2) y algunas más.

Para terminar un apunte. He comentado la configuración básica de Blueprint, que es la que aparece en los css comprimidos que se adjuntan. Pero si no se ajusta a nuestros gustos o necesidades, en la descarga del producto se adjunta unos scripts en Ruby que nos generan los css con una configuración que le suministramos.

Anuncios

Entry filed under: CSS. Tags: , .

Instalando CakePHP Mi primera aplicación CakePHP (1)

2 comentarios Add your own

  • 1. Ranob  |  25 junio 2008 en 8:47 am

    Buen articulo Guipu!! 😉

  • 2. Personalizando Blueprint CSS « Tus ceros y mis unos  |  9 marzo 2009 en 7:56 pm

    […] Marzo 2009 Hace ya un tiempo escribí una pequeña iniciación a Blueprint en este blog. Blueprint es un framework CSS que nos facilita el diseño sencillo de nuestras […]

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

Trackback this post  |  Subscribe to the comments via RSS Feed


Mi perfil

View Miguel Orbegozo's profile on LinkedIn

Feedjit

Feeds

Otros…

BlogESfera Directorio de Blogs Hispanos - Agrega tu Blog

Bitacoras.com

Add to Technorati Favorites


A %d blogueros les gusta esto: