Add dedicated scss config files

[lucasvallenet]

Description:

Create dedicated config files. Use of lists of variables for clarity and standardisation (based on config/_config.colors.scss) Move specific functions to config files.

Changes :

• Breakpoints _config.breakpoints.scss
• Easing _config.eases.scss
• Fonts _config.fonts.scss
• Z-indexes _config.indexes.scss
• Timing (speed) _config.timings.scss

Breakpoints:

List of breakpoints and media queries function (See PR #116) Legacy variables available ($from-small, $to-medium, ...)

Usage:

.c-box {
    @media (min-width: $from-small) {}
    // or
    @media #{mq-min("small")} {}

    @media (max-width: $to-small) {}
    // or
    @media #{mq-max("small")} {}

    @media (min-width: $from-small) and (max-width: $to-medium) {}
    // or
    @media #{mq-between("small", "medium)} {}
}

Easing

List of eases and new ease() function.

Usage:

.c-box {
    transition-timing-function: ease(power2-out);
}

Fonts

No breaking changes. Moved the tools/_fonts.scss to config/_config.fonts.scss

Z-indexes

No breaking changes. Moved the z() function from tools/_functions.scss to config/_config.indexes.scss Moved the $z-indexes list from config/_config.scss to config/_config.indexes.scss

Timing

List of timing and new t() function.

Usage:

.c-box {
    transition-duration: t(fast);
}

[cloudflare-workers-and-pages[bot]]

Deploying with    Cloudflare Pages

Latest commit:	b72fdab
Status:	✅  Deploy successful!
Preview URL:	https://5267ac85.locomotive-boilerplate.pages.dev
Branch Preview URL:	https://feature-scss-configs.locomotive-boilerplate.pages.dev

View logs

[lucasvallenet]

Utilities

Grid columns

Optimised the loop. I made some modifications to add grid-column @to modifiers so we can write the following :

<div class="u-gc-6/12@to-small u-gc-4/8@from-small"></div>

Spacers

Added a config.spacers.scss file with the spacer() function.

Usage:

.c-box {
    margin-top: spacer('sm');
}

I also updated the spacing utility to use the array and generate classes with breakpoints if needed. the old syntaxe without breakpoint is still working

Usage:

<div class="u-margin-bottom-sm"></div>
<div class="u-padding-top-gutter-2x@to-small u-padding-top-xs@from-small"></div>

[lucasvallenet]

@mcaskill I was not able to purge the css for the spacing properties

[mcaskill]

I was not able to purge the css for the spacing properties

@devenini I believe you have more experience with PurgeCSS.