Design/Living style guide

< Design(Redirected from Style guide)
Jump to: navigation, search
shortcut: LSG

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.[1][2] 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.

MediaWiki currently has two style guides

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.

Implementation[edit | edit source]

OOjs UI style guide[edit | edit source]

Under active development, subject to change

This style guide runs on MediaWiki and uses the OOUIPlayground extension to turn descriptions of OOjs UI components in wiki pages into PHP and JavaScript code snippets, and to invoke the actual components. The extension will eventually also add the ability to simulate accessibility issues and mobile views on desktop. The guide uses Blueprint, a simple purpose built skin for highlighting the available component library without distraction.

Apart from a per component documentation the guide will also have guidelines on typography, iconography and how to compose the elements together.

mediawiki.UI style guide[edit | edit source]

A Makefile in core builds a static styleguide from the contents of files in resources/src/mediawiki.ui using kss-node. The generated HTML is published to . (Continuous integration should rebuild this styleguide as needed at, phab:T58620.)

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

See also[edit | edit source]

Notes[edit | edit source]