Similar to the outline overlay snippet, some might find general overlay grids beneficial to toggle on and off.
To use for assisting with the visualization of layout and design concerning alignments, positioning, etc., when dealing with CSS properties. Especially now with the new CSS improvements across the app and in conjunction with using the new Visual CSS Editor.
A few basic grids using simple gradients:
/* Line Grid */
.grid-lines {
background-size: 10px 10px; /* Size could be definable via the UI ? */
background-image: linear-gradient(to right, #00BFFF 1px, transparent 1px), linear-gradient(to bottom, #00BFFF 1px, transparent 1px);
}
/* Dot Grid */
.grid-dots {
background-size: 20px 20px; /* Size could be definable via the UI ? */
background-image: radial-gradient(circle, #00BFFF 1px, rgba(0, 0, 0, 0) 1px);
}
/*
Or for performance rendering concerns base64 PNG or Canvas could be considered alternatively.
*/
Just a thought, as another potential basic thing that may at times prove beneficial to Pinegrow users.