Codex
Codex is the design system for Wikimedia. The Codex repository contains four packages:
Codex features:
- Wide-ranging support for internationalization and global usage
- Web accessibility compliant (Web Content Accessibility Guidelines 2.1 level AA)
- Comprehensive browser and device support
Quick start
Usage
To install:
npm install
--
save
-
dev
@wikimedia
/
codex
@wikimedia
/
codex
-
icons
To use components:
import
{
CdxButton
,
CdxTextInput
}
from
'@wikimedia/codex'
;
To use icons:
import
{
cdxIconAlert
,
cdxIconNewWindow
}
from
'@wikimedia/codex-icons'
;
For more information on how to set up and use the library, see the
usage documentation
.
Development
Codex development requires the following:
- Node:
the required version is pinned in
.nvmrc
. To install and use the required version of Node, run
nvm install "$(<.nvmrc)"
then
nvm use
in the root of the repository.
- npm:
version 7 or higher is required to support workspaces; it is not included by default in older versions of Node (prior to version 15) and will need to be upgraded manually. You can do this with nvm via
nvm install --latest-npm
.
Helpful commands:
npm install
in the root of the repository to install requirements for all workspaces
npm run doc:dev
to start the docs site
npm run dev
to start the Vite sandbox
npm run test:unit -w @wikimedia/codex
to run unit tests for e.g. the codex workspace.
Read more about testing.
See the
contributing code
guidelines for more information.
Contributing
If you'd like to contribute, head over to the
contributing docs
to learn about our processes and ways you can contribute.
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.
To contact us or to learn more about current and future work, visit our
workboard
or the
Design System Team page
on mediawiki.org.