Design/Living style guide

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

CURRENT

• https://wikimedia.github.io/WikimediaUI-Style-Guide/ (source code: wikimedia/WikimediaUI-StyleGuide at Github)

OUTDATED

• http://tools.wmflabs.org/styleguide/desktop/ for the mediawiki.UI modules in core since release 1.22
• https://livingstyleguide.wmflabs.org for the OOjs UI component library, typography, colors and iconography.

Starting with release 1.25, when you use OOjs UI components within MediaWiki, they use its WikimediaUI theme which has its roots in mediawiki.UI.

Implementation

OOjs UI library live demos

This OOjs UI library features a live demo environment with all JS & PHP components and their JavaScript code snippets.

See also

• Tasks and bug reports in Wikimedia Phabricator

Notes

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