{"id":10,"date":"2023-08-25T17:38:04","date_gmt":"2023-08-25T17:38:04","guid":{"rendered":"\/\/api.jqueryui.com\/1.10\/?page_id=10"},"modified":"2023-08-25T17:38:04","modified_gmt":"2023-08-25T17:38:04","slug":"css-framework","status":"publish","type":"page","link":"https:\/\/api.jqueryui.com\/1.10\/theming\/css-framework\/","title":{"rendered":"CSS Framework"},"content":{"rendered":"<p>The following is a list of the class names used by jQuery UI. The classes are designed to create a visual consistency across an application and allow components to be themeable by <a href=\"http:\/\/jqueryui.com\/themeroller\/\">jQuery UI ThemeRoller.<\/a> The class names 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.<\/p>\n\n<h3>Layout Helpers<\/h3>\n<ul>\n\t<li>\n\t\t<code>.ui-helper-hidden<\/code>: Hides content visually and from assistive technologies, such as screen readers.\n\t<\/li>\n\t<li>\n\t\t<code>.ui-helper-hidden-accessible<\/code>: Hides content visually, but leaves it available to assistive technologies.\n\t<\/li>\n\t<li>\n\t\t<code>.ui-helper-reset<\/code>: A basic style reset for DOM nodes. Resets padding, margins, text-decoration, list-style, etc.\n\t<\/li>\n\t<li>\n\t\t<code>.ui-helper-clearfix<\/code>: Applies float wrapping properties to parent elements.\n\t<\/li>\n\t<li>\n\t\t<code>.ui-front<\/code>: Applies z-index to manage the stacking of multiple widgets on the screen. See the page about <a href=\"\/1.10\/theming\/stacking-elements\/\">stacking elements<\/a> for more details.\n\t<\/li>\n<\/ul>\n\n<h3>Widget Containers<\/h3>\n<ul>\n\t<li>\n\t\t<code>.ui-widget<\/code>: Class to be applied to the outer container of all widgets. Applies font-family and font size to widgets.\n\t<\/li>\n\t<li>\n\t\t<code>.ui-widget-header<\/code>: Class to be applied to header containers. Applies header container styles to an element and its child text, links, and icons.\n\t<\/li>\n\t<li>\n\t\t<code>.ui-widget-content<\/code>: 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).\n\t<\/li>\n<\/ul>\n\n<h3>Interaction States<\/h3>\n<ul>\n\t<li>\n\t\t<code>.ui-state-default<\/code>: Class to be applied to clickable button-like elements. Applies &quot;clickable default&quot; container styles to an element and its child text, links, and icons.\n\t<\/li>\n\t<li>\n\t\t<code>.ui-state-hover<\/code>: Class to be applied on mouseover to clickable button-like elements. Applies &quot;clickable hover&quot; container styles to an element and its child text, links, and icons.\n\t<\/li>\n\t<li>\n\t\t<code>.ui-state-focus<\/code>: Class to be applied on keyboard focus to clickable button-like elements. Applies &quot;clickable focus&quot; container styles to an element and its child text, links, and icons.\n\t<\/li>\n\t<li>\n\t\t<code>.ui-state-active<\/code>: Class to be applied on mousedown to clickable button-like elements. Applies &quot;clickable active&quot; container styles to an element and its child text, links, and icons.\n\t<\/li>\n<\/ul>\n\n<h3>Interaction Cues<\/h3>\n<ul>\n\t<li>\n\t\t<code>.ui-state-highlight<\/code>: Class to be applied to highlighted or selected elements. Applies &quot;highlight&quot; container styles to an element and its child text, links, and icons.\n\t<\/li>\n\t<li>\n\t\t<code>.ui-state-error<\/code>: Class to be applied to error messaging container elements. Applies &quot;error&quot; container styles to an element and its child text, links, and icons.\n\t<\/li>\n\t<li>\n\t\t<code>.ui-state-error-text<\/code>: 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.\n\t<\/li>\n\t<li>\n\t\t<code>.ui-state-disabled<\/code>: Applies a dimmed opacity to disabled UI elements. Meant to be added in addition to an already-styled element.\n\t<\/li>\n\t<li>\n\t\t<code>.ui-priority-primary<\/code>: Class to be applied to a priority-1 button in situations where button hierarchy is needed.\n\t<\/li>\n\t<li>\n\t\t<code>.ui-priority-secondary<\/code>: Class to be applied to a priority-2 button in situations where button hierarchy is needed.\n\t<\/li>\n<\/ul>\n\n<h3>Icons<\/h3>\n\n<h4>States and images<\/h4>\n<ul>\n\t<li>\n\t\t<code>.ui-icon<\/code>: Base class to be applied to an icon element. Sets dimensions to a 16px square block, hides inner text, and sets background image to the &quot;content&quot; state sprite image. Note: <code>ui-icon<\/code> class will be given a different sprite background image depending on its parent container. For example, a <code>ui-icon<\/code> element within a <code>ui-state-default<\/code> container will get colored according to the <code>ui-state-default<\/code>&apos;s icon color.\n\t<\/li>\n<\/ul>\n\n<h4>Icon types<\/h4>\n\n<p>After declaring a <code>ui-icon<\/code> class, you can follow up with a second class describing the type of icon. Icon classes generally follow a syntax of .ui-icon-{icon type}-{icon sub description}-{direction}.<\/p>\n\n<p>For example, a single triangle icon pointing to the right looks like this: <code>.ui-icon-triangle-1-e<\/code>. ThemeRoller provides the full set of CSS framework icons in its preview column. Hover over them to see the class name.<\/p>\n\n<h3>Misc Visuals<\/h3>\n\n<h4>Corner Radius helpers<\/h4>\n<ul>\n\t<li><code>.ui-corner-tl<\/code>: Applies corner-radius to top left corner of element.<\/li>\n\t<li><code>.ui-corner-tr<\/code>: Applies corner-radius to top right corner of element.<\/li>\n\t<li><code>.ui-corner-bl<\/code>: Applies corner-radius to bottom left corner of element.<\/li>\n\t<li><code>.ui-corner-br<\/code>: Applies corner-radius to bottom right corner of element.<\/li>\n\t<li><code>.ui-corner-top<\/code>: Applies corner-radius to both top corners of element.<\/li>\n\t<li><code>.ui-corner-bottom<\/code>: Applies corner-radius to both bottom corners of element.<\/li>\n\t<li><code>.ui-corner-right<\/code>: Applies corner-radius to both right corners of element.<\/li>\n\t<li><code>.ui-corner-left<\/code>: Applies corner-radius to both left corners of element.<\/li>\n\t<li><code>.ui-corner-all<\/code>: Applies corner-radius to all 4 corners of element.<\/li>\n<\/ul>\n\n<h4>Overlay &amp; Shadow<\/h4>\n<ul>\n\t<li>\n\t\t<code>.ui-widget-overlay<\/code>: Applies 100% width &amp; height dimensions to an overlay screen, along with background color\/texture, and screen opacity.\n\t<\/li>\n\t<li>\n\t\t<code>.ui-widget-shadow<\/code>: Class to be applied to overlay widget shadow elements. Applies background color\/texture, custom corner radius, opacity, top\/left offsets and shadow &quot;thickness&quot;. 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).\n\t<\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>A list of the class names used by jQuery UI to allow components to be themeable.<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":8,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-10","page","type-page","status-publish","hentry","category-theming"],"_links":{"self":[{"href":"https:\/\/api.jqueryui.com\/1.10\/wp-json\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/api.jqueryui.com\/1.10\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/api.jqueryui.com\/1.10\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/api.jqueryui.com\/1.10\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/api.jqueryui.com\/1.10\/wp-json\/wp\/v2\/comments?post=10"}],"version-history":[{"count":1,"href":"https:\/\/api.jqueryui.com\/1.10\/wp-json\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":11,"href":"https:\/\/api.jqueryui.com\/1.10\/wp-json\/wp\/v2\/pages\/10\/revisions\/11"}],"up":[{"embeddable":true,"href":"https:\/\/api.jqueryui.com\/1.10\/wp-json\/wp\/v2\/pages\/8"}],"wp:attachment":[{"href":"https:\/\/api.jqueryui.com\/1.10\/wp-json\/wp\/v2\/media?parent=10"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/api.jqueryui.com\/1.10\/wp-json\/wp\/v2\/categories?post=10"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/api.jqueryui.com\/1.10\/wp-json\/wp\/v2\/tags?post=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}