Known issues with the current grid system

[patlaj]

And how can we address them?

[pcwsmith]

examples of grids from other govs:

https://designsystem.digital.gov/components/grids/

https://design.cms.gov/layout/grid/

http://govuk-elements.herokuapp.com/layout/

https://www.ontario.ca/document/ontario-design-guide/layout

I think I got the number 12 from looking at the US examples before...

[pcwsmith]

moved to in progress.

1. @jmealing showed us some of the weird alignments, she will provide more deets or screencaps here.

2. this should be the focus of the grids aspect of this project - cleaning up the weirdness in alignments in the current grid system.

[jmealing]

Example 1: Offices, By phone & International/non-residents are all set to "col-md-4" (x3 = 12 columns), yet they do not span the same distance as the main col-md-12 container leaving a big gap at the end.

[jmealing]

Weird alignments of boxes and weird gaps of whitespace:

https://open.canada.ca/en/apps?_ga=2.139234998.460502431.1529942523-1682205537.1529425950

[jmealing]

Pockets of awkward white space and false floor:

https://www.canada.ca/en/agriculture-agri-food/corporate/lawrence-macaulay.html

[jmealing]

More awkward gaps: https://www.canada.ca/en/services/benefits/ei.html https://www.canada.ca/en/public-health/topics/immunization-vaccines.html

[jmealing]

Whole page width text-heavy content...

https://www.canada.ca/en/revenue-agency/services/forms-publications/publications/gi-196/gst-hst-commercial-ride-sharing-services.html

[jmealing]

Features easily mis-align:

https://www.canada.ca/en/services/health/healthy-living.html

[jmealing]

Mobile navigation goes to the bottom in some templates:

https://www.canada.ca/en/employment-social-development/programs/ei/ei-list/ei-employers.html

[jmealing]

Minister layout: Paragraph length is long, huge white gap.

https://www.canada.ca/en/government/ministers/diane-lebouthillier.html

[jmealing]

Gaps, bad text width layout:

https://www.canada.ca/en/public-health/services/canadian-immunization-guide.html

[jmealing]

FIP gets pushed down by Language selector:

[jmealing]

Bad alignment in search:

[DK-TBS]

The big gaps have been an awful problem for us for a long time - and they get so much worse when an author doesn't happen to need an element, and leaves out a sidebar block, or a photo or whatever. This is why I'm seriously thinking that we should look into trying to linearize the new design as much as possible. One rule: easy to follow: more important stuff goes above the less important stuff. Sidebars in only certain circumstances, etc - or better yet GONE. But I'm totally thinking off the top of my head here, I'm probably ignoring lots of considerations and loads of data :)