== Background
We have been working on different grid proposals and now we need to test all options (grid columns, margins and gutters) with a [[ https://di-collapsible-menus.web.app/Brown_bear | prototype like this one ]] so that we can choose the best grid proposal to move forward.
== Grids proposal in Figma
| [[ https://www.figma.com/file/DYK0hkPDC9KTG9ds2RjrUp/Grids-and-Layouts---T90687?node-id=1020%3A44437 | Here you can check the grids proposal ]] |
== Acceptance criteria (or Done)
===== First prototype to test the margins and gutter in the grid (check [[ https://dsg-grid.web.app/Janis_Joplin | this prototype ]])
Create a prototype with the following options:
[x] Number of columns:
[x] 14 columns
[x] 12 columns
[] Margin and Gutter:
[x] 40px margins and 40px gutter (they change on the different breakpoints)
[] **32px margin** and 24px gutter (they change on the different breakpoints)
[x] Table of content (on left):
[x] Fixed width (244px)
[x] Not fixed (aligned with the grid columns)
[-] Use the new breakpoints defined in T303522
[-] `desktop-wide` from 1680px screens and more
[-] `desktop` from 1120px to 1679px screens
[-] `tablet` from 640px to 1119px screens
[-] `mobile` from 320px to 639px screens
===== Second prototype to test the ToC width (check [[ https://dsg-grid-2.web.app/Cher | this prototype ]]):
Create a prototype with the following options:
[-] 12 col. grid (32px margins, 24px gutter)
[-] 24 col. grid (32px margins, 24px gutter)
[-] 12 col. grid (32px margins, 24px gutter) with a new breakpoint (`tablet-wide`)where the ToC will expand to 3col
== Prototypes
- Prototype to test margins and gutters: https://dsg-grid.web.app/Janis_Joplin
- Prototype to test the ToC width: https://dsg-grid-2.web.app/Cher
===== Some articles to test the ToC with long text
https://dsg-grid.web.app/cher (display the "Life and career" option)
https://dsg-grid.web.app/infection (display the "Diagnosis" option)