This came about during a need for consistency in the layout grids. We went with a 12 cell grid system, but found we didn't need all 12 cells, but it didn't hurt to have it. We researched a few grid patterns and liked the simplest clean ones for clear communication. We also went with pull downs that offer up usage notes and code samples to reference.
We built it entirely from flexbox, which we concluded the support in main updated browsers is there and will continue to expand as this tool matures.
Grid 1 of 1 to 1 of 5 cells
Usage pull down
Another offspring from a need for consistency, we wanted a place where creatives can view our designs at an atomic level. By displaying the items of the site at this granular level brings to light much of our site's inconsistencies and need to really dig deep on the meaning of these creative builds. We display everything from logos to typography to cta's to dividers and a bunch more.
CTA Link Variations
Helper classes are meant to add or reduce margin or padding that is necessary to build desirable spacing for just about any tag within the code.
This is highlighted to further assist any future coders. The site is not ours to own, and we are eager to share our information so the next coder to come along will have a better understand of the site layout and build. This is documentation we think is necessary for anyone who will review and use our work.