== Goal
Clarify what our breakpoints should be and document them as Codex tokens
Historically, most of the breakpoint groundwork was done in #MobileFrontend and #minervaneue.
=== Current breakpoints definitions in Codex:
**Defined in 'codex-base.json', status 2022-03-31**
**A capable mobile device** considered minimum available screen width.
Many older feature phones that were already able to browse the web have screens smaller than this value. As they weren't considered smartphones with real HTML/CSS rendering capabilities, this min-width mostly acted as sanity check to ensure something is a smartphone.
```lang=less
@min-width-breakpoint-mobile: 320px;
```
**A tablet** considered devices' minimum available screen width.
Tablet size was defined with first wide-spread Samsung tablet, Galaxy S5 mini and low enough to cover early generation iPads (768px):
```lang=less
@min-width-breakpoint-tablet: 720px;
```
**A desktop** considered devices' minimum available screen width.
Currently used (as `@width-breakpoint-desktop`) in MW core, MinervaNeue and Vector. Extensions GrowthExperiment, MediaSearch, Wikibase, RelatedArticles ([[ https://codesearch.wmcloud.org/search/?q=%40width-breakpoint-desktop&i=nope&files=&excludeFiles=&repos= | CodeSearch ]]).
```lang=less
@min-width-breakpoint-desktop: 1000px;
```
**Wider desktop breakpoint**.
Currently used (as `@width-breakpoint-desktop-wide`) in Vector. Extensions UploadWizard/MediaUploader ([[ https://codesearch.wmcloud.org/search/?q=width-breakpoint-desktop-wide&i=nope&files=&excludeFiles=&repos= | CodeSearch ]]). As `@large` in [[ https://gerrit.wikimedia.org/r/c/mediawiki/extensions/Flow/+/209807 | Flow defined 6 years ago ]].
```lang=less
@min-width-breakpoint-desktop-wide: 1200px;
```
**Extra wide desktop breakpoint.**
Defined 6 years ago in Flow as `@xlarge`. Not in use anywhere.
```lang=less
@min-width-breakpoint-desktop-extrawide: 2000px;
```
**Additional data point**
[[ https://codesearch.wmcloud.org/things/?q=%40media&i=nope&files=&excludeFiles=&repos= | Codesearch after `@media` ]]
---
=== Figma
[[ https://www.figma.com/file/AH1Vtfc2PpjBdzZeyaIc8x/?node-id=1002%3A9270 | Figma spec sheet with proposal here. ]]
=== Developers notes
As the latest proposal changes two currently used breakpoints:
720 => 768
2000 => 1920
It seems reasonable to amend former with a workaround token as it seems possibly impactful, and latter by just using the new breakpoint value. Given how low usage of 2000 in our current codebase is and how small the differences would be projected.
It might be a helpful path forward, that we've defined breakpoint tokens so far with `width`, while in Codex and the future we're aiming for `min-width`/`max-width`.
=== Acceptance criteria (or Done)
**Design:**
[-] Create Figma spec sheet documenting our breakpoints
[] Add breakpoints in our Figma library
**Code:**
[] Document breakpoints in Codex demo (we could add a table [[ https://material.io/design/layout/responsive-layout-grid.html#breakpoints | like this ]])
[] Implement breakpoints in Codex