===Background
With the upcoming [[ https://phabricator.wikimedia.org/T300673 | changes to the main menu ]] and article tools, modern Vector will likely need to accommodate what is essentially a responsive 3 column layout. Our current markup/CSS relies heavily on floats and margins, and it has already been difficult to maintain with different screen sizes. Moving towards a grid system would allow us to greatly simply our CSS.
An example of what Vector's grid could look like:
| header | header | header |
| sidebar | article tools | column |
| sidebar | content | column |
| sidebar | content | column |
| sidebar | content | column |
| | footer | |
===AC
An unmerged patch exists that does the following:
[] Vector uses a flexbox or CSS grid based grid
[] Markup is updated to reflect new grid system, this includes moving the article tools header
[] No visual change
== QA
The new grid will be enabled on a patchdemo. Take screenshots for the following:
[] Test in mobile Safari
[] Test in Chrome
[] Test in Firefox
[] Test in Edge
[] Test in Opera
[] Test in IE11
== Sign off steps
[] Work out next steps for making this a reality (deployment plan).
[] Review subtasks and close/untag if they are fixed/still an issue
# Remaining work
To aid with testing the remaining issues, here is a list of remaining failures when running `./pixel.js reference -c 808059 && ./pixel.js test -c 808258` :
1) Footer misaligned fixed by https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/808310
2) Hamburger misaligned, fixed by https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/808271
3) Right hand side of search is misaligned on desktop breakpoint fixed by https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/808332
4) Max-width is no longer applying fixed by https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/808293
5) On tablet breakpoint the main menu should take up the full page is fixed by https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/808294
6) Table of contents does not show on the desktop breakpoint fixed by https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/808294/
| Test name | Visual diff | Issue | Associated patch | Fixed
| MediaWiki_Main_Page_vector-2022_0_document_1_tablet.png| {F35282333} | 1,2
| MediaWiki_Main_Page_vector-2022_0_viewport_2_desktop.png | {F35282341} | 1,2,3
| MediaWiki_Main_Page_vector-2022_0_viewport_3_desktop-wide.png | {F35282343} | 1,4
| filename: MediaWiki_Test_vector-2022_sidebar-open_0_html_1_tablet.png | {F35282346} | 5
| MediaWiki_Test_vector-2022_search-focus_0_html_2_desktop.png | {F35282349} | 3,6