This hands-on session introduces participants to the Wikimedia Design System (Codex) through practical tasks. Participants will build common UI components (banners, sidebars, error pages, etc.) using theme-aware tokens and accessible patterns.
Tasks for WMA-Hackathon-2025
Curated tasks (assigned Phabricator tickets):
- T390270: [Design] Create a file upload preview section (e.g., for images or documents)
- T390271: [Design]: Design a friendly welcome message at the top of a page.
- T390272: [Design]: Design a collapsible section for editing parts of an article
- T390277: [Design] Build a "Related Articles" sidebar.
- T390278: [Design] Replicate a simple discussion thread between users.
- T390279: [Design] Design a 404 error page for missing wiki content.
- T390280: [Design] Create a small stats panel (e.g., "2,000 views this month").
- T390281: [Design] Replicate Wikipedia’s inline “Citation Needed” marker.
- T390282: Design a bar showing available article languages (e.g., "Français", "中文").
- T390283: [Design] Create a visual progress bar for article completeness.
- T390461: Design an image gallery grid
- T390463: Create a mobile search bar
- T390465: Design a user contribution timeline
- T390467: Design a simple category tags
- T390468: Create an "Edit Summary" Modal
- T390471: Design a Language Switcher Dropdown
- T390472: Design a Simple Navigation Menu
- T390478: Build a User Profile Card
- T390484: Create an Infobox
- T390488: Design a Footer
- T390495: Create a "You are here" navigation path
- T390494: Create a mock bar chart for article stats (e.g., "Monthly Views").
- T390498: Design a banner urging users to support Wikimedia
- T390500: Create a spelling correction prompt (e.g., "Showing results for cats").
- T390462: Create a table comparing two topics (e.g., "Dogs vs. Cats").
- T390483: Design a "Rate this article" section.
- T390493: Design the Homepage for Actor Collaboration Analyzer
- T390507: Design a slideshow of images from a wiki article.
Session Details
- Design 101: Introduction to Wikimedia Design (Codex)
- Facilitator: Joris Darlington Quarshie
- Focus: UI/UX design using Wikimedia’s Codex components, theme-aware styling, and accessibility best practices.
Additional Notes
- Design System Reference: Codex Documentation
- Testing: Verify components in both light/dark modes (e.g., @background-color-destructive-subtle).