Feature Request / Idea - View Grid columns for development

[rfearing]

What is proposed:

I propose adding a "toggle-able" visual layer to our development environments. This layer would display the Primer grid columns as an overlay overtop our markup, similar to how Figma allows us to toggle the grid overlay inside of our designs.

This would utilize our tokens and would be a visual aide in development.

Reasoning

Often, particularly when grids are nested, it's easy to veer from the design without realizing it. A margin or padding in a parent element may affect the alignment of an element within the intended grid.

I believe having a visual indicator inside our design system would:

• help the speed and ease development as developers could turn on the grid to quickly and easily see how closely the markup matches the design (more easily comparing apples to apples) by placing items precisely on the grid
• improve the final product: differences between design and dev should be easier to spot (Less of Something looks off but I don't know what)
• Help developers see nested grids work in relation to the overall grid

Proposed implementation:

• This could be "toggle-able" with a short key to turn on/off this feature.
• Renders only in dev / staging
• This idea was inspired by Griddle
  • UVA uses Griddle and can be seen in a production site: (shift + control + L)
  • 
  • On the site of the creators' of Griddle:
  • 

[rfearing]

Note to self: Add examples of use of the grid system