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:

• A. General classes
• B. Classes used for Form elements
  • B1. Buttons containers
  • B2. Behavior classnames
• Classes for the responsiveness
• Further References
• Special CSS Classes

A. General classes

• .hidden  
    use to 'display: none' elements

• .invisible  
    use to 'visibility: hidden' elements

• .clearfloats  
    use to clear floats when using floated containers, in order to keep the parent's layout correct

• .separator
    use to contain separators ( · , | )
    used in #document-info and blog .entry-footer

• .itemCount
    use to contain numeric values that describe quantitative information about an item
    used in #docExtraTabs, #document-info, .blog-category-level
    example: Comments (1)

• .noitems
    use to contain empty state messages
    used in #docextrapanes
    example: 'No comments for this document', 'No attachments for this document'

• .icon
    use for icon buttons (example)
    used in .icon.rss in 'Quick Links' panel

• .hasIcon
    use for elements that also have a background-icon attached (example)
    works in pair with other classes that specify the icon that will be used (ex: .iconRSS, .tmEdit, .etc)
    used in menus

• .loading
    sets an animated GIF as being the background image (center aligned) of the element
    generally used on Ajax requests in order to express the loading status
    example of usage: on loading each of the Annotations, Comments, Attachments, History and Informations tabs

• .column + (.full | .half | .third)
    classes for generic (1|2|3) column layout 

B. Classes used for Form elements

B1. Buttons containers

• .buttonwrapper
    use as an external container for buttons (required for Toucan skin)

• .buttonwrapper .button
    use .button on input or a elements to display as buttons

• .secondary.button
    use for secondary actions, like cancel

• .icon-button
  • .icon-button.add-button
  • .icon-button.remove-button
      use for small icon actions, like add and remove (example)

• .button.disabled
    use to display a button in it's disabled state

B2. Behavior classnames

• .withTip
    introduced in XWIKI-4163
    description: automatically hides and reinserts the default text for input fields, acting as a tip.
    warning: will be replaced by the placeholder attribute introduced in HTML5

• .useTitleAsTip
    introduced in 5.1 Milestone 1
    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.
    warning: will be replaced by the placeholder attribute introduced in HTML5

• .suggestDocuments
    introduced in XWIKI-5301
    description: all input fields with classname suggestDocuments will receive an autocomplete control suggesting document names.

• .suggestSpaces
    introduced in XWIKI-5657 (XWiki 2.6 RC2)
    description: all input fields with classname suggestSpaces will receive an autocomplete control suggesting space names.

• .suggestUsers
    introduced in XWIKI-5649 (XWiki 2.6 RC2)
   Warningdeprecated since XWiki 10.6RC1, use suggest-users instead
    description: all input fields with classname suggestUsers will receive an autocomplete control suggesting document names of documents that contains user objects

• .suggestGroups
    introduced in XWIKI-5649 (XWiki 2.6 RC2)
   Warningdeprecated since XWiki 10.6RC1, use suggest-groups instead
    description: all input fields with classname suggestGroups will receive an autocomplete control suggesting document names of documents that contains group objects

• .suggested
    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).

• .maximizable
    introduced in XWIKI-5660 (XWiki 2.6 RC2) description: offers a link for users to maximize the element on which this classname is applied,
    making it possible to view that element in fullscreen mode.
   WarningNeeds to be used together with a skinx call to the uicomponents/widgets/fullScreen.js script

Classes for the responsiveness

With Flamingo, you can use Bootstrap classes plus some XWiki specific classes:

• .responsive-table
    introduced in 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.
    Example:
   <table class="responsive-table">
     <thead>
       <tr>
         <th>Name</th>
         <th>Age</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td data-title="Name">John Smith</td>
         <td data-title="Age">42</td>
       </tr>
     </tbody>
   </table>

Further References

• XWiki's structure is defined in templates that generate specific layout classes (.main, #mainContentArea, etc)
  • XWiki CSS Layout (outdated)
• XWiki provides by default a list of Skins, each with its own characteristics
  • XWiki Albatross CSS Files (deprecated)

Special CSS Classes

• When writing CSS code for XWiki there are some code style rules that need to be followed in order to assure consistency and quality.