Page MenuHomePhabricator

Define a responsive column grid system
Open, In Progress, MediumPublic

Description

Background

Starting from the EPIC T90687: Define a baseline grid and support a responsive grid system this subtask wants to scale, consolidate and share the existing work that @alexhollender and @KieranMcCann have been leading around a responsive column grid.

User story

As a designer, I want to align components to a responsive column grid, so that I can define how elements move across different viewports. In order to achieve this I need to know how the grid changes across breakpoints, which are those breakpoints, what are the outer margins of this grid, and which gutters are set between columns.

Acceptance criteria (or Done)

Design

  • Create grids for all our breakpoints with the following specifications:
    • Number of columns
    • Max content width
    • Margins
    • Gutters
  • Test new grids in the 3 most common page layouts: panel, no panel, full
  • Test grid in skins (New Vector, Vector Legacy and Minerva)
  • The responsive column grid is available as a layout grid in our Figma library
  • The Wikimedia Design Style Guide features a new page detailing the responsive column grid specs and recommendations.

Code

  • Implement grids in Codex

DS Implementation inspirations elsewhere

Event Timeline

STHart triaged this task as High priority.Sat, Apr 30, 6:08 PM
STHart lowered the priority of this task from High to Medium.Mon, May 2, 1:48 PM
STHart moved this task from Up Next to Design-Systems-Sprint on the Design-Systems-Team board.
bmartinezcalvo changed the task status from Open to In Progress.Fri, May 13, 3:52 PM
bmartinezcalvo added subscribers: AnneT, Volker_E, Catrope.

Based on this first proposal from @KieranMcCann on grids and layouts, I've been exploring the different possibilities to create our new grids and apply them in our current breakpoints. We will review the possibility of updating the breakpoints, but the proposal is aimed at the breakpoints currently defined in T303522

Grids specifications

XL (2000px and more)
12 columns
Max content width: 1376px
Margins: they scale
Gutters 24px

L (1200px to 1999px)
12 columns
Max content width 1392px
Margins: 24px to max content width then they scale
Gutters 24px

M (1000px to 1199px)
12 columns
Margins – 32px
Gutters – 24px

S (720px to 999px)
8 columns
Margins – 24px
Gutters – 24px

XS (320px to 719px)
4 columns
Margins – 16px
Gutters – 16px

Grids.png (5×2 px, 181 KB)

We will have 12 columns for screens from 1000px and more, 8 columns for screens between 720-999px and 4 columns for screens between 320-719px.

I propose to have 1376px for max content width will be 1376px. This max content width was defined based on 1440px screens so the max width will match with the grid width on 1440px screens. Although 1440px is not one of our breakpoints, it's the screen with which we should design on desktop since it corresponds to the most used on laptops.

1440px.png (800×1 px, 10 KB)

Layouts

Regarding layouts, this is the proposal with the grid applied to the most important layouts:

  • Left panel
  • No panel
  • Full width

I've also tested the new grids and layouts in different pages of our current products as well as with different languages to check if the new grid and layouts would work with our current products.


Questions to solve
  • I assume that these new grids will be applied only to new projects developed with Codex. Or do we want these grids to be applied to projects created with OOUI too?
  • Likewise, I assume that these grids will be applied only by New Vector skin.
  • Would it possible to update our current breakpoints T303522 to reduce the number of breakpoints? Currently M and L are quite similar so we could merge them and have one only size from 1000-1999px.
  • How will the grids be implemented and what would be the technical specifications to move forward with the task?

@Catrope @AnneT @Volker_E

@bmartinezcalvo @KieranMcCann here is a more detailed version of the 4 layouts I've been working with for desktop web. you can play around with various screen sizes in this prototype: https://di-collapsible-menus.web.app/Brown_bear (in order to get to layout 2, open the Tools menu and click "move to sidebar").

image.png (7×3 px, 573 KB)