domingo, 18 de septiembre de 2011

BluePrint y CSS from rails 3.0 to rails 3.1

Si utilizas el framewrok Blueprint y has migrado una aplicación de rails 3.0 a 3.1 esto te puede interesar, experiencias:

>> La solución oficial (Estilos dentro de assets):
  1. Mover las hojas de estilo de "public\stylesheets" a "app\assets\stylesheets"
  2. Mover las imágenes de "\public\images" a "app\assets\images"
  3. Eliminar las llamadas a CSS "stylesheet_link_tag" de los layouts

Problemas:
  1. Perdemos el condicional de "print, :media => 'print'" y "screen, :media => 'screen, projection'", con lo que si queremos utilizar BluePrint tendremos que borrar uno de los dos (app\views\layouts\*.erb)
  2. Si tenemos alguno estilo condicional como en nuestro caso "devise.css" lo tenemos que aplicar a todas las hojas.

>> Migrar blueprint a SASS:

Si migrar a SASS es una condición sinecuanum os puede interesar el siguiente proyecto "https://github.com/chriseppstein/blueprint-sass", nosotros no lo hemos probado.

>> Nuestra solución mixta:
  1. Mover las hojas de estilo propias (por ejemplo devise.css) y el framework Blueprint a "vendor\assets\stylesheets".
  2. Mover las hojas de estilo comunes (típicamente proyecto.css) de "public\stylesheets" a "app\assets\stylesheets"
  3. Mover las imágenes de "\public\images" a "app\assets\images"
  4. Corregir las rutas de las imágenes en los hojas estilos, típicamente "proyecto.css". Ejemplo
    • Original: "background-image: url(/images/logo.png);"
    • Final: "background-image: url(/assets/logo.png);"
    • Este paso solo hace falta si queremos mantener todas nuestras imágenes en la carpeta "app\assets\images" si las dejamos en "\public\images" no hará falta hacer el cambio, pero tendremos que acordarnos que tenemos imágenes en dos carpetas distintas.
Ventajas:
  1. Nos permite migrar la aplicación a 3.1 con pocos cambios
  2. Nos permite en un futuro empezar a utilizar SASS
  3. Nos permite mantener estilos condicionales.

No hay comentarios:

Publicar un comentario