Design/Living style guide

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

A living style guide offers improved documentation of the visual appearance and behavior 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 currently has one style guide (the other 2 are outdated, see task T51117 and task T51117#2808532):


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[edit]

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 simulates visual disabilities like Protanopia and Monochromacy, using SVG filters. Plans include the ability to simulate other accessibility issues and mobile views on desktop. The guide uses Blueprint, a simple purpose-built skin that highlights the component library without distraction.

In addition to per-component documentation, the guide will also have guidelines on typography, iconography, and how to compose elements.

mediawiki.UI style guide[edit]

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:T60620)

The downside of being standalone is you can't see how how styles behave with different skins and Beta features enabled.

See also[edit]


Coding conventionsManual:Coding conventions
General All languagesManual:Coding conventions#Code structure · Development policyDevelopment policy · Security for developersSecurity for developers · Pre-commit checklistManual:Pre-commit checklist · Performance guidelinesPerformance guidelines(draft) · Style guideDesign/Living style guide · Accessibility guide for developersAccessibility guide for developers(draft)
PHP Code conventionsManual:Coding conventions/PHP · PHPUnit test conventionsManual:PHP unit testing/Writing unit tests#Test_conventions · Security checklist for developersSecurity checklist for developers
JavaScript Code conventionsManual:Coding conventions/JavaScript · Learning JavaScriptLearning JavaScript
CSS Code conventionsManual:Coding conventions/CSS
Database Code conventionsManual:Coding conventions/Database · Database policyDevelopment policy#Database policy
Python Code conventionsManual:Coding conventions/Python
Ruby Code conventionsManual:Coding conventions/Ruby
Selenium/Cucumber Code conventionsManual:Coding conventions/Selenium
Java Code conventionsManual:Coding conventions/Java
API client code Standards for API client librariesAPI:Client code/Gold standard