The difference between a layout and the look and feel of UI components

jQuery UI also provides a framework to create UI components known as widgets, which use CSS rules to define things such as a widget's width, height, margins, padding, and the positioning of the HTML elements that they are built from.

Here is a simple example to illustrate the difference between a layout and the look and feel of a component.

A developer created a jQuery UI widget called SimpleWidget, which uses a div tag as its container.

jQuery UI uses simple naming conventions so that the widget layout CSS rules and the look and feel (theme) CSS rules remain separate. This way, you can apply different themes to the same widget without having to change the layout CSS rules that are specific to the widget itself. jQuery UI also provides a default theme that supplies sensible defaults.

The widget produces the following in HTML:

<div id="firstSimpleWidget" class="ui-simplewidget ui-widget ui-helper-reset">This is SimpleWidget in action!</div>

In the div tag, the id attribute is used by jQuery to identify it to set up a plugin.

The class attribute has several entries; some of these entries are as follows:

Each PrimeFaces theme contains one CSS file in which all the CSS rules are defined. This file is called theme.css. Here are the rules defined for the UI Darkness theme:

/* This rule sets simple dimensions for the widget container */

.ui-simplewidget {
    width: 900px;
    height: 200px;
}
/* This is the default CSS rule from jQuery UI. */

.ui-widget {
    font-family: Verdana, Arial, sans-serif;
    font-size: 1.1em;
}
/* This rule overrides the default rule and is one of the Theme CSS rules */

.ui-widget {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 1.1em;
}
.ui-helper-reset {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    line-height: 1.3;
    text-decoration: none;
    font-size: 100%;
    list-style: none;
}

The theme CSS rule named ui-widget does not define anything that affects the layout of the widget.

By separating the layout from the theme CSS rules, jQuery UI has made it easy for widget developers to create new features for their websites, while web designers can concentrate on the look and feel of a website by using themes.

PrimeFaces uses jQuery, jQuery UI, and themes to build components in the pages of a web application, and we can use the theme rules to create themes without worrying about the individual components or widgets.

The kind of rules that make up a theme can be classified as follows: