Fashion: Blazing Fast Theming For Ext JS

One of the new Ext JS features that received rave reviews at SenchaCon was Fashion. Attendees saw an amazing demo where the styling and colors of the application were changing in the blink of an eye. As we get ready to release Ext JS 6, I would like to provide some background about how we came up with Fashion and share the video of Phil Guerrant, Senior Software Engineer showing the technology in action.

In the Beginning…

In the beginning, there was CSS and it had many shortcomings, including a lack of variables, and it was difficult to maintain as there was no way to reuse code. Eventually developers found themselves with huge CSS files that needed to be rewritten because they were so out of control.

Then along came SASS – Syntactically Awesome StyleSheets which added helpful syntax to CSS. We had variables, nested rules, and mixins to maximize code reuse as well as functions for manipulating colors, strings, and more.

With CSS3, we needed to make sure our styling worked across all of the browsers, so we turned to a combination of Compass and SASS. However, this combination had a system dependency on Ruby which caused major build time compilation issues.

Enter Fashion

We wanted to improve the theming experience but needed a solution that was compatible with but an upgrade from the SASS syntax used in Ext JS 4 and 5. And that’s how we came up with Fashion. It supports all the SASS-like syntax, compiles SASS into CSS on-the-fly in your browser, and includes a new JavaScript API for creating custom extensions. Check out Phil’s video to see Fashion in action.