Wikimedia Foundation Design

The agora was a central spot in ancient Greek city-states. The literal meaning of the word is "gathering place" or "assembly". The agora was the center of athletic, artistic, spiritual and political life of the city.

This document serves as a style and design specification guideline for Wikimedia Foundation projects. It is not a style guide for the MediaWiki software. This document aims to provide designers a rulebook for color usage, design patterns, and general styles.

In addition, the goals of the Agora project include:

• Development of an easy-to-use toolkit (like Bootstrap, but for MediaWiki)
• Development of a specialized and unique icon set

This document is by no means exhaustive, and should be considered a "permanent" work in progress.

Documentation

• Design Principles
• Design Process
• Style
  • Size and layout
  • Color Usage
  • Typography
  • Iconography
  • Spacing and Indentation (Whitespace)
  • Writing style
• Patterns and components
• Suggested Redesigns
• How to Give Design Feedback

Code, status

Agora buttons in a vertical form

Agora adds skin-agnostic CSS styles to MediaWiki, The CSS defines various mw-ui-* classes including

• mw-ui-button with many variations, such as 'mw-ui-button mw-ui-primary mw-ui-big' for a large button that will appear in blue in the Vector skin.
• mw-ui-vform for a container with a vertical "stacked" layout
  • divs, labels and input fields in this are styled consistently
• checkboxes and radio buttons within labels with class mw-ui-checkbox-label align better
• several utility classes such as mw-ui-flush-left

The CSS varies with the user's skin. Users with the Vector skin, which is the default for new users on WMF wikis, see:

• colored buttons (blue for mw-ui-primary, green for mw-ui-constructive, red for mw-ui-destructive)
• for some page elements a font stack of "Helvetica Neue", "Helvetica", "Arial", sans-serif.

Note that many browsers and operating systems recognize "Helvetica" and will substitute a close match, often open source. Users can override this font by creating a vector.css subpage of their user page with override CSS.

The CSS will be available in core MediaWiki in release 1.22 in the mediawiki.ui module;. You can use context->getOutput()->addModuleStyles( 'mediawiki.ui' ) to ensure the CSS is loaded.

The CSS is also available in the Agora extension, together with a test subdirectory with some static HTML pages illustrating its use, for earlier MediaWiki versions.

We generate the CSS styles from Sass .sccs files using Compass, see the resources/mediawiki.ui/sourcefiles subdirectory. You don't need Compass to use the CSS.

More details are in Agora/Engineering. All hail Munaf Assaf, and Trevor Parscal, and others who contributed!

April 2013

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. It's opt-in for now, e.g. http://www.mediawiki.org/wiki/Special:UserLogin?useNew=1

gerrit change 57823 builds on this to convert the Create account form to a vertical form layout, also opt-in, e.g. http://www.mediawiki.org/wiki/Special:UserLogin?type=signup?useNew=1

People

This document is a product of the design team at the Wikimedia Foundation:

• Brandon Harris
• Vibha Bamba
• Munaf Assaf
• Pau Giner