Wikimedia is a global movement built by a diverse audience.

This guide provides a general design direction that can be useful for different kinds of interactive projects. Designers and developers will find design recommendations to solve general problems, so that they can focus on the specific needs of their projects.

This is an ongoing work, you can always check online the latest released version of the guide. You can help making it grow.

How to contribute

You can participate in many ways. The documentation is available in a Git repository with the design assets needed for your project. You can get all of them, change anything and send the changes back.

Getting the design repository

The WikimediaUI Style Guide repository is available to download. It contains this documentation, templates and further design resources. Select the “clone or download” button to get the repository.

Committing changes

If you have Git installed on your system, cloning is preferred way to get the contents since it allows you to contribute back. Technically changes can be submitted as usual in Git.

In order to publish the updated contents to be available live, go to the repo and launch the following command from a terminal: git push -f origin master:gh-pages

Please add specific topics into a single commit and also take into account the Wikimedia commit message guidelines.

Changes beyond content

With the above instructions you can easily modify the content of the guidelines by adding new recommendations, making corrections or adding examples in the form of images or videos. Furthermore, you can also help improving how this documentation looks and works.

When modifying aspects such as the CSS styling you'll need to rebuild the documentation files using Grunt (which requires Node.js and npm). The first time you have to run npm install in a terminal from the guideline main folder in order to get all the needed dependencies. Every time you want to rebuild the CSS files for the documentation you just need to launch the grunt command in a terminal, also from the main folder.
We're using stylelint to ensure the CSS aligns with our coding conventions.

These are requirements to provide our contributors a reliable environment and our viewers a performant experience.