Codex

Appearance

About Codex ​

Codex is the design system for Wikimedia. Codex contains:

Codex features:

  • Wide-ranging support for internationalization and global usage
  • Web accessibility baked in
  • Comprehensive browser and device support

Read our guiding principles for details.

Usage and contributions ​

Visit usage to learn how to use this library.

If you'd like to contribute, head over to the contributing section to learn about ways you can contribute, our processes, and how to develop this library.

Maintainers ​

Codex is maintained by the Design System Team of the Wikimedia Foundation. It is designed and developed by contributors from the Wikimedia Foundation, Wikimedia Deutschland, and the Wikimedia volunteer community.

Contact us ​

To contact us or to learn more about current and future work, visit our task tracking board and file a task or add a thread on Codex's Talk page on mediawiki.org. See also the how to stay up-to-date section.

Guiding principles ​

Who we're serving ​

Set high accessibility, internationalization, and browser/device coverage standards ​

Wikimedia intends to serve everyone. We will follow Wikimedia's accessibility principles and aim to support many languages.

Codex follows MediaWiki's browser support matrix. Codex supports the subset of the “Modern” support list, with the difference being that only ES6-compatible browsers are supported. This excludes Internet Explorer 11 and Safari 9 and 10.

Components should be thoughtfully designed and developed to work across device widths.

Designed and built for the wider MediaWiki ecosystem ​

We intend to serve those working both within MediaWiki (core, skins, and extensions) and in the wider ecosystem, including web-based tools, static web applications, Jamstack applications, and some of our mobile apps. Platform-agnosticism will enable us to use this library as we continue expanding this ecosystem.

To keep our code flexible, we will aim to avoid entirely MediaWiki-specific components. When they can't be avoided, we will clearly denote and separate out the MediaWiki-specific parts.

Prioritize developer experience of library users ​

We want to make building user interfaces straightforward, fast, and enjoyable. We aim to serve users of varying experience levels and to reduce barriers to onboarding new users. When possible, we will prefer to house complexity in the library code rather than exposing it to the library user.

Collaboration principles ​

Transparency ​

We work in the open and aim to provide consumers as much information as possible about what we're working on and how we're prioritizing that work.

Enable rather than enforce ​

The Codex maintainers welcome contributions from everyone and wish to collaboratively build resources to enable others to easily contribute to the library.

Knowledge sharing rather than knowledge silos ​

Contributors should have support and access to resources that allow them to understand and influence the system's workflows, methodologies, standards, and infrastructure.

Code design patterns ​

Composition over complexity ​

Smaller components are easier to understand and more reusable.

Clarity over brevity ​

It's better for code to be easily understandable than to be as short or as clever as possible.

Use existing patterns ​

Sticking to patterns established in the wider front-end community enables more people to contribute. Following consistent patterns within the library makes the code easier to write, review, and maintain.

Keep the template simple ​

The template within single file Vue components (SFCs) can be a tool to clearly illustrate what a component is and does. Consider moving everything but the most basic JavaScript code to the <script>.