In this chapter, we learned a lot about widgets, themes, and styles in general. These are essential ingredients for creating themeable user interfaces. Widgets are the structural components that user interfaces are made of. Styles change the look and feel of widgets in addition to the layout of the widget elements.
Adding styles to widgets presents problems with consistency and portability. We've seen different ways we can improve our CSS so that we can avoid duplicate property definitions by grouping selectors. We can further increase style reuse by moving CSS properties to a base class and nesting more specific properties within it.
Layout also plays a role in designing themes. The individual HTML elements that make up a widget need to be positioned properly and given appropriate space. These are all things that should be controlled by the theme styles. The HTML structure says what the widget has, while the theme says where it goes.
The jQuery UI framework helps us with all concepts learned in this chapter. The two sub-frameworks provided by jQuery UI give us widgets as well as a CSS framework we can use to create our own themes.
In the next chapter, we'll dig a little deeper into how jQuery UI theming works and get hands-on examples and experience with the framework.