jQuery UI and ThemeRoller

For years we've been on a quest to develop a coherent system of interface widgets that embrace best practice norms, incorporate accessibility, and adopt a unified visual style. With jQuery UI, we've found a like-minded team that are making the dream a reality.

ThemeRoller User Interface

The first-generation ThemeRoller put all the parameters users need to create custom themes together, with widget previews.

Over the years, we've developed dozens of complex user interface designs for a wide range of devices and technologies, many requiring powerful custom UI widgets and a high degree of visual and interaction polish. As new JavaScript libraries emerged, we'd eagerly try them in search of a consistent, scalable framework that would work for us and our clients, but none allowed the degree of customization we needed. So we maintained a home-grown Javascript library that served us reasonably well. But we knew there must be a better way.

Then we encountered jQuery. We were immediately impressed with its elegance; an encounter at a meet-up between our Scott Jehl and John Resig prompted us to delve deeper, and we quickly became full-fledged converts. jQuery freed us to focus on creating experimental UI widgets and incorporate progressive enhancement and accessibility. We contributed some jQuery plugins through our lab, and looked for ways to contribute more to the jQuery community.

That opportunity came when John asked us if we would create a new theme for the widgets in the jQuery UI library. As we started kicking around ideas for the "ideal theme", we quickly realized we were up against a genuine challenge: Nearly every site or application has a unique look and feel — often created with image-based background textures and custom corner shapes, along with highly customized CSS, Even the most beautiful standard theme would stick out like a sore thumb on someone else's site. We wanted something that would let users customize a theme to match any site or application's design system. But how?

  • Project Screenshot
  • Project Screenshot
  • Project Screenshot
  • Project Screenshot
  • Project Screenshot
  • Project Screenshot
  • Project Screenshot
  • Project Screenshot
  • Project Screenshot
  • Project Screenshot
  • Project Screenshot
  • Project Screenshot
  • Project Screenshot
  • Project Screenshot
  • Project Screenshot

jQuery UI offers a constantly growing library of widgets and effects — including datepickers, sliders, dialogs; draggable, droppable and sortable elements — all with a common style framework that can be customized with ThemeRoller.

In developing re-brandable and white label application systems for clients like Fast Search & Transfer, Frito Lay, and GetConnected in the past, we isolated three key principles:

  • In our most successful approaches, we abstracted the CSS into two layers: a base of core styles that defined the functionality and layout, and a second layer that applied a branded look and feel. Separating function from presentation created a workable foundation on which to build.
  • For highly-functional interfaces (which any site using a substantial number of jQuery widgets would be), systems that applied similar styles to components with similar behaviors felt more coherent.
  • Creating highly customized visual designs required intelligent use of CSS and image production.

If we wanted to make creating a theme for the jQuery UI library simple and easy, we would have to address these three issues. And thus, the idea of a browser-based theme creation tool, ThemeRoller was born.

ThemeRoller identifies semantic classes that map to interaction states (clickable, hover, active) and other commonly used elements of UI widgets. This allows us to bring visual and interaction consistency with a relatively small number of levers, so the app is simple to use but still powerful. By layering semi-transparent texture images and Hex colors, we made it possible create rich textures without Photoshop. The final ThemeRoller application solved the major headaches of building a theme — allowing millions of combinations of colors and textures, presenting a WYSIWYG editor and fully functioning jQuery UI widgets as previews, and then packaging all generated images and styles into a tidy download.

We launched ThemeRoller 1.0 in May 2008 and people seemed pretty excited about it. At the same time, we were experimenting with both jQuery and ThemeRoller in the context of our datepicker, progressively enhanced accessible slider and iPod-style drilldown menu lab demos and also started working more closely on a larger design initiative for the jQuery UI site.

  • Project Screenshot
  • Project Screenshot
  • Project Screenshot
  • Project Screenshot
  • Project Screenshot
  • Project Screenshot
  • Project Screenshot
  • Project Screenshot
  • Project Screenshot
  • Project Screenshot
  • Project Screenshot
  • Project Screenshot

The updated ThemeRoller lets users customize fonts, colors, textures, and icons in a unified, easily downloadable skin for jQuery UI widgets.

After a meeting with the team at jQuery Camp and The Ajax Experience 2008, we decided to make a more formal commitment to the jQuery UI team. We collectively took on the role of Design Lead and worked with the jQuery UI team on a number of initiatives: developing a new, standalone CSS framework for the library, refining the visual and functional design of all the jQuery UI widgets, creation of a new planning wiki where everyone can contribute to the dialogue about UI design principles and priorities, and redesign of the jQuery UI site to better demonstrate the capabilities of the library.

We also did a major overhaul of ThemeRoller to reflect the new CSS framework and re-orient the application design into a more compact panel that provides quick access to all style, font, color texture and size controls in accordion panes that can be opened and closed to display a visual summary with an accompanying view of several widgets. This ThemeRoller panel is designed to behave as a freestanding bookmarklet that can be launched in any site that uses jQuery UI widgets, to promote in-place theme design and downloading on the fly.

Our involvement with jQuery UI and ThemeRoller is a rapidly-evolving work in progress, and we're incredibly excited to be part of such a vibrant and dynamic community. We frequently update our Lab with new developments and challenges. Learn more at jQuery UI and ThemeRoller.