You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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:
Proposed implementation:
The text was updated successfully, but these errors were encountered: