CSS API Selectors

Last modified by Vincent Massol on 2024/02/26 17:55

 XWiki
 Implementation
 Completed

Description

This page is a work in progress. Thank you!

Public vs non public CSS classes

  • what class must absolutely exist and also to ensure we don't use non public classes in document content or in templates (non skin templates);
  • The private (internal) vs API (public) list of classes would allow to separate CSS classes in 2 categories :
    • the ones with an agreed behavior that all skins must define, and that application (extensions, etc.) developers can rely on. (like we do with hidden, buttonswrapper, clearfloats, etc.) -> those are APIs
    • the ones that are used to "make the skin work" and for which we allow ourselves to change their behavior, remove them, not define them in all skins, etc. -> those are private, and the extension developers must not rely on them.

 Questions 

  •  Structure on id, class? displayed alphabetical 
  •  Structure on general, layout, panels, etc?  
  •  Structure on which classes are used by which skins: colibri, toucan, all ?  
  •  We introduce all classes and ids generated by the templates or used in the actual skins? 

CSS ID

  • #rightPanels, #leftPanels, #editPanels (panels, layout)
  • #xwikimaincontainer (layout)
  • #xwikimaincontainerinner (layout)
  • #headerglobal (layout)
  • #actionmenu (layout, menu)
  • #contentcontainer (layout)
  • #contentcontainerinner (layout)
  • #contentcolumn (layout)
  • #mainContentArea (layout) - introduces for Colibri
  • #xwikicontent (layout)
  • #footerglobal (layout)

CSS Classes

  • .clearfloats (general)
  • .hidden (general)
  • .invisible (general)
  • .loading (general) WYSWYG, GWT 
  • .separator (general) actionMenu, breadcrumbs, tags, document-info
  • .itemCount (general) docExtraTabs, archive panel, document-info
  • .active (general) panel li, 
  • .padded 
  • .button (buttons)
  • .buttonwrapper (buttons)
  • .panel (panels)
  • .xwikipaneltitle, .collapsed .xwikipaneltitle (panels)
  • .xwikipanelcontents, .collapsed .xwikipanelcontents (panels)
  • .hideleft, .hideright, .hidelefthideright (layout)
  • .leftsidecolumns (layout)
  • .main (layout)
  • .content (layout)
  • .alleditcontent (layout)
  • .rightmenu, .leftmenu (menu)
  • .topmenuentry (menu)
  • .submenu (menu)
  • .editinfo (menu)

Not Used

  • #body
  • .viewbody, .editbody
  • .layoutsection
  • .headerspace
  • .content

 

Tags:
    

Get Connected