TLDR

In brief...

Measurement Units

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

Css Grid

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

Brand Colors

Css Production Theory

Universal element styling and scaling happens In Css sectiopn:
Unique emelent styling occurs in the rest of the sections
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.

The Theory

Basics

Note Code examples shortened for example purposes.

00 - Its all relative!

All base measurements are are taken care of in root variables and scalled proportionatly using mainly rem or sometimes em in relation to base unit. These variables are then adjusted with media quesries or the css calc property.

01 - Base Unit

Font size is the basis of all other measurements. This is set as a root variable added to the HTML tag.

02 - Typography

With the root font size set, we can expand to the rest of the typography

03 - Scaling

We then scale the variables at the begining of our css instead in the later sections. We first address mobile sizing and then push up in media queries adjusting the base measurement and proportional differences in heading sizes as needed/wanted. The rest of the css stays the same!

Example:

Spacing Measurements

Intro

Spacing variables are based on the Base measurement variable as well --fontSize. Here we use rem. Functionally we hav 3 core spacing: Rim, Base, Feature. Consults Spacing section for class information. note these are not meant grow incrementally rather more exagerated from one another. These spacing variables are used in everything: padding, margin. grid gutters etc. NOTE: these are also scaled in the variables!

Rim Spacing

--sp-rim

For when you want small edge padding.

Base Spacing

--sp-base

General base spacing, genera gutters etc.

Feature Spacing

--sp-feat

Make something stand out and feel special.

Fun with calc()

We dont need to create new variables for different spacing sizes when needed we just use the calc() css property. Keeping everything relative!

--sp-rim

Rim spacing * 3

--sp-base

Base spacing * 2

--sp-feat

Feat spacing / 2

Measurement Scaling

These measurements are scaled in variables too. This example handles mobile spacing proportions and changes for larger screens.

Color Variables

00 - Global Colors

Use this variable naming convention for the global colors. This allows us to quickly move content between projects with ease.

01 - Unique Brand Colors/Gradients

The unique per project brand elements that include other colors or gradients should be placed in the 05 Base Styling > Colors section later in the css

Coming Soon

Css Grid Helpers

Note: All grids break at 700px to 1fr to break at 800px ad class .grid800

Grid Auto

.gssauto

Grid Gap

Rim Gap

.grid-gap-rim

Base Gap

.grid-gap

Feat Gap

.grid-gap-feat

Grid Repeat Columns

1fr Repeat 2x

.gss--r-2, .gss--r-2wpbg

1fr Repeat 3x

.gss--r-3, .gss--r-3wpbg

1fr Repeat 4x

.gss--r-4, .gss--r-4wpbg

1fr Repeat 5x

.gss--r-5, .gss--r-5wpbg

1fr Repeat 6x

.gss--r-6, .gss--r-6wpbg

Set Grids

Thirds

.gss--1-2

.gss--2-1

Fourths

.gss--1-3

.gss--3-1

.gss--2-1-1

.gss--1-2-1

.gss--1-1-2

Fifths

.gss--1-4

.gss--4-1

.gss--2-3

.gss--3-2

Grid Content Width

Standard Max Width 1440px

.gcw

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.