## Background
Our current web-based products do not feature a shared baseline grid and responsive layout system. Every Wikimedia team has to solely rely on their experience and judgement. There have been some [early design explorations](https://www.mediawiki.org/wiki/Requests_for_comment/Grid_system) lead by @Pginer-WMF to address this task and in-product [context-specific implementations](https://github.com/wikimedia/mediawiki-extensions-ContentTranslation/blob/master/app/src/lib/mediawiki.ui/components/MWLayout/grid.scss) too but we didn't manage to consolidate, establish and document a shared practice around grids and layouts.
Most recently the [Readers Web Team](https://www.mediawiki.org/wiki/Readers/Web/Team) has been leading the #desktop_improvements initiative where they have been exploring also different layout options and potential grid solutions.
In late November 2021, the Pattern Lab team gathered a [first collection of requirements](https://www.figma.com/file/eDdknkq3N6464hIvz1nOVh/Baseline-Grid-Jam-Session?node-id=0%3A1) that we surveyed during a Design Review meeting. The session resulted in a set of shared priorities and follow up conversations that we conducted in the following weeks with @RHo, @Pginer-WMF, @alexhollender, and @KieranMcCann for specific grid-related topics.
The following content outlines the baseline grid requirements necessary to extensively support the design team and the features and products that they build.
## User stories
### Scenario: designing a component
1. As a designer, I want to learn about of a shared **baseline grid** for our products, so that I can use it and apply it to the new components and layouts I design.
2. As a designer, I want to understand how to **space** elements inside a component, so that I can set the padding, the dimensions and alignments following the same rules applied to existing components.
3. As a designer, I want to set the **aspect ratio** of photos, pictures, and illustrations, so that I can craft assets and layouts that are consistent across features and products.
### Scenario: designing a layout
1. As a designer, I want to have access to a **sizing scale**, so that I can space, distance and layout components consistently with the rest of the product experience.
2. 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.
3. As a designer, I want to layout elements within a page accordingly to existing **screen regions**, so that end-user will find familiar content in familiar location hence lowering the cognitive load when they one a new page.
4. As a designer, I want to understand how to expose information through different **panels**, so that I can reorganize the hierarchy of content when there isn't enough real estate available.
5. As a designer, I want to visually align element along the edge of a vertical **keyline**, so that I can place elements outside of the layout grid.
6. As a designer, I want to space content following an established **vertical rhythm**, so that I can learn how to leverage white space to convey hierarchy and reading order.
## Conditions of Satisfaction
- Overview presentation during a Design Practice & Systems Meetup.
- The Wikimedia Design Style Guide features a new page detailing the baseline grid specs and recommendations.
- Showcase examples of how the grid is applied to common components, eg. lists.
- Guides on how to adopt the baseline grid incrementally in design and product.
- The base unit and the sizing scale are specified as design tokens.
- The baseline grid specifications are available as (hidden) layout grids in every component featured in the "WikimediaUI – Components Library" Figma file.
## Testing Instructions
- Test the grid on the atomic level components, eg. buttons.
- Test the grid on common patterns, eg. lists.
- Test the grid to define the layout of the entire site, eg. Wikipedia main page.
- Test the grid on the 3 most common page layouts: panel, no panel, full.
- Test the grid to layout the interior content of pages, eg. article page.
- Test the grid to retro fits current layouts, eg. newcomer homepage.
- Test the grid on small devices and viewports, eg. m.wikipedia.org.
## Done
-
-
-