Design/Archive/UX standardization


 * 69 Shades of Grey...

Specification
See notes on Living Style Guide below…
 * The styles used in Flow are currently the most up-to-date per the design team (code, demo)
 * Wikimedia Foundation Design - largely outdated
 * Wikimedia Foundation Design/Agora Control Library lists desired controls

Existing libraries / conventions

 * Agora styles in the mediawiki.ui core module
 * used by Special:Login, Special:CreateAccount, Special:PasswordChange 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
 * Ooui (VisualEditor)
 * Vector
 * Design audit has screenshots

What we are converging on

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

To Do

 * Implement Agora CSS in
 * Make mediawiki.ui a flavor/theme of Ooui
 * 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 Ooui toolkit
 * Use Agora CSS in mobile
 * 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 Ooui JavaScript
 * swap CSS (see http://pauginer.github.io/agora/ )
 * server-side form examples (in Special:Agora page in https://gerrit.wikimedia.org/r/93525)

OOUI to dos

 * Split into separate repo
 * Documentation (intro and reference)
 * Sample code
 * Get requirements from other teams
 * Clients outside VE team.
 * RfC