Page MenuHomePhabricator

Grid: Introduce a WIP Grid component
Closed, ResolvedPublic

Description

Background

Grid is an important piece of Wikimedia's design system. Codex will provide the Grid styles for MediaWiki.

Design specs

Open questions

  1. CSS/Less only? Less public mixin to start with? Or Vue implementation?

@Volker_E 2025-03-19: It seems reasonable to rely on a mixin (or in an extended version for a CSS-only version) for simple, low opinionated application of the Grid.
@Volker_E 2025-06-11: Additionally we can add a CSS-only version in future, when settled on Less mixin approach.

  1. CX in its Grid implementation featured one-twelths boxes

@Volker_E 2025-03-19: I see this as overboardening necessities in our environment with possible Grid usage currently identified. Keep it simple and stupid. And therefore less divider start Grid boxes.

  1. Grid template areas – part of Codex or part of skin architecture?

@Volker_E 2025-06-11: From my current point of view, skinning architecture longevity experience it seems more useful to integrate template areas – with central MW.org's skin documentation – into Vector skin (and possibly Example skin) instead of Codex itself.

Acceptance criteria for done

  • Revisit the current design Grid proposal
  • Implement Grid in Codex

Event Timeline

Change 922375 had a related patch set uploaded (by VolkerE; author: VolkerE):

[design/codex@main] build: Add `grid` properties to 'properties-order'

https://gerrit.wikimedia.org/r/922375

Change 922377 had a related patch set uploaded (by VolkerE; author: VolkerE):

[design/codex@main] build: Add `gap` to 'declaration-strict-value'

https://gerrit.wikimedia.org/r/922377

Change 922375 merged by jenkins-bot:

[design/codex@main] build, styles: Add `grid` properties to 'properties-order'

https://gerrit.wikimedia.org/r/922375

Change 922377 merged by jenkins-bot:

[design/codex@main] build: Add `gap` to 'declaration-strict-value'

https://gerrit.wikimedia.org/r/922377

Change 927786 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[mediawiki/core@master] Update Codex from v0.11.0 to v0.12.0

https://gerrit.wikimedia.org/r/927786

Test wiki created on Patch demo by ATomasevich (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/8ca78d2715/w

Change 927786 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v0.11.0 to v0.12.0

https://gerrit.wikimedia.org/r/927786

Test wiki on Patch demo by ATomasevich (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/8ca78d2715/w/

Change #1128998 had a related patch set uploaded (by VolkerE; author: VolkerE):

[design/codex@main] styles: Add responsive Grid layout system with mixins

https://gerrit.wikimedia.org/r/1128998

CCiufo-WMF renamed this task from Implement Grid in Codex to Grid: Introduce a WIP Grid component.Jun 2 2025, 5:29 PM
CCiufo-WMF triaged this task as Medium priority.
CCiufo-WMF moved this task from Backlog to Upcoming on the Codex board.
CCiufo-WMF added a subscriber: lwatson.

Change #1128998 merged by jenkins-bot:

[design/codex@main] styles: Add WIP responsive Grid layout system with Less mixins

https://gerrit.wikimedia.org/r/1128998

Change #1171718 had a related patch set uploaded (by Catrope; author: Catrope):

[mediawiki/core@master] Update Codex from v2.2.0 to v2.2.1

https://gerrit.wikimedia.org/r/1171718

Change #1171718 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v2.2.0 to v2.2.1

https://gerrit.wikimedia.org/r/1171718