jQuery Mobile: CSS Classes Cheat Sheet

# Global Classes

ClassDescription
ui-corner-allIt displays the elements with rounded corners.
ui-shadowIt displays the shadow for the elements.
ui-overlay-shadowIt displays the overlay shadow for the elements.
ui-miniIt displays the smaller elements.

# Button Classes

ClassDescription
ui-btnIt specifies that the element will be styled as a button.
ui-btn-inlineIt shows the button as an inline element which saves the space as needed for the label.
ui-btn-icon-topIt places the icon above the text.
ui-btn-icon-rightIt places the icon right of the text.
ui-btn-icon-bottomIt places the icon below the text.
ui-btn-icon-leftIt places the icon left of the text.
ui-btn-icon-notextIt shows the only icon.
ui-btn-a|bIt 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

ClassDescription
ui-icon-actionIt shows the action icon.
ui-icon-alertIt displays the exclamation mark inside a triangle.
ui-icon-arrow-d-lIt specifies down with the left arrow.
ui-icon-arrow-d-rIt specifies down with a right arrow.
ui-icon-arrow-u-lIt specifies up with the left arrow.
ui-icon-arrow-u-rIt specifies up with the right arrow.
ui-icon-arrow-lIt specifies the left arrow.
ui-icon-arrow-rIt specifies the right arrow.
ui-icon-arrow-uIt specifies the up arrow.
ui-icon-arrow-dIt specifies the down arrow.
ui-icon-barsIt shows the 3 horizontal bars one above the other.
ui-icon-bulletsIt shows the 3 horizontal bullets one above the other.
ui-icon-carat-dIt displays the carat to down.
ui-icon-carat-lIt displays the carat to left.
ui-icon-carat-rIt displays the carat to right.
ui-icon-carat-uIt displays the carat to up.
ui-icon-checkIt shows the checkmark icon.
ui-icon-commentIt specifies the comment or message.
ui-icon-forbiddenIt displays the forbidden icon.
ui-icon-forwardIt specifies the forward icon.
ui-icon-navigationIt specifies the navigation icon.
ui-icon-recycleIt displays the recycle icon.
ui-icon-refreshIt shows the refresh icon.
ui-icon-tagIt indicates the tag icon.
ui-icon-videoIt indicates the video or camera icon.

# Theme Classes

ClassDescription
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 ClassColumnsColumn WidthsCorresponds To
ui-grid-solo1100%ui-block-a
ui-grid-a250%/50%ui-block-a|b
ui-grid-b333%/33%/33%ui-block-a|b|c
ui-grid-c425%/25%/25%/25%ui-block-a|b|c|d
ui-grid-d520%/20%/20%/20%/20%ui-block-a|b|c|d|e

Leave a Reply

Your email address will not be published. Required fields are marked *