User:Fram/Sandbox
Code, status
right|frame|Agora buttons in a vertical form Agora adds skin-agnostic CSS styles to MediaWiki, The CSS defines various mw-ui-* classes including
mw-ui-button
with many variations, such as 'mw-ui-button mw-ui-primary mw-ui-big' for a large button that will appear in blue in the Vector skin.
mw-ui-vform
for a container with a vertical "stacked" layout- divs, labels and input fields in this are styled consistently
- checkboxes and radio buttons within labels with class
mw-ui-checkbox-label
align better - several utility classes such as
mw-ui-flush-left
The CSS varies with the user's skin. Users with the Vector skin, which is the default for new users on WMF wikis, see:
- colored buttons (blue for mw-ui-primary, green for mw-ui-constructive, red for mw-ui-destructive)
for some page elements a font stack of "Helvetica Neue", "Helvetica", "Arial", sans-serif(the Beta Features change to the Vector skin implements the font change)
Note that many browsers and operating systems recognize "Helvetica" and will substitute a close match, often open source. Users can override this font by creating a vector.css subpage of their user page with [CSS].
The CSS is available in core MediaWiki in release 1.22 in the [[1]] module;.
You can use context->getOutput()->addModuleStyles( 'mediawiki.ui' )
to ensure the CSS is loaded.
(AddModuleStyles because you want the CSS loaded even if JavaScript isn't running.)
There may be a JavaScript Agora module, load that separately.
The CSS is also available in the [extension], together with a test subdirectory with some static HTML pages illustrating its use, for earlier MediaWiki versions.
We generate the CSS styles from Sass .sccs
files using Compass, see the [The agora was a central spot in ancient Greek city-states. The literal mean resources/mediawiki.ui/sourcefiles] subdirectory.
You don't need Compass to use the CSS.
bug 54485 is to convert the module to use LESS instead of Sass.
More details are in [[2]].