Design/Living style guide

A living style guide is a tool for improved documentation of the visual appearance and behavior of a site. A living style guide is a piece of documentation, but unlike a static style guide (say, a wiki page or PDF), it is generated on-the-fly from the actual HTML, CSS, and JavaScript used in production. This allows us to view styles as they are live on the site, and inline comments can be added to document the purpose of a particular style or set of styles. There are a number of great tools already out there for generating a living style guide, but we currently are experimenting with KSS.

MediaWiki currently has two style guides
 * http://tools.wmflabs.org/styleguide/desktop/ for the mediawiki.UI modules in core since release 1.22
 * https://living-style-guide.wmflabs.org for the OOjs UI component library

Starting with release 1.25, when you use OOjs UI components within MediaWiki, they use its MediaWiki theme which is very similar to mediawiki.UI.

OOjs UI style guide

 * Under active development, subject to change

This uses an extension, OOUIPlayground, to turn descriptions of OOjs UI components in wiki pages into PHP and JavaScript code snippets, and actually invokes the components.

mediawiki.UI styleguide
A in core builds a static styleguide from the contents of files in  using kss-node. The generated HTML is published to http://tools.wmflabs.org/styleguide. (Continuous integration should rebuild this styleguide as needed at https://doc.wikimedia.org, T58620.)

The downside of being standalone is you can't see how how styles behave with different skins and Beta features enabled. built a styleguide in MediaWiki, viewable at Special:StyleGuide