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[edit | edit source]
- design Principles
- design Process
- Patterns and components
- Suggested redesigns
- How to give design feedback
Code, status[edit | edit source]
Agora adds skin-agnostic CSS styles to MediaWiki, The CSS defines various mw-ui-* classes including
mw-ui-buttonwith 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-vformfor 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
- several utility classes such as
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(the Beta Features change to the Vector skin implements the font change)
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 is available in core MediaWiki in release 1.22 in the mediawiki.ui module;. You can use context
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. bug 54485 is to convert the module to use LESS instead of Sass.
More details are in Agora/Engineering.
November 2013[edit | edit source]
- UX standardization effort begun; more than just the CSS, also using the Ooui toolkit.
- Vector skin typography improvements will be available as a BetaFeatures preference.
October 2013[edit | edit source]
- 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.
September 2013[edit | edit source]
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
- also update MobileFrontend to use it
- eventual goal to generate desktop and mobile CSS from same LESS files.
- 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).
July 2013[edit | edit source]
Prototyping extensions to Agora design
- Agora-style checkboxes (Gerrit change 74662).
- Pau Giner designs with revised button colors and underscore on hover.
- Flow prototype with revised buttons and bar for input focus rather than glow.
June 2013[edit | edit source]
Began Design audit, categorizing screenshots that show UX elements and/or UI inconsistencies.
May 2013[edit | edit source]
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.
April 2013[edit | edit source]
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. Special:UserLogin?useNew=1
People[edit | edit source]
This document is a product of the design team at the Wikimedia Foundation: