jQuery UI CSS Framework API

jQuery UI CSS Framework

jQuery UI includes a powerful CSS framework designed for creating custom jQuery widgets. The framework contains classes necessary for common user interface designs and can be maintained using jQuery UI ThemeRoller. By using the jQuery UI CSS framework to create your own UI components, you adhere to shared markup conventions for code integration within the plugin community.

Framework Classes

The following CSS classes are defined in ui.core.css and ui.theme.css based on whether the styles are structural or themable (colors, fonts, backgrounds, etc.). These classes are designed for user interface elements to achieve visual consistency across the application and can be themed using jQuery UI ThemeRoller.

Layout Helpers

• .ui-helper-hidden: Applies display: none to the element.
• .ui-helper-hidden-accessible: Applies accessibility hiding (via absolute positioning) to the element.
• .ui-helper-reset: Resets basic styles of UI elements, such as padding, margin, text-decoration, list-style, etc.
• .ui-helper-clearfix: Applies float wrapping properties to the parent element.
• .ui-helper-zfix: Applies the iframe "fix" CSS to <iframe> elements.

Widget Containers

• .ui-widget: Class applied to the outer container of all widgets. Applies font and font size to widgets and also applies the same font and 1em font size to form elements to address inheritance issues in Windows browsers.
• .ui-widget-header: Class applied to header containers. Applies header container styles to the element and its children's text, links, and icons.
• .ui-widget-content: Class applied to content containers. Applies content container styles to the element and its children's text, links, and icons (can be applied to the parent or sibling of a header).

Interaction States

• .ui-state-default: Class applied to clickable button elements. Applies "clickable default" container styles to the element and its children's text, links, and icons.
• .ui-state-hover: Class applied when the mouse hovers over a clickable button element. Applies "clickable hover" container styles to the element and its children's text, links, and icons.
• .ui-state-focus: Class applied when a clickable button element is focused via keyboard. Applies "clickable hover" container styles to the element and its children's text, links, and icons.
• .ui-state-active: Class applied when a clickable button element is clicked. Applies "clickable active" container styles to the element and its children's text, links, and icons.

Interaction Cues

• .ui-state-highlight: Class applied to highlighted or selected elements. Applies "highlight" container styles to the element and its children's text, links, and icons.
• .ui-state-error: Class applied to error message container elements. Applies "error" container styles to the element and its children's text, links, and icons.
• .ui-state-error-text: Class applied for error text color without background. Can be used for form labels or apply error icon color to child icons.
• .ui-state-disabled: Applies a dimmed opacity to disabled UI elements. Adds additional styling to an already styled element.
• .ui-priority-primary: Class applied to buttons of primary priority. Applies bold text.
• .ui-priority-secondary: Class applied to buttons of secondary priority. Applies normal weight text and a slight transparency to the element.

Icons

State and Image

• .ui-icon: Basic class applied to icon elements. Sets size to a 16px square, hides inner text, and sets a background image for the "content" state. Note:

Icon Types

After declaring the .ui-icon class, you can declare a class describing the type of icon. Typically, icon classes follow the syntax .ui-icon-{icon type}-{icon sub description}-{direction}.

For example, a triangle icon pointing to the right would be: .ui-icon-triangle-1-e jQuery UI's ThemeRoller provides a complete set of CSS framework icons in its preview section. Hovering the mouse over the icons shows the class names.

Other Visual Effects

Corner Radius Helpers

• .ui-corner-tl: Applies a corner radius to the top-left corner of the element.
• .ui-corner-tr: Applies a corner radius to the top-right corner of the element.
• .ui-corner-bl: Applies a corner radius to the bottom-left corner of the element.
• .ui-corner-br: Applies a corner radius to the bottom-right corner of the element.
• .ui-corner-top: Applies a corner radius to the top corners on both sides of the element.
• .ui-corner-bottom: Applies a corner radius to the bottom corners on both sides of the element.
• .ui-corner-right: Applies a corner radius to the top and bottom corners on the right side of the element.
• .ui-corner-left: Applies a corner radius to the top and bottom corners on the left side of the element.
• .ui-corner-all: Applies a corner radius to all four corners of the element.

Overlay & Shadow

• .ui-widget-overlay: Applies 100% width and height to the overlay screen, along with background color/texture and screen opacity.
• .ui-widget-shadow: The class applied to the overlay, setting opacity, top/left offset, and the "thickness" of the shadow. The thickness is applied by setting padding on all sides of the shadow. The offset is applied by setting top and left margins (which can be positive or negative).