Wikimedia Foundation Design

From MediaWiki.org
Jump to: navigation, search

This style guide is outdated. Current styles can be seen at https://tools.wmflabs.org/styleguide/.

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:

  • 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, and should be considered a "permanent" work in progress.

Documentation[edit | edit source]

Core engineering work[edit | edit source]

See /status for status updates, also see UX standardization

See MediaWiki.ui Trello board for status of individual controls.

Agora / Mediawiki.ui styles[edit | edit source]

Explore the Agora styles in the MediaWiki desktop living style guide.

mediawiki.ui input fields, checkbox, and button in a vertical form

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-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-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 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 | edit source]

The Typography refresh updates the Vector skin to to use a san-serif for most text, and serif fonts for headings.

People[edit | edit source]

This document is a product of the Design team at the Wikimedia Foundation

Subpages of Wikimedia Foundation Design[edit | edit source]

Agora Control Library Agora Control Library/Behavior Agora icon set
Color usage How to give design feedback Login
Login/Engineering Patterns and components Principles
Process Suggested redesigns Typography
Typography/Audit Whitespace Writing style
status