Design/Archive/UX standardization

Specifications

 * A living style guide to document styles in use
 * The Flow software as of August 2014 is the most up-to-date user of the new styles, try it.
 * Wikimedia Foundation Design/Agora Control Library lists desired controls and annotates button styles
 * File:Agora specs.pdf is an outdated but more comprehensive visual spec


 * Design work items are tracked in the "mediawiki-ui" Trello board, including an "Audit" column for standardization.

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, Flow, 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 widget framework used by VisualEditor
 * Vector
 * Design audit has screenshots

What we are converging on

 * OOUI for rich JavaScript and 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 OOUI


 * Use the "Agora" design in the mediawiki.ui CSS in core and extensions
 * by applying  CSS styles
 * does this for many buttons in core
 * HTMLForm in core could apply  styles by default (currently it only does it if you choose the   stacked vertical displayFormat). This was in patch set 14 of gerrit 62169
 * by rewriting buttons to use OOUI toolkit, once that has a mediawiki.ui flavor/theme.
 * Use mediawiki.ui CSS in mobile
 * Implement Agora design in VE by completing mediawiki.ui flavor/theme
 * Identify existing and required Control/UI elements
 * Highest priority is a usable Agora dialog (vs. woeful inconsistency).
 * 2014-02-12_Flow_flyout.png Next is Agora flyouts.
 * Develop live style guide:
 * ✅ auto-generate CSS examples using KSS
 * see Jon Robson auto-gen every CSS style
 * 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)
 * Add useful descriptions to the class comments for each Widget class in OO.ui - i.e. what sort of UI element does this build?

OOUI to dos

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

UX standardization status by extension
See also Icon standardisation for use of icons by extensions.