this here is

VINCA DESIGNS

Grid Library

MEANING

Grid Patterns:
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

Style Guide

MEANING

Style Patterns:
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.

Color Blocks

CTA Link Variations

Helper Classes

MEANING

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.

Padding Helpers