== 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 ('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;
```