Personalizando Blueprint CSS

9 marzo 2009 at 7:56 pm Deja un comentario

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.

blueprint2_1_480x238

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.

Anuncios

Entry filed under: CSS. Tags: , .

UBCD4Win, una buena ayuda en caso de crisis. Apache Felix Web Console

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: