TLDR

In brief…

Measurement Units

1. Think Relative Spacing and not fixed/absolute for most everything else other than base measurement unit.
2. css :root { --fontSize: 16px; } variable sets base measurement unit used in all other measurement calculations. Its applied in html { font-size: var(--font-size); }
3. rem units are mainly used define rest of sizes in everything else based from the variable --font-size, sometimes em units are sometimes used as well.
4. Example: :root { --fontSize: 16px; --h1-size: 2.8rem; } html { font-size: var(--font-size); } h1 { font-size: var(--h1-size); }
5. There are three measurement spacing units: rim --sp-rim, base --sp-base, feat --sp-feat.
6. Spacing units all are defined by rem in relation to html { font-size: var(--font-size); }
7. css variables and media queries are how we control sizing and scaling. It’s all kept in the variables.
8. By using calc() css function we modify spacing variables and keep everything relative and easily scalable.
9. Example: element.style { padding-top: var(--sp-base); margin-bottom: calc( var(--sp-base) * 2.5 ); }

Css Grid

1. Grid system becomes one column @ 799px.
2. There is tablet(medium) columns setup. Those are set up as needed keeping the scaffolding Minimal
3. The grid naming convention starts with gss-- and adds the column fr’s
4. Example: gss--1-2-1 is a three column grid sets up as grid-template-columns: 1fr 2fr 1fr;
5. gssauto created an auto column grid that becomes 1fr @ 799px
6. grid-gap can also use the css measurement variables mentioned above: grid-gap: var(--sp-base);

Brand Colors

Css Production Theory

1. Universal element styling and scaling happens In Css section:
2. Unique element styling occurs in the rest of the sections
3. Media queries per element are handled in the same group of css code. This encourages mobile first coding and builds up to the larger screens. It also becomes efficient as developers do not need to scroll up and down looking for media queries.