Aunque no soy muy amigo de los elemento de ayuda a nuestros estilos porque a veces nos causan más problemas que beneficios y, sobre todo porque muchas veces podemos hacerlo mejor por nuestra cuenta, estos días he estado probando Metro UI CSS 2.0 en una aplicación web que va a ser alojada en Azure Web Sites y la verdad es que es un “plugin” muy bueno si queremos que nuestras aplicaciones tengan un look&feel con los estilos Modern UI de Microsoft.
Metro UI CSS 2.0 dispone de una gran cantidad de estilos que pueden convertir nuestro sitio en algo realmente atractivo, diferente y moderno. Entre otras muchas cosas, podemos tener lo siguiente:
- Controles básicos: Botones, Títulos, Input, Textarea,…
- Menús de navegación
- Caminos de hormigas (breadcrumbs)
- Controles avanzados: Slider, Switch, Carrusel, Listas, TreeViews, …
- Tiles
- Wizards
- Calendarios y controles de fecha
- Más controles avanzados como Rating, Progress Bar, Scroll Bar,…
- Tablas con Datatable
- Y mucho más
Todo ello seguro que le servirá a más de uno para construir sitios muy buenos y ganarse el “respeto” de sus clientes y, si ya sabemos hacer algunas personalizaciones, podremos construir aplicaciones complejas con un Branding adecuado para cada cliente y que nos hagan valer nuestro peso en oro. Muy muy recomendable, así que para sus creadores, mis más sinceros respetos 😛
Problema
Después de la entrada que parecía publicitaria, entremos en materia y pasemos a la acción. Metro UI CSS 2.0 usa una fuente “icónica” para representar los iconos que usa en algunos de sus elementos como por ejemplo el botón de configuración con esa rueda dentada o engranaje que seguro que muchos de vosotros usaréis en vuestros sitios web. En concreto, hablaré del menú que propone este “plugin” y que como podréis observar dispone del botón de configuración en su parte derecha.
Si hacemos las cosas como Microsoft nos propone, agregaremos los estilos de este plugin usando el fichero BundleConfig y creando ese “conjunto” de estilos con su alias para poder integrarlo en nuestras páginas HTML.
bundles.Add(new StyleBundle("~/Content/vendor/metroui").Include(
"~/Content/vendor/metroui/css/metro-bootstrap.min.css",
"~/Content/vendor/metroui/css/metro-bootstrap-responsive.min.css",
"~/Content/vendor/metroui/css/iconFont.min.css"));
Ahora implementamos el menú tal y como se nos indica en la página y lo probamos en local, voilà, todo perfecto y tendremos nuestro bonito menú Modern UI funcionando de forma perfecta, así que procedemos a publicar en Azure nuestro sitio y WTF! en Microsoft Azure no se ven los iconos de Metro UI CSS 2.0 basados en la fuente “icónica”.
Es en este momento en el que me pongo a indagar el problema y una solución al mismo y tras mucho googlear y ver posibles soluciones como cambiar el alias del “Bundle” para que no sea el prefijo de la ruta (que no me funcionó), decidí abrir el fiddler y ver qué ocurría con las peticiones que hacía el sitio web y… aquí el problema, recibimos el error 103 por algún motivo (que aún no alcanzo a entender)
Solución
Como ya os comenté, hay muchas personas que hablan de cambiar el alias al Bundle pero eso no funciona o al menos no funcionó en mi caso, así que busqué un poco mejor y entre artículo y artículo, se me ocurrió que hubiera algún problema entre la compresión que realiza el Bundle a la hora de y la ruta de los archivos de las fuentes dentro de las hojas de estilo (por pensar cosas absurdas), así que decidí pasar del Bundle y poner de forma explícita la instancia a las hojas de estilo de Metro UI CSS 2.0.
@Styles.Render("~/Content/vendor/metroui/css/metro-bootstrap.css")
@Styles.Render("~/Content/vendor/metroui/css/metro-bootstrap-responsive.css")
@Styles.Render("~/Content/vendor/metroui/css/iconFont.min.css")
Nuevamente probamos la publicación del sitio y… ¡Perfecto! Problema solucionado (aunque no sea de la mejor forma)
Enjoy coding!
