- Title of session (the more detailed, the better!): An introduction to Codex: the design system for Wikimedia.
- Session description: The Wikimedia Foundation has been investing in our first ever design system, which we are calling Codex. In this session, we’ll provide an introduction to Codex and show you how you can get started with its Vue.js library of components to build user interfaces for your projects during this hackathon and beyond.
- Username for contact: @Catrope, @bmartinezcalvo
- Session duration (25 or 50 min): 25 min
- Session type (presentation, workshop, discussion, etc.): presentation
- Language of session (English, Arabic, etc.): English
- Prerequisites (some Python, etc.): To understand the presentation, none. If you want to write code with Codex, you'll need basic knowledge of JavaScript
- Any other details to share?:
- @Catrope and @bmartinezcalvo will be available during the entire hackathon if you have any questions about Codex or need help using it.
- Reach @Catrope at roan@wikimedia.org, on Telegram, or on IRC (RoanKattouw)
- Reach @bmartinezcalvo at bmartinezcalvo@wikimedia.org
- Etherpad Link
- Slides
- Resources:
- @Catrope and @bmartinezcalvo will be available during the entire hackathon if you have any questions about Codex or need help using it.
- Interested? Add your username below:
Description
Description
Related Objects
Related Objects
Event Timeline
Comment Actions
Below you may find the link attached that redirects the user to the corresponding Etherpad: https://etherpad.wikimedia.org/p/whm2023-An_introduction_to_Codex
Comment Actions
Session Notes:
An introduction to Codex: the design system for Wikimedia
Date & time: Friday, May 19th at 14:30 pm EEST / 11:30 am UTC
Relevant links
- Phabricator task: https://phabricator.wikimedia.org/T333611
- Codex documentation site: https://doc.wikimedia.org/codex/latest
- Codex Figma: https://www.figma.com/file/KoDuJMadWBXtsOtzGS4134/%E2%9D%96-Codex-components
- Codex in MediaWiki: https://www.mediawiki.org/wiki/Codex
- Example extension using Codex: https://gitlab.wikimedia.org/repos/design-systems/CodexExample/
- Example non-MW tool using Codex: https://gitlab.wikimedia.org/repos/design-systems/codex-starter-template
- Slides: https://docs.google.com/presentation/d/1eoMrsOi1vitObHRkR3ZO5RuAPNYQBtquEIb1hfl8iO8/edit#slide=id.g23e4b7f11b0_0_1162
Participants
Presenters
Roan Kattouw
Bàrbara Martinez
Notes
Check the slide deck at tinyurl.com/codex23
What is a design system? A collection of resuable parts that can be used on different systems
Benefits of using systems:
Reduce frustration, design faster, focus on complex problems (since the simpler ones will have been solved), allows for greater scalability and flexibility (adaptable to different languages and platforms), reduces the load on the user (only have to learn a single system once)
Codex is the new design system for Wikipedia, intended to replace other design systems and libraries.
Managed by the Design Systems Team
Elements of Codex:
Design tokens: use different colors for different meanings (e.g. red for desctructive actions, different shade of red for hover) Assets (icons) - same library as used before Components - building blocks for user interactions, like buttons, dialogs, etc.
Codex is available in design (figma) and in code
Figma libraries: Design tokens library, Assets library (icons, illustrations, logos), codex component library
How designers work with figma: enable the tokens & assets libraries in their projects; drag and drop components from menu and resize/tweak as necessary
How to use codex in your code
codex is build with vue.js
https://doc.wikimedia.org/codex/latest/
different usage in media wiki and outside of it (documentation needs improvement here)
components are extensively documented with code examples
Using CSS only components (non-interactive)
possible for some components but not all; check documentation
Use codex for: client side UI, server side user interfaces, all of your styles
Do not use it for: hybrid server/client-side interaces, things that appear on every page view, but you can use design tokens for these things -- and you should! The goal is to develop a consistent visual standard and ultimately depreciate other icons/styles/design systems
Discussion
Using codex in mediawiki is not possible now?
It just looks differently, not everything can be used. (Code examples in the Codex documentation may include TypeScript and other things that can't be used in a MediaWiki context; what's important to note is that code cannot simply be copy/pasted.) There is a documentation on how to do things in mediawiki, will be added to the main documentation later.
Not include the library everywhere?
Yes, because it is slow to load, when included in too many places
Possible future hackathon project: develop a way to convert older components & generate HTML