CSS API Selectors
Last modified by Vincent Massol on 2024/02/26 17:55
Description
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