Design/Archive/Wikimedia Foundation Design/status

2013-03 monthly edit

Agora adds mw-ui-vform that triggers vertical (block, width:100%) layout for its contents; the core forms also use a mw-ui-content area and have selectors within that to turn off Vector's h2 underline, remove Vector's border on forms, etc.

2013-04 monthly edit

Gerrit change 55847 put the Agora CSS into core MediaWiki in resources/mediawiki.ui starting with release 1.22wmf2. It also changes the Login form to use Agora mw-ui-buttons and mw-ui-vform to produce a vertical form layout. Gerrit change 57823 builds on this to convert the Create account form to a vertical form layout, also opt-in, e.g. Special:UserLogin?type=signup&useNew=1

2013-05 monthly edit

The Echo, Getting Started, and Guided Tour extensions use Agora styles.

Gerrit change 65346 adds a 'vform' display format to HTMLForm, a form framework used by many Special pages and extensions.

2013-06 monthly edit

Began Design audit, categorizing screenshots that show UX elements and/or UI inconsistencies.

2013-07 monthly edit

Prototyping extensions to Agora design

2013-09 monthly edit

Work progresses on new Agora design spec (see draft) incorporating the revised buttons and input focus from the Flow prototype, and more. This will involve

  • bug 54360 to implement this in mediawiki.ui
  • also update MobileFrontend to use it
  • eventual goal to generate desktop and mobile CSS from same LESS files.

Other work

  • Typography and left-hand nav changes in Vector skin (Gerrit change 79948)
  • Decision to use LESS rather than Compass/sass to generate CSS. The ResourceLoader can generate CSS from LESS source files on the fly (bug 40964).

2013-10 monthly edit

  • Tweaks to Agora colors and buttons (e.g. slimmer button option) in Flow (user-to-user discussions), see Flow Portal/Design/Iteration 5.
  • Add "vform" style to HTMLForm for compact vertically-stacked forms using Agora styles.

2013-11 monthly edit

  • UX standardization effort begun; more than just the CSS, also using the OOjs UI toolkit.
  • Vector skin typography improvements are available as a Beta features preference.
  • mediawiki.ui module converted from Sass to LESS, and the CSS is generated on-the-fly by ResourceLoader. (This change is in MediaWiki 1.23.)

2013-12 monthly edit

  • The Flow collaboration and discussion system, using the newest "bottom bevel" UX design, is live on Talk:Sandbox and a few other pages.
  • The Agora button styles in core are available as a smaller CSS module, mediawiki.ui.button]
  • Mobile team is using KSS to auto-generate CSS documentation with rendered HTML samples, see living style guide

2014-01 monthly edit

  • Updated "beveled bottom" button styles merged to core, adding new mw-ui-progressive, mw-ui-destructive, mw-ui-quiet styles.