Design/Archive/UX standardization

We have a number of divergent UI libraries in use in MediaWiki core and extensions. This project, led by the Design team at the Wikimedia Foundation, is attempting to slowly but surely converge on a single, consistent look-and-feel for MediaWiki user interfaces.

Specifications



 * The styles used in Flow are currently the most up-to-date per the design team (image, code, try it)
 * Wikimedia Foundation Design/Agora Control Library lists desired controls and annotates button styles
 * File:Agora specs.pdf is an older but more comprehensive visual spec
 * A living style guide to document styles in use

Existing libraries / conventions

 * styles in the mediawiki.ui core module
 * used by Special:Login, Special:CreateAccount, Special:PasswordChange, and Special:Search in core
 * used by extensions Echo, GettingStarted, GuidedTour, OAuth, UploadWizard (campaigns only)
 * jQuery.ui used by AFT, PageTriage, TimedMediaHandler, UploadWizard, WikiBase, WikiLove, more...
 * backbone.js/Underscore.js (PageTriage) - JS MVC framework with template support
 * Mobile ui (MobileFrontend)
 * Hogan templates
 * OOjs UI (VisualEditor)
 * Vector
 * Design audit has screenshots

What we are converging on

 * OOjs UI for rich JavaScript and widgets
 * mediawiki.ui for CSS styles, and MediaWiki-specific widgets

To Do

 * Convert Mediawiki.ui to LESS
 * Implement Agora CSS in
 * Update inputs and textareas in mediawiki.ui to look like Flow's .mw-ui-input
 * Make mediawiki.ui a flavor/theme of OOJS UI
 * Use Agora CSS in core and extensions make a table of them?? or use a tracking bug with flags
 * by applying  CSS styles
 * does this for many buttons in core
 * by rewriting them to use OOjs UI toolkit
 * Use Agora CSS in mobile (https://gerrit.wikimedia.org/r/#/c/102581/)
 * Use Agora CSS in VE by using mediawiki.ui flavor/theme
 * Identify existing and required Control/UI elements
 * Develop live style guide:
 * auto-generate CSS examples (see https://github.com/kneath/kss) and Jon Robson CSS demo
 * show use of client-side OOjs UI JavaScript
 * swap CSS (see http://pauginer.github.io/agora/ )
 * server-side form examples (in Special:Agora page in https://gerrit.wikimedia.org/r/93525)
 * Add useful descriptions to the class comments for each Widget class in OO.ui - i.e. what sort of UI element does this build?

OOjs UI to dos

 * Split into separate repos
 * Split OO UI dialog into a separate component and apply Agora styling to it
 * ve-mw and mw-ui (?)
 * VE
 * oojs-ui
 * oojs
 * Documentation (intro and reference)
 * Sample code
 * Get requirements from other teams
 * Clients outside VE team.
 * RfC
 * Move this to core