User:TheDJ/sandbox

Code, status

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 override CSS.

The CSS is available in core MediaWiki in release 1.22 in the mediawiki.ui 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 Agora 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 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 Agora/Engineering.