Basics of the jQuery and jQuery UI CSS Layout

By John Paul Mueller

The makers of jQuery and jQuery UI CSS do a good job of documenting the internals of their library. From a CSS perspective, the material found at jqueryui.com tells you about the styles used to create the output you’ve seen in various places. Here is a good idea of how the initial page of documentation is laid out.

image0.jpg

One of the first things you notice on this page is that the developers recommend you use ThemeRoller to make your changes whenever possible. However, there are many cases where ThemeRoller simply won’t do the job, so you need to make the modifications in a more traditional manner.

The classes are divided into two files with a number of styles within each file:

  • jquery.ui.core.css: Contains all of the styles that affect structural elements in some way. These include

    • Layout helpers: Determines the overall layout of objects onscreen; makes it possible to interact with assistive technologies; and provides a method for resetting the layout as needed.

    • Interaction cues: Defines when an object is disabled.

    • Icons: Specifies the icon state.

    • Overlays: Determines the size and position of overlays.

  • jquery.ui.theme.css: Defines any styles that affect thematic elements, such as color, fonts, and backgrounds. These include

    • Component containers: Specify the appearance of content within various object containers. The containers normally include the overall object, object headers, and object data (specified as content within the styles).

    • Interaction states: Determine the appearance of an object when specific interaction states occur. The four interaction states are: default (when nothing is happening with the object), hover (when the mouse cursor is over the object), active (when the user is actually performing a task with the object), and focus (when the user has selected the object, but isn’t doing anything with it).

    • Interaction cues: Determine the appearance of an object that’s in a particular state to help the user understand the object’s status.

      The interaction cues are: highlight (the object or content is selected for interaction); error (an error has occurred with an object); error text (an error has occurred with content, usually text, within an object); disabled (the object or content are disabled); primary (an object is the primary or first-level object in a hierarchy of objects); and secondary (an object is the secondary or second-level object in a hierarchy of objects).

    • Icons: Define the state and positioning of the icons used with an object. The state and positioning are controlled separately. The state information determines whether the icon is part of a header or the content. In addition, it determines formatting based on the status of the icon: default, hover, active, highlight, error, and error text. Icons are positioned individually based on icon name, such as .ui-icon-carat-1-n.

      The icons are actually defined in block format as part of the states and images section of the icons portion of the file.

      You can see the widget-specific icon images at here.

      The default icon images appear here.

      You can find the active icon images here and those used for highlighting here.

      When an application experiences an error, you see the list of icons here.

    • Corner radius: Creates rounded corners on the various objects.

    • Overlays: Determines the formatting of content within overlays and the formatting of the overlay shadow (so that you can see there’s an object behind the object in the front).

In order to better understand how things work, it’s a good idea to look at the actual files. You can find the first file at a location such as http://code.jquery.com/ui/1.9.2/themes/base/jquery.ui.core.css where http://code.jquery.com/ui/ is the base URL, 1.9.2 is the version of jQuery or jQuery UI in question, and themes/base/jquery.ui.theme.css is the specific file location.

To obtain a copy of the CSS for a different version of jQuery or jQuery UI, simply change the version number part of the URL. The second file is found at a location such as http://code.jquery.com/ui/1.9.2/themes/base/jquery.ui.theme.css. This is what you’ll see when looking at jquery.ui.core.css.

image1.jpg

Viewing the files provides details on how the various styles are constructed, so you can make modifications safely. In addition, the files often contain notes. For example, when you look at jquery.ui.theme.css, you find that one of the styles is actually deprecated (no longer supported), as this note tells you:

/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */

The style is commented out so that you can’t use it. However, the note is still important because it tells you which style to use instead.