jQuery UI 1.7 and higher are built around a themable CSS framework with semantic naming conventions.

 

The new CSS framework is built to support not only jQuery UI's own plugins, but also custom plugin development. The framework itself is static with comment tokens which can be manipulated by ThemeRoller to generate a customized look and feel. Framework adoption will promote shared markup conventions and ease of code integration across the plugin community at large.

 

The following classes are split between ui.core.css and ui.theme.css, depending on whether styles are fixed and structural, or themeable (colors, fonts, backgrounds, etc) respectively.

 

jQuery UI CSS Class Framework Documentation:

 

Layout helpers

 

• .ui-helper-hidden: Applies display: none to elements.
• .ui-helper-hidden-accessible: Applies accessible hiding to elements (via abs positioning off the page)

• .ui-helper-reset:  A basic style reset for UI elements. Resets things such as padding, margins, text-decoration, list-style, etc.

• .ui-helper-clearfix: Applies float wrapping properties to parent elements
• .ui-helper-zfix: Applies iframe "fix" css to iframe elements when needed in overlays.

 

Component containers

 

• .ui-widget: Class to be applied on outer container of all widgets. Applies font family and font size to widget. Also applies same family and 1em font size to child form elements specifically, to combat inheritance issues in Win browsers.
• .ui-widget-header: Class to be applied to header containers. Applies header container styles to an element and its child text, links, and icons.
• .ui-widget-content: Class to be applied to content containers. Applies content container styles to an element and its child text, links, and icons. (can be applied to parent or sibling of header)

 

Interaction states

 

• .ui-state-default: Class to be applied to clickable button-like elements. Applies "clickable default" container styles to an element and its child text, links, and icons.
• .ui-state-hover: Class to be applied on mouseover to clickable button-like elements. Applies "clickable hover" container styles to an element and its child text, links, and icons.

• .ui-state-active: Class to be applied on mousedown to clickable button-like elements. Applies "clickable active" container styles to an element and its child text, links, and icons.

 

Interaction Cues

 

• .ui-state-highlight: Class to be applied to highlighted or selected elements. Applies "highlight" container styles to an element and its child text, links, and icons.
• .ui-state-error: Class to be applied to error messaging container elements. Applies "error" container styles to an element and its child text, links, and icons.
• .ui-state-error-text: An additional class that applies just the error text color without background. Can be used on form labels for instance. Also applies error icon color to child icons.
• .ui-state-disabled: Applies a dimmed opacity to disabled UI elements. Meant to be added in addition to an already-styled element.
• .ui-priority-primary: Class to be applied to a priority-1 button in situations where button hierarchy is needed. Applies bold text.
• .ui-priority-secondary: Class to be applied to a priority-2 button in situations where button hierarchy is needed. Applies normal weight text and slight transparency to element.

 

Icons

 

States and images

• .ui-icon: Base class to be applied to an icon element. Sets dimensions to 16px square block, hides inner text, sets background image to "content" state sprite image. Note: .ui-icon class will be given a different sprite background image depending on its parent container. For example, a ui-icon element within a ui-state-default container will get colored according to the ui-state-default's icon color.

 

Icon types

 

 

Misc visuals

 

Corner Radius helpers:

• .ui-corner-tl: Applies corner-radius to top left corner of element.
• .ui-corner-tr: Applies corner-radius to top right corner of element.
• .ui-corner-bl: Applies corner-radius to bottom left corner of element.
• .ui-corner-br: Applies corner-radius to bottom right corner of element.
• .ui-corner-top: Applies corner-radius to both top corners of element.
• .ui-corner-bottom: Applies corner-radius to both bottom corners of element.
• .ui-corner-right: Applies corner-radius to both right corners of element.
• .ui-corner-left: Applies corner-radius to both left corners of element.
• .ui-corner-all: Applies corner-radius to all 4 corners of element.

 

Overlay & Shadow

• .ui-widget-overlay: Applies 100% wxh dimensions to an overlay screen, along with background color/texture, and screen opacity.
• .ui-widget-shadow: Class to be applied to overlay widget shadow elements. Applies background color/texture, custom corner radius, opacity, top/left offsets and shadow "thickness". Thickness is applied via padding to all sides of a shadow that is set to match the dimensions of the overlay element. Offsets are applied via top and left margins (can be positive or negative).

 

 

New framework levers being considered for future releases

A few considerations: there are always lots of new things we could add to the framework to accomodate new widget types, but we need to carefully grow this framework so we strike a good balance between the power/breadth/richness of these levers and the ThemeRoller's UI complexity (and file size). For example, each new lever adds around 6-7kb because the bg texture image is 1k, icon sprite is 5k and then there are the style rules in the CSS. So adding the 3 levers for the forms will add about 20kb to each theme which isn't huge, but it's something to consider.

 

The TR's UI is designed to scale by just adding spindown sections but we already have 11 and adding more will make this a pretty intimidating form. One easy thing we can do is add labels to group logical sections together and make it easier to visually scan but there is a point where too many levers will make it too time-consuming to use so we want to make sure we really know that a new lever is going to be widely used across widgets.

 

Here is the list of new levers that have been requested and are under consideration:

 

• Form states: There have been a bunch of requests for styling form elements with ThemeRoller. This would allow for a complete set of custom styled textareas, inputs, dropdowns, custom radio and checkboxes, spinners, etc. To do this right, it would require a full set of interaction state levers to do properly (default, hover, active) because I think you'd want to be able to style your inputs, dropdowns, custom radio and checkboxes independently from the normal clickable elements.
• ui-form-default :: normal appearance of a form element
• ui-form-hover :: appearance on mouse over
• ui-form-active :: appearance in the selected state (checked radiobutton, checkbox, etc.)
• pressed/down state
• ui-state-down :: new 4th state for when you mouse down on a clickable element to give additional feedback that it's been clicked. also good for touchscreen based UIs
• toolbar
• ui-widget-toolbar :: for basic toolbars, grid header/footer, dialog button bar etc.. this is useful because there are times where you need a bar that isn't a header, button or content area.
• secondary content area
• ui-widget-content-secondary :: for table striping or differentiation in menu panels, etc.