Wiki source code of Special CSS Classes
Version 13.1 by Lucas Charpentier (Sereza7) on 2024/01/16
Hide last authors
| author | version | line-number | content |
|---|---|---|---|
 |
4.3 | 1 | XWiki has some special classes that are used in certain conditions to assure consistency and enhance functionality. The following classes are defined at least starting with [[the Colibri Skin>>extensions:Extension.Colibri Skin]]: |
 |
1.1 | 2 | |
| |
4.2 | 3 | {{toc/}} |
| |
1.1 | 4 | |
 |
7.2 | 5 | = A. General classes = |
| |
1.1 | 6 | |
| 7 | * **##.hidden##** | ||
| 8 | use to 'display: none' elements | ||
| 9 | |||
 |
13.1 | 10 | * **##.sr-only##** |
| 11 | use to hide elements visually but keep them visible semantically {{footnote}}https://dev.xwiki.org/xwiki/bin/view/Community/CodeStyle/XhtmlCssCodeStyle/Properly%20hiding%20elements/{{/footnote}} | ||
| 12 | |||
| |
1.1 | 13 | * **##.invisible##** |
| 14 | use to 'visibility: hidden' elements | ||
| 15 | |||
| 16 | * **##.clearfloats##** | ||
| 17 | use to clear floats when using floated containers, in order to keep the parent's layout correct | ||
| 18 | |||
| 19 | * **##.separator##** | ||
| 20 | use to contain separators ( {{html}}·{{/html}} , | ) | ||
| 21 | used in #document-info and blog .entry-footer | ||
| 22 | |||
| 23 | * **##.itemCount##** | ||
| 24 | use to contain numeric values that describe quantitative information about an item | ||
| 25 | used in #docExtraTabs, #document-info, .blog-category-level | ||
| 26 | example: Comments (1) | ||
| 27 | |||
| |
4.2 | 28 | * **##.noitems##** |
| 29 | use to contain empty state messages | ||
| 30 | used in #docextrapanes | ||
| 31 | example: 'No comments for this document', 'No attachments for this document' | ||
| 32 | |||
| |
1.1 | 33 | * **##.icon##** |
 |
12.2 | 34 | use for icon buttons ([[example>>xwiki:Documentation.DevGuide.FrontendResources.StandardIconClasses||anchor="iconClass"]]) |
| |
1.1 | 35 | used in .icon.rss in 'Quick Links' panel |
| 36 | |||
| |
3.1 | 37 | * **##.hasIcon##** |
| |
12.2 | 38 | use for elements that also have a background-icon attached ([[example>>xwiki:Documentation.DevGuide.FrontendResources.StandardIconClasses||anchor="hasIconClass"]]) |
| |
3.1 | 39 | works in pair with other classes that specify the icon that will be used (ex: .iconRSS, .tmEdit, .etc) |
| 40 | used in menus | ||
| 41 | |||
| |
1.1 | 42 | * **##.loading##** |
| 43 | sets an animated GIF as being the background image (center aligned) of the element | ||
| 44 | generally used on Ajax requests in order to express the loading status | ||
| 45 | example of usage: on loading each of the Annotations, Comments, Attachments, History and Informations tabs | ||
| 46 | |||
| 47 | * **##.column##** + (**##.full##** | **##.half##** | **##.third##**) | ||
| 48 | classes for generic (1|2|3) column layout | ||
| 49 | |||
| |
7.2 | 50 | = B. Classes used for Form elements = |
| |
1.1 | 51 | |
| |
7.2 | 52 | == B1. Buttons containers == |
| |
1.1 | 53 | |
| 54 | * **##.buttonwrapper##** | ||
| 55 | use as an external container for buttons (required for Toucan skin) | ||
| 56 | |||
| 57 | * **##.buttonwrapper .button##** | ||
| |
4.1 | 58 | use ##.button## on ##input## or ##a## elements to display as buttons |
| |
1.1 | 59 | |
| |
2.1 | 60 | * **##.secondary.button##** |
| 61 | use for secondary actions, like ##cancel## | ||
| 62 | |||
| |
4.1 | 63 | * **##.icon-button##** |
| 64 | ** **##.icon-button.add-button##** | ||
| 65 | ** **##.icon-button.remove-button##** | ||
| |
12.2 | 66 | use for small icon actions, like ##add## and ##remove## ([[example>>xwiki:Documentation.DevGuide.FrontendResources.StandardIconClasses||anchor="iconButtonClass"]]) |
| |
4.1 | 67 | |
| |
3.1 | 68 | * **##.button.disabled##** |
| 69 | use to display a button in it's disabled state | ||
| 70 | |||
| |
7.2 | 71 | == B2. Behavior classnames == |
| |
13.1 | 72 | * **##.drawer-opener##** |
| 73 | {{version since="XWiki 15.10"}} Used with a proper value of `aria-controls`, allows to trigger the opening of a drawer element. [[Details on creating a drawer>>xwiki:Documentation.DevGuide.FrontendResources.Drawer]] {{/version}} | ||
| |
1.1 | 74 | |
| 75 | * **##.withTip##** | ||
 |
11.1 | 76 | introduced in [[XWIKI-4163>>https://jira.xwiki.org/browse/XWIKI-4163]] |
| |
1.1 | 77 | description: automatically hides and reinserts the default text for input fields, acting as a tip. |
 |
8.1 | 78 | warning: will be replaced by the ##placeholder## attribute introduced in HTML5 |
| |
1.1 | 79 | |
| |
8.1 | 80 | * **##.useTitleAsTip##** |
| 81 | introduced in 5.1 Milestone 1 | ||
| 82 | description: when ##.withTip## is applied, use the value of the title attribute as the tip (i.e. the text displayed in the text input when it's empty); this is useful when the initial value of the text input is different than the tip (place-holder), e.g. a search input might have as initial value the submitted search query, but you still want to display a tip when the user clears the query. | ||
| 83 | warning: will be replaced by the ##placeholder## attribute introduced in HTML5 | ||
| 84 | |||
| |
1.1 | 85 | * **##.suggestDocuments##** |
| |
11.1 | 86 | introduced in [[XWIKI-5301>>https://jira.xwiki.org/browse/XWIKI-5301]] |
| |
1.1 | 87 | description: all input fields with classname suggestDocuments will receive an autocomplete control suggesting document names. |
| 88 | |||
| 89 | * **##.suggestSpaces##** | ||
| |
11.1 | 90 | introduced in [[XWIKI-5657>>https://jira.xwiki.org/browse/XWIKI-5657]] (XWiki 2.6 RC2) |
| |
1.1 | 91 | description: all input fields with classname suggestSpaces will receive an autocomplete control suggesting space names. |
| 92 | |||
| |
12.1 | 93 | * --**##.suggestUsers##**-- |
| |
11.1 | 94 | introduced in [[XWIKI-5649>>https://jira.xwiki.org/browse/XWIKI-5649]] (XWiki 2.6 RC2) |
| |
12.1 | 95 | {{warning}}deprecated since XWiki 10.6RC1, use ##suggest-users## instead{{/warning}} |
| |
7.2 | 96 | description: all input fields with classname suggestUsers will receive an autocomplete control suggesting document names of documents that contains user objects |
| |
1.1 | 97 | |
| |
12.1 | 98 | * --**##.suggestGroups##**-- |
| |
7.2 | 99 | introduced in [[XWIKI-5649>>ttp://jira.xwiki.org/browse/XWIKI-5649]] (XWiki 2.6 RC2) |
| |
12.1 | 100 | {{warning}}deprecated since XWiki 10.6RC1, use ##suggest-groups## instead{{/warning}} |
| |
7.2 | 101 | description: all input fields with classname suggestGroups will receive an autocomplete control suggesting document names of documents that contains group objects |
| |
1.1 | 102 | |
| 103 | * **##.suggested##** | ||
| |
7.2 | 104 | description: blocks normal browser autocomplete and initializes the suggest object early instead of waiting for the field to be focused (if the suggests is declared on focus). |
| |
1.1 | 105 | |
| 106 | * **##.maximizable##** | ||
| |
11.1 | 107 | introduced in [[XWIKI-5660>>https://jira.xwiki.org/browse/XWIKI-5660]] (XWiki 2.6 RC2) description: offers a link for users to maximize the element on which this classname is applied, |
| |
7.2 | 108 | making it possible to view that element in fullscreen mode. |
| 109 | {{warning}}Needs to be used together with a skinx call to the ##uicomponents/widgets/fullScreen.js## script{{/warning}} | ||
| |
1.1 | 110 | |
 |
9.1 | 111 | = Classes for the responsiveness = |
| |
10.1 | 112 | |
| |
9.1 | 113 | With [[Flamingo>>extensions:Extension.Flamingo Skin]], you can use [[Bootstrap classes>>http://getbootstrap.com/]] plus some XWiki specific classes: |
| 114 | |||
| 115 | * **##.responsive-table##** | ||
| |
11.1 | 116 | introduced in [[XWIKI-11576>>https://jira.xwiki.org/browse/XWIKI-11576]] (XWiki 6.4M2 & 6.2.5) description: make a table responsible to the screen-size. To use it, just add the ".responsive-table" class to you table, be sure you have proper <thead> and <tbody> tags in it, and put the title of the each column in the "data-title" attribute of every cell. |
| |
10.1 | 117 | Example:((( |
| |
9.1 | 118 | {{code language="html"}} |
| 119 | <table class="responsive-table"> | ||
| 120 | <thead> | ||
| 121 | <tr> | ||
| 122 | <th>Name</th> | ||
| 123 | <th>Age</th> | ||
| 124 | </tr> | ||
| 125 | </thead> | ||
| 126 | <tbody> | ||
| 127 | <tr> | ||
| 128 | <td data-title="Name">John Smith</td> | ||
| 129 | <td data-title="Age">42</td> | ||
| 130 | </tr> | ||
| 131 | </tbody> | ||
| 132 | </table> | ||
| 133 | {{/code}} | ||
| 134 | ))) | ||
| 135 | |||
| |
7.2 | 136 | = Further References = |
| |
1.1 | 137 | |
| 138 | * XWiki's structure is defined in templates that generate specific layout classes (.main, #mainContentArea, etc) | ||
| |
12.2 | 139 | ** [[XWiki CSS Layout>>xwiki:Documentation.DevGuide.Tutorials.Skins.CSSLayout]] //(outdated)// |
| 140 | * XWiki provides by default a [[list of Skins>>xwiki:Documentation.UserGuide.Features.Skins]], each with its own characteristics | ||
| 141 | ** [[XWiki Albatross CSS Files>>xwiki:Documentation.DevGuide.Tutorials.Skins.CSS files]] //(deprecated)// | ||
| |
1.1 | 142 | |
| |
7.2 | 143 | = Special CSS Classes = |
| 144 | |||
| 145 | * When writing CSS code for XWiki there are some [[code style rules>>dev:Community.XhtmlCssCodeStyle]] that need to be followed in order to assure consistency and quality. |
