Themes Have Changed

Themes offer a look and feel that can enhance the appearance of a web application. Web application frameworks usually provide a framework for building themes along with a few pre-built themes. Themes in web applications have two components to them; the HTML markup for the structure of the page and CSS styles that actually change the look and feel. Wait a second, if the CSS styles are responsible for changing the look and feel, what does the HTML markup have to do with the theme? Conceptually, it has nothing to do with the theme if it is strictly defined as the look and feel. This isn't the case with traditional themes most of the time. With some themes, not only are the look and feel different, but the entire layout is vastly different.

Lets assume that a theme is strictly look and feel. That is, we can change the look and feel of the entire application simply by changing the CSS stylesheet. These stylesheets don't typically contain layout definitions, just colors, fonts, etc. So has this idea been adopted by many frameworks if any?

jQueryUI is a really good example of themes in practice. The CSS framework offered by jQueryUI is strictly a look and feel framework. There aren't any layout restrictions imposed by the CSS definitions. The jQueryUI CSS framework exists for the purpose of adding theme capabilities to the widgets in the jQueryUI library. The framework is flexible enough to be useful with HTML elements that fall outside of the widget set.

CSS classes inside the jQueryUI famework dictate the look and feel of the user interface. There really aren't any restrictions on what elements these classes can be applied to. If you have a container HTML element with several jQueryUI widget descendants, the widgets will have a distinct look and feel while the container element does not. It turns out that the container element can in fact share the same theme as the widgets by giving it an appropriate class from the CSS framework.

By eliminating structural layout requirements from the theme, you add a new level of flexibility. Javascript widgets actually look like they belong in the application. Also, by basing themes entirely on CSS styles, we make creating new themes much easier as well because the classes are standardized and there are no layout surprises. jQueryUI has proven to be very powerful theme-driven user interface framework and it looks as though it will continue to improve into the future as the widget set is expanded.