From 1236d936222c9d30a432ad8e5d3ca99e4d8f9399 Mon Sep 17 00:00:00 2001 From: TJ VanToll Date: Sat, 11 May 2013 16:47:07 -0400 Subject: [PATCH 1/6] Porting CSS class name docs from the old site and placing it in a new theming category. Fixes #59: Document CSS --- categories.xml | 5 ++ entries/classNames.xml | 117 +++++++++++++++++++++++++++++++++++++++++ 2 files changed, 122 insertions(+) create mode 100644 entries/classNames.xml diff --git a/categories.xml b/categories.xml index 0ee8c8f4..f615ff86 100644 --- a/categories.xml +++ b/categories.xml @@ -37,5 +37,10 @@

Functionality provided by jquery.ui.effect.js. In addition to the methods listed below, jquery.ui.effect.js also includes several easings.

]]> + + + diff --git a/entries/classNames.xml b/entries/classNames.xml new file mode 100644 index 00000000..07e3f1e9 --- /dev/null +++ b/entries/classNames.xml @@ -0,0 +1,117 @@ + + + Class Names + The following CSS class names used by jQuery UI are designed to achieve visual consistency across an application and allow components to be themeable by jQuery UI ThemeRoller. 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. + +

Layout Helpers

+
    +
  • + .ui-helper-hidden: Applies display: none to elements. +
    • +
  • + .ui-helper-hidden-accessible: Applies accessible hiding to elements (via absolute positioning off the page). +
    • +
  • + .ui-helper-reset: A basic style reset for UI elements. Resets things such as padding, margins, text-decoration, list-style, etc. +
    • +
  • + .ui-helper-clearfix: Applies float wrapping properties to parent elements. +
    • +
  • + .ui-helper-zfix: Applies iframe "fix" css to iframe elements when needed in overlays. +
    • +
+ +

Widget Containers

+
    +
  • + .ui-widget: Class to be applied on outer container of all widgets. Applies font family and font size to widget. Also applies same family and 1em font size to child form elements, specifically to combat inheritance issues in Windows browsers. +
    • +
  • + .ui-widget-header: Class to be applied to header containers. Applies header container styles to an element and its child text, links, and icons. +
    • +
  • + .ui-widget-content: 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). +
    • +
+ +

Interaction States

+
    +
  • + .ui-state-default: Class to be applied to clickable button-like elements. Applies "clickable default" container styles to an element and its child text, links, and icons. +
    • +
  • + .ui-state-hover: 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. +
    • +
  • + .ui-state-focus: Class to be applied on keyboard focus to clickable button-like elements. Applies "clickable hover" container styles to an element and its child text, links, and icons. +
    • +
  • + .ui-state-active: 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. +
    • +
+ +

Interaction Cues

+
    +
  • + .ui-state-highlight: Class to be applied to highlighted or selected elements. Applies "highlight" container styles to an element and its child text, links, and icons. +
    • +
  • + .ui-state-error: Class to be applied to error messaging container elements. Applies "error" container styles to an element and its child text, links, and icons. +
    • +
  • + .ui-state-error-text: 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. +
    • +
  • + .ui-state-disabled: Applies a dimmed opacity to disabled UI elements. Meant to be added in addition to an already-styled element. +
    • +
  • + .ui-priority-primary: Class to be applied to a priority-1 button in situations where button hierarchy is needed. Applies bold text. +
    • +
  • + .ui-priority-secondary: Class to be applied to a priority-2 button in situations where button hierarchy is needed. Applies normal weight text and slight transparency to element. +
    • +
+ +

Icons

+ +

States and images

+
    +
  • + .ui-icon: Base class to be applied to an icon element. Sets dimensions to 16px square block, hides inner text, sets background image to "content" state sprite image. Note: ui-icon class will be given a different sprite background image depending on its parent container. For example, a ui-icon element within a ui-state-default container will get colored according to the ui-state-default's icon color. +
    • +
+ +

Icon types

+ +

After declaring a ui-icon class, you can follow up with a second class describing the type of icon you'd like. Icon classes generally follow a syntax of .ui-icon-{icon type}-{icon sub description}-{direction}.

+ +

For example, a single triangle icon pointing to the right looks like this: .ui-icon-triangle-1-e. ThemeRoller provides the full set of CSS framework icons in its preview column. Hover over them to see the class name.

+ +

Misc Visuals

+ +

Corner Radius helpers

+
    +
  • .ui-corner-tl: Applies corner-radius to top left corner of element.
    • +
  • .ui-corner-tr: Applies corner-radius to top right corner of element.
    • +
  • .ui-corner-bl: Applies corner-radius to bottom left corner of element.
    • +
  • .ui-corner-br: Applies corner-radius to bottom right corner of element.
    • +
  • .ui-corner-top: Applies corner-radius to both top corners of element.
    • +
  • .ui-corner-bottom: Applies corner-radius to both bottom corners of element.
    • +
  • .ui-corner-right: Applies corner-radius to both right corners of element.
    • +
  • .ui-corner-left: Applies corner-radius to both left corners of element.
    • +
  • .ui-corner-all: Applies corner-radius to all 4 corners of element.
    • +
+ +

Overlay & Shadow

+
    +
  • + .ui-widget-overlay: Applies 100% width & height dimensions to an overlay screen, along with background color/texture, and screen opacity. +
    • +
  • + .ui-widget-shadow: 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). +
    • +
+ + + \ No newline at end of file From 2d468408517dc354e55b6b03c4ed4939da5a17f8 Mon Sep 17 00:00:00 2001 From: TJ VanToll Date: Mon, 13 May 2013 23:12:11 -0400 Subject: [PATCH 2/6] Moving file into pages folder. --- entries/classNames.xml => pages/classNames.html | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename entries/classNames.xml => pages/classNames.html (100%) diff --git a/entries/classNames.xml b/pages/classNames.html similarity index 100% rename from entries/classNames.xml rename to pages/classNames.html From 13eeb812ebb264c502d7abc0dbeb181ccb475e84 Mon Sep 17 00:00:00 2001 From: TJ VanToll Date: Mon, 13 May 2013 23:13:19 -0400 Subject: [PATCH 3/6] Switching formatting to HTML. --- pages/classNames.html | 208 +++++++++++++++++++++--------------------- 1 file changed, 102 insertions(+), 106 deletions(-) diff --git a/pages/classNames.html b/pages/classNames.html index 07e3f1e9..ef6aab2c 100644 --- a/pages/classNames.html +++ b/pages/classNames.html @@ -1,117 +1,113 @@ - - - Class Names - The following CSS class names used by jQuery UI are designed to achieve visual consistency across an application and allow components to be themeable by jQuery UI ThemeRoller. 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. - -

Layout Helpers

-
    -
  • - .ui-helper-hidden: Applies display: none to elements. -
    • -
  • - .ui-helper-hidden-accessible: Applies accessible hiding to elements (via absolute positioning off the page). -
    • -
  • - .ui-helper-reset: A basic style reset for UI elements. Resets things such as padding, margins, text-decoration, list-style, etc. -
    • -
  • - .ui-helper-clearfix: Applies float wrapping properties to parent elements. -
    • -
  • - .ui-helper-zfix: Applies iframe "fix" css to iframe elements when needed in overlays. -
    • -
+

The following CSS class names used by jQuery UI are designed to achieve visual consistency across an application and allow components to be themeable by jQuery UI ThemeRoller. 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.

-

Widget Containers

-
    -
  • - .ui-widget: Class to be applied on outer container of all widgets. Applies font family and font size to widget. Also applies same family and 1em font size to child form elements, specifically to combat inheritance issues in Windows browsers. -
    • -
  • - .ui-widget-header: Class to be applied to header containers. Applies header container styles to an element and its child text, links, and icons. -
    • -
  • - .ui-widget-content: 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). -
    • -
+

Layout Helpers

+
    +
  • + .ui-helper-hidden: Applies display: none to elements. +
    • +
  • + .ui-helper-hidden-accessible: Applies accessible hiding to elements (via absolute positioning off the page). +
    • +
  • + .ui-helper-reset: A basic style reset for UI elements. Resets things such as padding, margins, text-decoration, list-style, etc. +
    • +
  • + .ui-helper-clearfix: Applies float wrapping properties to parent elements. +
    • +
  • + .ui-helper-zfix: Applies iframe "fix" css to iframe elements when needed in overlays. +
    • +
-

Interaction States

-
    -
  • - .ui-state-default: Class to be applied to clickable button-like elements. Applies "clickable default" container styles to an element and its child text, links, and icons. -
    • -
  • - .ui-state-hover: 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. -
    • -
  • - .ui-state-focus: Class to be applied on keyboard focus to clickable button-like elements. Applies "clickable hover" container styles to an element and its child text, links, and icons. -
    • -
  • - .ui-state-active: 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. -
    • -
+

Widget Containers

+
    +
  • + .ui-widget: Class to be applied on outer container of all widgets. Applies font family and font size to widget. Also applies same family and 1em font size to child form elements, specifically to combat inheritance issues in Windows browsers. +
    • +
  • + .ui-widget-header: Class to be applied to header containers. Applies header container styles to an element and its child text, links, and icons. +
    • +
  • + .ui-widget-content: 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). +
    • +
-

Interaction Cues

-
    -
  • - .ui-state-highlight: Class to be applied to highlighted or selected elements. Applies "highlight" container styles to an element and its child text, links, and icons. -
    • -
  • - .ui-state-error: Class to be applied to error messaging container elements. Applies "error" container styles to an element and its child text, links, and icons. -
    • -
  • - .ui-state-error-text: 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. -
    • -
  • - .ui-state-disabled: Applies a dimmed opacity to disabled UI elements. Meant to be added in addition to an already-styled element. -
    • -
  • - .ui-priority-primary: Class to be applied to a priority-1 button in situations where button hierarchy is needed. Applies bold text. -
    • -
  • - .ui-priority-secondary: Class to be applied to a priority-2 button in situations where button hierarchy is needed. Applies normal weight text and slight transparency to element. -
    • -
+

Interaction States

+
    +
  • + .ui-state-default: Class to be applied to clickable button-like elements. Applies "clickable default" container styles to an element and its child text, links, and icons. +
    • +
  • + .ui-state-hover: 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. +
    • +
  • + .ui-state-focus: Class to be applied on keyboard focus to clickable button-like elements. Applies "clickable hover" container styles to an element and its child text, links, and icons. +
    • +
  • + .ui-state-active: 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. +
    • +
-

Icons

+

Interaction Cues

+
    +
  • + .ui-state-highlight: Class to be applied to highlighted or selected elements. Applies "highlight" container styles to an element and its child text, links, and icons. +
    • +
  • + .ui-state-error: Class to be applied to error messaging container elements. Applies "error" container styles to an element and its child text, links, and icons. +
    • +
  • + .ui-state-error-text: 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. +
    • +
  • + .ui-state-disabled: Applies a dimmed opacity to disabled UI elements. Meant to be added in addition to an already-styled element. +
    • +
  • + .ui-priority-primary: Class to be applied to a priority-1 button in situations where button hierarchy is needed. Applies bold text. +
    • +
  • + .ui-priority-secondary: Class to be applied to a priority-2 button in situations where button hierarchy is needed. Applies normal weight text and slight transparency to element. +
    • +
-

States and images

-
    -
  • - .ui-icon: Base class to be applied to an icon element. Sets dimensions to 16px square block, hides inner text, sets background image to "content" state sprite image. Note: ui-icon class will be given a different sprite background image depending on its parent container. For example, a ui-icon element within a ui-state-default container will get colored according to the ui-state-default's icon color. -
    • -
+

Icons

-

Icon types

+

States and images

+
    +
  • + .ui-icon: Base class to be applied to an icon element. Sets dimensions to 16px square block, hides inner text, sets background image to "content" state sprite image. Note: ui-icon class will be given a different sprite background image depending on its parent container. For example, a ui-icon element within a ui-state-default container will get colored according to the ui-state-default's icon color. +
    • +
-

After declaring a ui-icon class, you can follow up with a second class describing the type of icon you'd like. Icon classes generally follow a syntax of .ui-icon-{icon type}-{icon sub description}-{direction}.

+

Icon types

-

For example, a single triangle icon pointing to the right looks like this: .ui-icon-triangle-1-e. ThemeRoller provides the full set of CSS framework icons in its preview column. Hover over them to see the class name.

+

After declaring a ui-icon class, you can follow up with a second class describing the type of icon you'd like. Icon classes generally follow a syntax of .ui-icon-{icon type}-{icon sub description}-{direction}.

-

Misc Visuals

+

For example, a single triangle icon pointing to the right looks like this: .ui-icon-triangle-1-e. ThemeRoller provides the full set of CSS framework icons in its preview column. Hover over them to see the class name.

-

Corner Radius helpers

-
    -
  • .ui-corner-tl: Applies corner-radius to top left corner of element.
    • -
  • .ui-corner-tr: Applies corner-radius to top right corner of element.
    • -
  • .ui-corner-bl: Applies corner-radius to bottom left corner of element.
    • -
  • .ui-corner-br: Applies corner-radius to bottom right corner of element.
    • -
  • .ui-corner-top: Applies corner-radius to both top corners of element.
    • -
  • .ui-corner-bottom: Applies corner-radius to both bottom corners of element.
    • -
  • .ui-corner-right: Applies corner-radius to both right corners of element.
    • -
  • .ui-corner-left: Applies corner-radius to both left corners of element.
    • -
  • .ui-corner-all: Applies corner-radius to all 4 corners of element.
    • -
+

Misc Visuals

-

Overlay & Shadow

-
    -
  • - .ui-widget-overlay: Applies 100% width & height dimensions to an overlay screen, along with background color/texture, and screen opacity. -
    • -
  • - .ui-widget-shadow: 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). -
    • -
- - - \ No newline at end of file +

Corner Radius helpers

+
    +
  • .ui-corner-tl: Applies corner-radius to top left corner of element.
    • +
  • .ui-corner-tr: Applies corner-radius to top right corner of element.
    • +
  • .ui-corner-bl: Applies corner-radius to bottom left corner of element.
    • +
  • .ui-corner-br: Applies corner-radius to bottom right corner of element.
    • +
  • .ui-corner-top: Applies corner-radius to both top corners of element.
    • +
  • .ui-corner-bottom: Applies corner-radius to both bottom corners of element.
    • +
  • .ui-corner-right: Applies corner-radius to both right corners of element.
    • +
  • .ui-corner-left: Applies corner-radius to both left corners of element.
    • +
  • .ui-corner-all: Applies corner-radius to all 4 corners of element.
    • +
+ +

Overlay & Shadow

+
    +
  • + .ui-widget-overlay: Applies 100% width & height dimensions to an overlay screen, along with background color/texture, and screen opacity. +
    • +
  • + .ui-widget-shadow: 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). +
    • +
+ + \ No newline at end of file From bbb1e6da73a269471aa0463d9003adcf6db9ae51 Mon Sep 17 00:00:00 2001 From: TJ VanToll Date: Mon, 13 May 2013 23:13:42 -0400 Subject: [PATCH 4/6] Applying suggestions from review. --- pages/classNames.html | 25 +++++++++++++------------ 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/pages/classNames.html b/pages/classNames.html index ef6aab2c..4dbead0a 100644 --- a/pages/classNames.html +++ b/pages/classNames.html @@ -1,28 +1,29 @@ -

The following CSS class names used by jQuery UI are designed to achieve visual consistency across an application and allow components to be themeable by jQuery UI ThemeRoller. 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.

+ + +

The following is a list of the CSS class names used by jQuery UI. They are designed to achieve visual consistency across an application and allow components to be themeable by jQuery UI ThemeRoller. 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.

Layout Helpers

  • - .ui-helper-hidden: Applies display: none to elements. + .ui-helper-hidden: Hides content visually and from assistive technologies, such as screen readers.
  • - .ui-helper-hidden-accessible: Applies accessible hiding to elements (via absolute positioning off the page). + .ui-helper-hidden-accessible: Hides content visually, but leaves it available to assistive technologies.
  • - .ui-helper-reset: A basic style reset for UI elements. Resets things such as padding, margins, text-decoration, list-style, etc. + .ui-helper-reset: A basic style reset for DOM nodes. Resets padding, margins, text-decoration, list-style, etc.
  • .ui-helper-clearfix: Applies float wrapping properties to parent elements.
    • -
  • - .ui-helper-zfix: Applies iframe "fix" css to iframe elements when needed in overlays. -

Widget Containers

  • - .ui-widget: Class to be applied on outer container of all widgets. Applies font family and font size to widget. Also applies same family and 1em font size to child form elements, specifically to combat inheritance issues in Windows browsers. + .ui-widget: Class to be applied on outer container of all widgets. Applies font-family and font size to widgets.
  • .ui-widget-header: Class to be applied to header containers. Applies header container styles to an element and its child text, links, and icons. @@ -41,7 +42,7 @@

    Interaction States

    .ui-state-hover: 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.
  • - .ui-state-focus: Class to be applied on keyboard focus to clickable button-like elements. Applies "clickable hover" container styles to an element and its child text, links, and icons. + .ui-state-focus: 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.
  • .ui-state-active: 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. @@ -63,10 +64,10 @@

    Interaction Cues

    .ui-state-disabled: Applies a dimmed opacity to disabled UI elements. Meant to be added in addition to an already-styled element.
  • - .ui-priority-primary: Class to be applied to a priority-1 button in situations where button hierarchy is needed. Applies bold text. + .ui-priority-primary: Class to be applied to a priority-1 button in situations where button hierarchy is needed.
  • - .ui-priority-secondary: Class to be applied to a priority-2 button in situations where button hierarchy is needed. Applies normal weight text and slight transparency to element. + .ui-priority-secondary: Class to be applied to a priority-2 button in situations where button hierarchy is needed.
@@ -110,4 +111,4 @@

Overlay & Shadow

- \ No newline at end of file + From eeaddd6e1d9d0ff6d4125f83747f0ab70d61ff7e Mon Sep 17 00:00:00 2001 From: TJ VanToll Date: Mon, 13 May 2013 23:17:24 -0400 Subject: [PATCH 5/6] Adding .ui-front. --- pages/classNames.html | 3 +++ 1 file changed, 3 insertions(+) diff --git a/pages/classNames.html b/pages/classNames.html index 4dbead0a..2634ec1d 100644 --- a/pages/classNames.html +++ b/pages/classNames.html @@ -18,6 +18,9 @@

Layout Helpers

  • .ui-helper-clearfix: Applies float wrapping properties to parent elements.
    • +
  • + .ui-front: Applies z-index to manage the stacking of multiple widgets on the screen. +

    • Widget Containers

    From a62c6531e41a224fa3bb7dbbd850146d670661dc Mon Sep 17 00:00:00 2001 From: TJ VanToll Date: Tue, 14 May 2013 22:12:33 -0400 Subject: [PATCH 6/6] Properly set the category and some minor grammatical fixes. --- pages/classNames.html | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/pages/classNames.html b/pages/classNames.html index 2634ec1d..1ec7bb24 100644 --- a/pages/classNames.html +++ b/pages/classNames.html @@ -1,8 +1,12 @@ -

    The following is a list of the CSS class names used by jQuery UI. They are designed to achieve visual consistency across an application and allow components to be themeable by jQuery UI ThemeRoller. 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.

    +

    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 jQuery UI ThemeRoller. 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.

    Layout Helpers

      @@ -26,7 +30,7 @@

      Layout Helpers

      Widget Containers

      • - .ui-widget: Class to be applied on outer container of all widgets. Applies font-family and font size to widgets. + .ui-widget: Class to be applied to the outer container of all widgets. Applies font-family and font size to widgets.
      • .ui-widget-header: Class to be applied to header containers. Applies header container styles to an element and its child text, links, and icons. @@ -79,13 +83,13 @@

        Icons

        States and images

        • - .ui-icon: Base class to be applied to an icon element. Sets dimensions to 16px square block, hides inner text, sets background image to "content" state sprite image. Note: ui-icon class will be given a different sprite background image depending on its parent container. For example, a ui-icon element within a ui-state-default container will get colored according to the ui-state-default's icon color. + .ui-icon: 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: ui-icon class will be given a different sprite background image depending on its parent container. For example, a ui-icon element within a ui-state-default container will get colored according to the ui-state-default's icon color.

        Icon types

        -

        After declaring a ui-icon class, you can follow up with a second class describing the type of icon you'd like. Icon classes generally follow a syntax of .ui-icon-{icon type}-{icon sub description}-{direction}.

        +

        After declaring a ui-icon 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}.

        For example, a single triangle icon pointing to the right looks like this: .ui-icon-triangle-1-e. ThemeRoller provides the full set of CSS framework icons in its preview column. Hover over them to see the class name.

        @@ -113,5 +117,3 @@

        Overlay & Shadow

        .ui-widget-shadow: 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).
      - -