Design/Archive/Wikimedia Foundation Design
 | This page is obsolete. It is being retained for archival purposes. It may document extensions or features that are obsolete and/or no longer supported. Do not rely on the information here being up-to-date. |
 | This page is outdated. |
This page served as a style and design specification guideline for Wikimedia Foundation projects around 2013-2014. It aimed to provide designers a rulebook for color usage, design patterns, and general styles.
At the time the design was named "Agora".
In addition, the goals of the Agora project included:
- Develop MediaWiki UI, an easy-to-use UI and behavior toolkit (like Bootstrap, but for MediaWiki).
- Develop Wikifont, a specialized and unique icon set delivered as a font.
This work continues in the MediaWiki theme of the OOUI advanced toolkit project and the general Wikicons icon set.
This document is by no means exhaustive.
Documentation
[edit]- Design Principles
- Design Process
- Agora/Mediawiki.ui library elements and their behavior , see also earlier Patterns and components
- Style
- Size and layout
- Color usage
- Typography
- Iconography
- Whitespace (spacing and indentation)
- Writing style
- Suggested redesigns
- How to give design feedback
- Project status and roadmap a @ Foundation User Experience Trello board
Core engineering work
[edit]See /status for status updates, also see UX standardization
See MediaWiki.ui Trello board for status of individual controls.
Agora / Mediawiki.ui styles
[edit]Explore the Agora styles in the MediaWiki desktop living style guide.
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-constructive mw-ui-big' for a large green button for the completed action of a form such as "Submit", and 'mw-ui-button mw-ui-destructive mw-ui-quiet' for a less obvious button that appears red on hover and click for a destructive action such as "Cancel".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
mw-ui-checkbox-labelalign better - several utility classes such as
mw-ui-flush-left
The CSS is available in core MediaWiki beginning with release 1.22 in the mediawiki.ui module; in 1.23 the button styles are separated into a mediawiki.ui.button CSS module.
You can use context->getOutput()->addModuleStyles( 'mediawiki.ui' ) to ensure the CSS is loaded. If you only need the buttons, add only the mediawiki.ui.button module.
(AddModuleStyles because you want the CSS loaded even if JavaScript isn't running.)
There may be a JavaScript Agora module, load that separately.
The CSS styles are written in the LESS stylesheet language and the ResourceLoader generates minified CSS from them on-the-fly.
Now we need UX standardization
Typography refresh
[edit]The Typography refresh updates the Vector skin to to use a san-serif for most text, and serif fonts for headings.
People
[edit]This document is a product of the Design team at the Wikimedia Foundation