Skip to content

Commit 214280e

Browse files
tjvantolltjvantoll
committed
Porting CSS class name docs from the old site and placing it in a new theming category. Fixes #59: Document CSS
(cherry picked from commit 18fd2e4275217d228c239996dc6c4b7bc1492b1b)
1 parent a645b6a commit 214280e

File tree

2 files changed

+124
-0
lines changed

2 files changed

+124
-0
lines changed

‎categories.xml

+5
Original file line numberDiff line numberDiff line change
@@ -37,5 +37,10 @@
3737
<p>Functionality provided by jquery.ui.effect.js. In addition to the methods listed below, jquery.ui.effect.js also includes several <a href="/easings/">easings</a>.</p>
3838
]]></desc>
3939
</category>
40+
<category name="Theming" slug="theming">
41+
<desc><![CDATA[
42+
<p>jQuery UI includes a robust CSS Framework designed for building custom jQuery widgets. The framework includes classes that cover a wide array of common user interface needs, and can be manipulated using <a href="http://jqueryui.com/themeroller/">jQuery UI ThemeRoller</a>. By building your UI components using the jQuery UI CSS Framework, you will be adopting shared markup conventions and allowing for ease of code integration across the plugin community at large.</p>
43+
]]></desc>
44+
</category>
4045
<category name="All" slug="all"/>
4146
</categories>

‎pages/classNames.html

+119
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
<script>{
2+
"title": "Class Names",
3+
"excerpt": "A list of the class names used by jQuery UI to allow components to be themeable.",
4+
"termSlugs": {
5+
"category": [ "theming" ]
6+
}
7+
}</script>
8+
9+
<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>
10+
11+
<h3>Layout Helpers</h3>
12+
<ul>
13+
<li>
14+
<code>.ui-helper-hidden</code>: Hides content visually and from assistive technologies, such as screen readers.
15+
</li>
16+
<li>
17+
<code>.ui-helper-hidden-accessible</code>: Hides content visually, but leaves it available to assistive technologies.
18+
</li>
19+
<li>
20+
<code>.ui-helper-reset</code>: A basic style reset for DOM nodes. Resets padding, margins, text-decoration, list-style, etc.
21+
</li>
22+
<li>
23+
<code>.ui-helper-clearfix</code>: Applies float wrapping properties to parent elements.
24+
</li>
25+
<li>
26+
<code>.ui-front</code>: Applies z-index to manage the stacking of multiple widgets on the screen.
27+
</li>
28+
</ul>
29+
30+
<h3>Widget Containers</h3>
31+
<ul>
32+
<li>
33+
<code>.ui-widget</code>: Class to be applied to the outer container of all widgets. Applies font-family and font size to widgets.
34+
</li>
35+
<li>
36+
<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.
37+
</li>
38+
<li>
39+
<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).
40+
</li>
41+
</ul>
42+
43+
<h3>Interaction States</h3>
44+
<ul>
45+
<li>
46+
<code>.ui-state-default</code>: Class to be applied to clickable button-like elements. Applies "clickable default" container styles to an element and its child text, links, and icons.
47+
</li>
48+
<li>
49+
<code>.ui-state-hover</code>: 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.
50+
</li>
51+
<li>
52+
<code>.ui-state-focus</code>: Class to be applied on keyboard focus to clickable button-like elements. Applies "clickable focus" container styles to an element and its child text, links, and icons.
53+
</li>
54+
<li>
55+
<code>.ui-state-active</code>: 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.
56+
</li>
57+
</ul>
58+
59+
<h3>Interaction Cues</h3>
60+
<ul>
61+
<li>
62+
<code>.ui-state-highlight</code>: Class to be applied to highlighted or selected elements. Applies "highlight" container styles to an element and its child text, links, and icons.
63+
</li>
64+
<li>
65+
<code>.ui-state-error</code>: Class to be applied to error messaging container elements. Applies "error" container styles to an element and its child text, links, and icons.
66+
</li>
67+
<li>
68+
<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.
69+
</li>
70+
<li>
71+
<code>.ui-state-disabled</code>: Applies a dimmed opacity to disabled UI elements. Meant to be added in addition to an already-styled element.
72+
</li>
73+
<li>
74+
<code>.ui-priority-primary</code>: Class to be applied to a priority-1 button in situations where button hierarchy is needed.
75+
</li>
76+
<li>
77+
<code>.ui-priority-secondary</code>: Class to be applied to a priority-2 button in situations where button hierarchy is needed.
78+
</li>
79+
</ul>
80+
81+
<h3>Icons</h3>
82+
83+
<h4>States and images</h4>
84+
<ul>
85+
<li>
86+
<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 "content" 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>'s icon color.
87+
</li>
88+
</ul>
89+
90+
<h4>Icon types</h4>
91+
92+
<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>
93+
94+
<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>
95+
96+
<h3>Misc Visuals</h3>
97+
98+
<h4>Corner Radius helpers</h4>
99+
<ul>
100+
<li><code>.ui-corner-tl</code>: Applies corner-radius to top left corner of element.</li>
101+
<li><code>.ui-corner-tr</code>: Applies corner-radius to top right corner of element.</li>
102+
<li><code>.ui-corner-bl</code>: Applies corner-radius to bottom left corner of element.</li>
103+
<li><code>.ui-corner-br</code>: Applies corner-radius to bottom right corner of element.</li>
104+
<li><code>.ui-corner-top</code>: Applies corner-radius to both top corners of element.</li>
105+
<li><code>.ui-corner-bottom</code>: Applies corner-radius to both bottom corners of element.</li>
106+
<li><code>.ui-corner-right</code>: Applies corner-radius to both right corners of element.</li>
107+
<li><code>.ui-corner-left</code>: Applies corner-radius to both left corners of element.</li>
108+
<li><code>.ui-corner-all</code>: Applies corner-radius to all 4 corners of element.</li>
109+
</ul>
110+
111+
<h4>Overlay &amp; Shadow</h4>
112+
<ul>
113+
<li>
114+
<code>.ui-widget-overlay</code>: Applies 100% width &amp; height dimensions to an overlay screen, along with background color/texture, and screen opacity.
115+
</li>
116+
<li>
117+
<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 "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).
118+
</li>
119+
</ul>

0 commit comments

Comments
 (0)