Design/Living style guide
This page is obsolete. It is being retained for archival purposes. It may document extensions or features that are obsolete and/or no longer supported. Do not rely on the information here being up-to-date. See Codex, the design system for Wikimedia instead. |
A living style guide offers improved documentation of the visual appearance and behaviour of a site.
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's style guide can be found at https://design.wikimedia.org/style-guide/
Its source code is located in wikimedia/WikimediaUI-StyleGuide at GitHub.
When you use OOUI components within MediaWiki, they use its WikimediaUI theme which has its roots in mediawiki.UI.
Implementation
editOOUI library live demos
editThis OOUI library features a live demo environment with all JS & PHP components and their JavaScript code snippets.
See also
edit- Tasks and bug reports in Wikimedia Phabricator
- Historical discussions to move to one single Design style guide: task T151117