Spacing | COLONY Framework

Video Overview

Spacing Variables

Our spacing variables can be found at the top of the colony-structure.css stylesheet. A baseline space is set using an absolute value with all other spaces (xsml - xlrg) being defined relative to the baseline space.

Baseline Space

The building block for spacing in the project. The size of all other spacing will be specified relative to this variable so it should be set to an absolute value in px.

--space sets the baseline spacing size for the project.

Spacing Sizes

5 spacing sizes are then specified from (xsml - xlrg). These spaces are set using a number representing a proportion of --space. For example 1 would be the same as (1 * --space), 3 would be (3 x --space) and 0.5 would be (0.5 * --space).

--xlrg sets the x-large space size.

--lrg sets the large space size.

--med sets the medium space size.

--sml sets the small space size.

--xsml sets the x-small space size.

Example usage:

:root {
    --space: 25px;
    --xlrg: 4;
    --lrg: 3;
    --med: 2;
    --sml: 1;
    --xsml: 0.5;
}

Responsive Spacing

Media queries are used to responsively adjust the root spacing for different screen sizes. The breakpoints are pre-set so only the root variables need to be updated.

Responsive Baseline Space

Because the majority of project spacing is set relative to this variable adjusting this value for a breakpoint will amend all relative items proportionally.

--space sets the baseline space size for the given breakpoint.

Responsive Spacing Sizes

These variables are set relative to --space so they will resize proportionally when --space is adjusted. This means that these spacing sizes only need to be adjusted respsonsively if the relative proportion to --space needs to change for the given breakpoint.

--xlrg --lrg --med --sml and --xsml control the 5 root spacing distances in the project for the given breakpoint.

Example usage:

@media only screen and (max-width: 1100px) {
    :root {
        --space: 22px;
        --xlrg: 4;
        --lrg: 3;
        --med: 2;
        --sml: 1;
        --xsml: 0.5;
    }
}

Utility Classes

Once the root spacing sizes are set 5 utility variables are created automatically. These can be utilised to apply the root spacing sizes in your custom CSS.

--space-xlrg equivilent to (--space * --xlrg).

--space-lrg equivilent to (--space * --lrg).

--space-med equivilent to (--space * --med).

--space-sml equivilent to (--space * --sml).

--space-xsml equivilent to (--space * --x-lrg).

Example usage:

.example {
    padding: var(--space-sml);
}
.example {
    margin-top: var(--space-lrg);
}

Other Spacing

For consistency other common spacing within the project is also controlled using variables. These variables should be set using the 5 utility spacing variables rather than using absolute values as this allows responsive to be handled without additional code.

--heading-gap controls the margin-bottom for heading elements (h1 - h6).

--paragraph-gap controls the margin-bottom for paragraph elements (p).

--list-indent controls the left side indentation for list elements (ul and ol).

--hr-margin controls the top and bottom margin for the horizontal rule element (hr).

--row-gap controls the bottom margin for the Framework class row-gap.

--scroll-anchor-offset controls the vertical offset for the Framework class scroll-anchor.

Example usage:

:root {
    --heading-gap: var(--space-sml);
    --paragraph-gap: var(--space-sml);
    --list-indent: var(--space-med);
    --hr-margin: var(--space-sml);
    --row-gap: var(--space-sml);
    --scroll-anchor-offset: var(--space-med);
}