Actualmente, en la empresa en la que trabajo (Flowers in Space), utilizamos YAML para nuestros desarrollos. Mucho se ha debatido sobre usar o no usar un framework, pero no es lo que nos ocupa ahora. En nuestro caso os puedo decir que agiliza nuestros desarrollos, más adelante es posible que me extienda un poco más sobre el asunto y os doy pros y contras con detalle.
Lamentablemente, aunque nos gusta mucho y nos sentimos cómodos con él, sólo le veíamos una pega, y es que para cargar todas las hojas de estilo de las que hace uso utiliza @import. Hace ya algún tiempo Anieto2k, uno de mis blogs de cabecera, nos explicaba los beneficios de no usar @import. En resumen nos viene a contar que utilizar la etiqueta link permite que todos los ficheros CSS se carguen de forma simultánea.
Así que con el fin de utilizarlo en nuestros futuros proyectos he echado un rato en quitar todos los import de Yaml y a la vez, crear una estructura de directorios intuitiva, con la que nos sintamos cómodos y que nos permita actualizarlo rápidamente a las nuevas versiones del framework. A falta de un nombre mejor lo denominaré YamlMod.
Consideraciones previas
A destacar: esta modificación de Yaml atiende a necesidades propias. ¿Qué quiero decir con esto?
- YamlMod está actualizado a la versión 3.2.1 (revisión 392) de Yaml: intentaré mantenerlo actualizado, sobre todo si veo que tiene buena acogida la idea.
- Addons que trae por defecto Yaml eliminados: no hacemos uso de ellos, pero podéis incorporarlos vosotros manualmente sin ningún inconveniente.
forms.css de Yaml eliminado: nosotros utilizamos Formtastic, que trae su propia hoja de estilos.- División entre
admin y application: nuestros desarrollos los realizamos en Ruby on Rails. Solemos utilizar dos layouts para dividir la zona de administración y la parte pública, así que he mantenido esto en la modificación de Yaml.
- Utilizamos el lenguaje de marcado Haml para describir nuestro xHTML: os explico esto porque a continuación os indico cómo realizar la carga hojas de estilo.
Cómo importar YamlMod
¿Cómo quedaría nuestro application.html.haml? Aquí tenéis un ejemplo, con algunas líneas comentadas (las que no solemos utilizar nosotros tan a menudo). Ojito con la indentación si vas a copiar el código y pegarlo en algún sitio.
/Stylesheets
= stylesheet_link_tag 'reset','core/base_all', :media => "all"
= stylesheet_link_tag 'core/base_screen', :media => "screen,projection"
/= stylesheet_link_tag 'core/base_print', :media => "print"
= stylesheet_link_tag 'screen/application/basemod', :media => "screen,projection"
= stylesheet_link_tag 'screen/application/content', :media => "all"
/Si quieres incluir la navegación pestañas de YAML, descomenta la línea siguiente
/= stylesheet_link_tag 'navigation/nav_shinybuttons', :media => "all"
/ Incluir aquí el tipo de print.css necesario, si procede
/ Más info: http://www.yaml.de/en/documentation/css-components/layout-for-print-media.html
/= stylesheet_link_tag 'print/print_123', :media => "print"
/[if lte IE 7]
= stylesheet_link_tag 'patches/iehacks_all', :media => "all"
= stylesheet_link_tag 'patches/iehacks_screen', :media => "screen,projection"
/= stylesheet_link_tag 'patches/iehacks_print', :media => "print"
/Si quieres incluir la navegación pestañas de YAML, descomenta esta línea
/= stylesheet_link_tag 'patches/patch_nav_vlist', :media => "screen,projection"
/ descomenta la siguiente línea si has incluido algún parche personal para
/= stylesheet_link_tag 'patches/application_patches', :media => "all"
¿Cómo quedaría nuestro admin.html.haml?
/Stylesheets
= stylesheet_link_tag 'reset','core/base_all', :media => "all"
= stylesheet_link_tag 'core/base_screen', :media => "screen,projection"
/= stylesheet_link_tag 'core/base_print', :media => "print"
= stylesheet_link_tag 'screen/admin/basemod', :media => "screen,projection"
= stylesheet_link_tag 'screen/admin/content', :media => "all"
/Si quieres incluir la navegación pestañas de YAML, descomenta la línea siguiente
/= stylesheet_link_tag 'navigation/nav_shinybuttons', :media => "all"
/ Incluir aquí el tipo de print.css necesario, si procede
/ Más info: http://www.yaml.de/en/documentation/css-components/layout-for-print-media.html
/= stylesheet_link_tag 'print/print_123', :media => "print"
/[if lte IE 7]
= stylesheet_link_tag 'patches/iehacks_all', :media => "all"
= stylesheet_link_tag 'patches/iehacks_screen', :media => "screen,projection"
/= stylesheet_link_tag 'patches/iehacks_print', :media => "print"
/Si quieres incluir la navegación pestañas de YAML, descomenta esta línea
/= stylesheet_link_tag 'patches/patch_nav_vlist', :media => "screen,projection"
/ descomenta la siguiente línea si has incluido algún parche personal para
/= stylesheet_link_tag 'patches/admin_patches', :media => "all"
Espero que el recurso os sea de utilidad.
>> Descargar YamlMod ( Yaml versión 3.2.1 revisión 392 )