Wikimedia Foundation Design
||IMPORTANT: The content of this page is outdated. Yet more historical design documentation. See Living style guide, Frontend standards group, and the UI-Standardization workboard. If you have checked or updated this page and found the content to be suitable, please remove this notice.|
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 document is by no means exhaustive.
- Design Principles
- Design Process
- Agora/Mediawiki.ui library elements and their behavior , see also earlier Patterns and components
- Suggested redesigns
- How to give design feedback
- Project status and roadmap a @ Foundation User Experience Trello board
Core engineering work
See MediaWiki.ui Trello board for status of individual controls.
Agora / Mediawiki.ui styles
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
- several utility classes such as
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
Now we need UX standardization
The Typography refresh updates the Vector skin to to use a san-serif for most text, and serif fonts for headings.
This document is a product of the Design team at the Wikimedia Foundation