# Global Classes
| Class | Description |
|---|---|
ui-corner-all | It displays the elements with rounded corners. |
ui-shadow | It displays the shadow for the elements. |
ui-overlay-shadow | It displays the overlay shadow for the elements. |
ui-mini | It displays the smaller elements. |
# Button Classes
| Class | Description |
|---|---|
ui-btn | It specifies that the element will be styled as a button. |
ui-btn-inline | It shows the button as an inline element which saves the space as needed for the label. |
ui-btn-icon-top | It places the icon above the text. |
ui-btn-icon-right | It places the icon right of the text. |
ui-btn-icon-bottom | It places the icon below the text. |
ui-btn-icon-left | It places the icon left of the text. |
ui-btn-icon-notext | It shows the only icon. |
ui-btn-a|b | It displays the color of the button (“a” will be the default background color i.e. gray and “b” will change the background color to black). |
# Icon Classes
| Class | Description |
|---|---|
ui-icon-action | It shows the action icon. |
ui-icon-alert | It displays the exclamation mark inside a triangle. |
ui-icon-arrow-d-l | It specifies down with the left arrow. |
ui-icon-arrow-d-r | It specifies down with a right arrow. |
ui-icon-arrow-u-l | It specifies up with the left arrow. |
ui-icon-arrow-u-r | It specifies up with the right arrow. |
ui-icon-arrow-l | It specifies the left arrow. |
ui-icon-arrow-r | It specifies the right arrow. |
ui-icon-arrow-u | It specifies the up arrow. |
ui-icon-arrow-d | It specifies the down arrow. |
ui-icon-bars | It shows the 3 horizontal bars one above the other. |
ui-icon-bullets | It shows the 3 horizontal bullets one above the other. |
ui-icon-carat-d | It displays the carat to down. |
ui-icon-carat-l | It displays the carat to left. |
ui-icon-carat-r | It displays the carat to right. |
ui-icon-carat-u | It displays the carat to up. |
ui-icon-check | It shows the checkmark icon. |
ui-icon-comment | It specifies the comment or message. |
ui-icon-forbidden | It displays the forbidden icon. |
ui-icon-forward | It specifies the forward icon. |
ui-icon-navigation | It specifies the navigation icon. |
ui-icon-recycle | It displays the recycle icon. |
ui-icon-refresh | It shows the refresh icon. |
ui-icon-tag | It indicates the tag icon. |
ui-icon-video | It indicates the video or camera icon. |
# Theme Classes
| Class | Description |
|---|---|
ui-bar-(a-z) | It displays the color for bars including headers, footers, and other bars on the page. |
ui-body-(a-z) | It displays the color for the content block including listview, popups, sliders, panels, loaders, etc. |
ui-btn-(a-z) | It displays the color for the button. |
ui-group-theme-(a-z) | It displays the color for control groups, listviews, and collapsible sets. |
ui-overlay-(a-z) | It displays the background color for popup, dialog, and page containers. |
ui-page-theme-(a-z) | It displays the color for pages. |
# Grid Classes
| Grid Class | Columns | Column Widths | Corresponds To |
|---|---|---|---|
| ui-grid-solo | 1 | 100% | ui-block-a |
| ui-grid-a | 2 | 50%/50% | ui-block-a|b |
| ui-grid-b | 3 | 33%/33%/33% | ui-block-a|b|c |
| ui-grid-c | 4 | 25%/25%/25%/25% | ui-block-a|b|c|d |
| ui-grid-d | 5 | 20%/20%/20%/20%/20% | ui-block-a|b|c|d|e |