Change Details

## 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)

== 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)

##== 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)