Personalizando Blueprint CSS

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 páginas web. En dicha entrada ya comenté que se podía modificar la configuración por defecto de Blueprint y en esta entrada voy a explicar cómo hacerlo.

Para poder llevar a cabo esta tarea necesitamos tener instalado Ruby. Yo he utilizado la versión 1.8.6, en concreto la 1.8.6-25 que es la que tengo instalada.

En una consola nos situamos en el directorio lib dentro del de instalación de Blueprint. Si tecleamos ahora ruby compress.rb -h obtenemos una pequeña ayuda.

Podemos ver que hay opciones para indicarle el directorio de salida o el número y tamaño de las columnas. Ejecutamos ahora el comando:

ruby compress.rb -o "d:/tmp/testblueprint" --column_count=10 --column_width=60 --gutter_width=20

Con este comando se nos crean los archivos de Blueprint (screen.css, print.css e ie.css) en la carpeta destino (d:/tmp/testblueprint), utilizando los tamaños indicados. Debemos tener en cuenta que el ancho total responde a la fórmula siguiente, en la que Ncol es el número de columnas, Wcol el ancho de dichas columnas y Wgut el ancho de las separaciones.

ancho = (Ncol * (Wcol + Wgut)) - Wgut

Sobre el comando, destacar que la ruta de salida se la he tenido que pasar sin el «=» aunque la ayuda lo pone con «=».

Otra opción que podemos utilizar es pasarle un «namespace», de forma que si le pasamos el nombre «tcymu-» por ejemplo (mediante la opción -n tcymu- en la que también he tenido que quitar el «=»), los nombres de las clases generadas pasan de ser del estilo de «span-3» a «tcymu-span-3», es decir les añade como prefijo el nombre pasado, lo que puede sernos útil para evitar conflictos con otros css.

También hay que tener en cuenta, que a la hora de crear los archivos css, Blueprint buscará en el directorio destino (d:/tmp/testblueprint en nuestro ejemplo) los archivos my-screen.css, my-print.css y my-ie.css y añadirá su contenido a screen.css, print.css y ie.css respectivamente.

Por último, vamos a ver la otra opción que nos indica la ayuda del script, que es -p o --project. Para utilizar esta opción necesitamos un archivo settings.yml en el directorio en el que se encuentra el compress.rb.

En ese archivo (que sigue el formato YAML) se definen una o más configuraciones con las que ejecutar el compress. Se pueden definir todas las características vistas anteriormente. Por ejemplo:

tcymu:
  path: d:/tmp/testblueprint
  namespace: tcymu-
  custom_css:
    screen.css:
      - tcymu.css
	  - tcymu_2.css
  custom_layout:
    column_count: 10
    column_width: 60
    gutter_width: 20
  plugins:
    - fancy-type
    - buttons

Esta configuración hace casi lo mismo que las opciones de línea de comandos utilizadas hasta ahora. Vemos el directorio de salida (path), el prefijo (namespace) y las dimensiones de la rejilla (custom_layout, que engloba a column_count, column_width y gutter_width).

Las diferencias son:

• La opción custom_css mediante la que modificamos el archivo css que se busca para agregar a cada opción. En este caso el contenido de tcymu.css y de tcymu_2.css (en el directorio de salida) se añade al final de screen.css en lugar del my-screen.css por defecto.

• La opción plugins añade el css que compone los plugins indicados (se encuentran en blueprint/plugins dentro del directorio de instalación de Blueprint). Además de los que aparecen en el directorio señalado, podemos ver el listado de plugins de Blueprint.

Sin duda esta personalización hace mucho más flexible este ya de por sí buen framework.

CSS: Cambiar la imagen de un div con enlace «onmouseover»

Supongamos que tenemos una imagen que hará de enlace y que queremos que cambie cuando pasamos el ratón sobre ella.

Por ejemplo si tenemos un enlace en una celda de una tabla, en lugar de <td><a><img/></a></td>, lo haremos de la siguiente manera:

<td>
<div id="enlace">
<a href="http://www.tuscerosymisunos.es"></a>
</div>
</td>

Y en nuestro CSS tendremos:

div#enlace a{
	float:left;
	width:205px;
	height:27px;
	background-image:url(img/enlace_off.gif);
	background-repeat: no-repeat;
}
div#enlace a:hover{
	background-image:url(img/enlace_on.gif);
	background-repeat: no-repeat;
}

Señalar que aparece el tamaño de las imágenes (preferiblemente serán del mismo tamaño) y la ruta a las mismas (en este caso están en el directorio img y son imagen_off.gif e imagen_on.gif).

Y con este sencillo truco nos podemos librar de los javascript para realizar esta tarea.

Blueprint: CSS sencillo

Ú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.