Add natif lazy-load

Merge pull request #154 from locomotivemtl/dependabot/npm_and_yarn/socket.io-parser-4.2.4
Bump socket.io-parser from 4.2.2 to 4.2.4
2026-01-15 00:55:08 +08:00 · 2023-08-03 13:42:36 -04:00 · 2023-07-31 10:56:07 -04:00 · 2023-07-31 14:30:51 +00:00 · 2023-07-31 10:30:17 -04:00 · 2023-07-31 10:29:02 -04:00
62 changed files with 6246 additions and 5470 deletions
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-v14.17
+v17.9
--- a/README.md
+++ b/README.md
@@ -23,7 +23,7 @@ Learn more about [languages and technologies](docs/technologies.md).

 Make sure you have the following installed:

-* [Node] — at least 14.17, the latest LTS is recommended.
+* [Node] — at least 17.9, the latest LTS is recommended.
 * [NPM] — at least 8.0, the latest LTS is recommended.

 > 💡 You can use [NVM] to install and use different versions of Node via the command-line.
--- a/assets.json
+++ b/assets.json
@@ -1,3 +1,3 @@
 {
-    "version": 1673639671975
+    "version": 1691082391092
 }
--- a/assets/scripts/app.js
+++ b/assets/scripts/app.js
@@ -1,8 +1,9 @@
 import modular from 'modujs';
 import * as modules from './modules';
 import globals from './globals';
-import { html } from './utils/environment';
-import config from './config'
+import { debounce } from './utils/tickers'
+import { $html } from './utils/dom';
+import { ENV, FONT, CUSTOM_EVENT, CSS_CLASS } from './config'
 import { isFontLoadingAPIAvailable, loadFonts } from './utils/fonts';

 const app = new modular({
@@ -25,28 +26,32 @@ window.onload = (event) => {
    }
 };

-export const EAGER_FONTS = [
-    { family: 'Source Sans', style: 'normal', weight: 400 },
-    { family: 'Source Sans', style: 'normal', weight: 700 },
-];
-
 function init() {
    globals();

    app.init(app);

-    html.classList.add('is-loaded');
-    html.classList.add('is-ready');
-    html.classList.remove('is-loading');
+    $html.classList.add(CSS_CLASS.LOADED);
+    $html.classList.add(CSS_CLASS.READY);
+    $html.classList.remove(CSS_CLASS.LOADING);
+
+    // Bind window resize event with default vars
+    const resizeEndEvent = new CustomEvent(CUSTOM_EVENT.RESIZE_END)
+    window.addEventListener('resize', () => {
+        $html.style.setProperty('--vw', `${document.documentElement.clientWidth * 0.01}px`)
+        debounce(() => {
+            window.dispatchEvent(resizeEndEvent)
+        }, 200, false)
+    })

    /**
     * Eagerly load the following fonts.
     */
    if (isFontLoadingAPIAvailable) {
-        loadFonts(EAGER_FONTS, config.IS_DEV).then((eagerFonts) => {
-            html.classList.add('fonts-loaded');
+        loadFonts(FONT.EAGER, ENV.IS_DEV).then((eagerFonts) => {
+            $html.classList.add(CSS_CLASS.FONTS_LOADED);

-            if (config.IS_DEV) {
+            if (ENV.IS_DEV) {
                console.group('Eager fonts loaded!', eagerFonts.length, '/', document.fonts.size);
                console.group('State of eager fonts:')
                eagerFonts.forEach((font) => console.log(font.family, font.style, font.weight, font.status/*, font*/))
--- a/assets/scripts/config.js
+++ b/assets/scripts/config.js
@@ -7,18 +7,51 @@
 * > (since `process` is a Node API, not a web API).
 * > — https://esbuild.github.io/api/#platform
 */
-const env = process.env.NODE_ENV

-export default config = Object.freeze({
-    // Environments
-    ENV: env,
-    IS_PROD: env === 'production',
-    IS_DEV: env === 'development',
+const NODE_ENV = process.env.NODE_ENV
+const IS_DESKTOP = typeof window.orientation === 'undefined'

-    // CSS class names
-    CSS_CLASS: {
-        LOADING: 'is-loading',
-        READY: 'is-ready',
-        LOADED: 'is-loaded',
-    },
+// Main environment variables
+const ENV = Object.freeze({
+    // Node environment
+    NAME: NODE_ENV,
+    IS_PROD: NODE_ENV === 'production',
+    IS_DEV: NODE_ENV === 'development',
+
+    // Device
+    IS_DESKTOP,
+    IS_MOBILE: !IS_DESKTOP,
 })
+
+// Main CSS classes used within the project
+const CSS_CLASS = Object.freeze({
+    LOADING: 'is-loading',
+    LOADED: 'is-loaded',
+    READY: 'is-ready',
+    FONTS_LOADED: 'fonts-loaded',
+    IMAGE: "c-image",
+    IMAGE_LAZY_LOADED: "-lazy-loaded",
+    IMAGE_LAZY_LOADING: "-lazy-loading",
+    IMAGE_LAZY_ERROR: "-lazy-error",
+})
+
+// Custom js events
+const CUSTOM_EVENT = Object.freeze({
+    RESIZE_END: 'loco.resizeEnd',
+    // ...
+})
+
+// Fonts parameters
+const FONT = Object.freeze({
+    EAGER: [
+        { family: 'Source Sans', style: 'normal', weight: 400 },
+        { family: 'Source Sans', style: 'normal', weight: 700 },
+    ],
+})
+
+export {
+    ENV,
+    CSS_CLASS,
+    CUSTOM_EVENT,
+    FONT,
+}
--- a/assets/scripts/globals.js
+++ b/assets/scripts/globals.js
@@ -1,10 +1,11 @@
 import svg4everybody from 'svg4everybody';
-import config from './config';
+import { ENV } from './config';
+import { triggerLazyloadCallbacks } from './utils/image';

 // Dynamic imports for development mode only
 let gridHelper;
 (async () => {
-    if (config.IS_DEV) {
+    if (ENV.IS_DEV) {
        const gridHelperModule = await import('./utils/grid-helper');
        gridHelper = gridHelperModule?.gridHelper;
    }
@@ -20,4 +21,9 @@ export default function () {
     * Add grid helper
     */
    gridHelper?.();
+
+    /**
+     * Trigger lazyload
+     */
+    triggerLazyloadCallbacks();
 }
--- a/assets/scripts/modules/Example.js
+++ b/assets/scripts/modules/Example.js
@@ -1,5 +1,5 @@
 import { module } from 'modujs';
-import { EAGER_FONTS } from '../app';
+import { FONT } from '../config';
 import { whenReady } from '../utils/fonts';

 export default class extends module {
@@ -8,7 +8,7 @@ export default class extends module {
    }

    init() {
-        whenReady(EAGER_FONTS).then((fonts) => this.onFontsLoaded(fonts));
+        whenReady(FONT.EAGER).then((fonts) => this.onFontsLoaded(fonts));
    }

    onFontsLoaded(fonts) {
--- a/assets/scripts/modules/Load.js
+++ b/assets/scripts/modules/Load.js
@@ -1,5 +1,6 @@
 import { module } from 'modujs';
 import modularLoad from 'modularload';
+import { resetLazyloadCallbacks, triggerLazyloadCallbacks } from "../utils/image";

 export default class extends module {
    constructor(m) {
@@ -7,16 +8,28 @@ export default class extends module {
    }

    init() {
-        const load = new modularLoad({
+        this.load = new modularLoad({
            enterDelay: 0,
            transitions: {
                customTransition: {}
            }
        });

-        load.on('loaded', (transition, oldContainer, newContainer) => {
+        this.load.on('loaded', (transition, oldContainer, newContainer) => {
            this.call('destroy', oldContainer, 'app');
            this.call('update', newContainer, 'app');
+
+            /**
+             * Trigger lazyload
+             */
+            triggerLazyloadCallbacks();
+        });
+
+        this.load.on("loading", () => {
+            /**
+             * Remove previous lazyload callbacks
+             */
+            resetLazyloadCallbacks();
        });
    }
 }
--- a/assets/scripts/modules/Scroll.js
+++ b/assets/scripts/modules/Scroll.js
@@ -1,6 +1,5 @@
-import { module } from 'modujs';
-import { lazyLoadImage } from '../utils/image';
-import LocomotiveScroll from 'locomotive-scroll';
+import { module } from 'modujs'
+import LocomotiveScroll from 'locomotive-scroll'

 export default class extends module {
    constructor(m) {
@@ -9,41 +8,43 @@ export default class extends module {

    init() {
        this.scroll = new LocomotiveScroll({
-            el: this.el,
-            smooth: true
-        });
-
-        this.scroll.on('call', (func, way, obj, id) => {
-            // Using modularJS
-            this.call(func[0], { way, obj }, func[1], func[2]);
-        });
-
-        this.scroll.on('scroll', (args) => {
-            // console.log(args.scroll);
+            modularInstance: this,
        })
+
+        // // Force scroll to top
+        // if (history.scrollRestoration) {
+        //     history.scrollRestoration = 'manual'
+        //     window.scrollTo(0, 0)
+        // }
+    }
+
+    scrollTo(params) {
+        let { target, ...options } = params
+
+        options = Object.assign({
+            // Defaults
+            duration: 1,
+        }, options)
+
+        this.scroll?.scrollTo(target, options)
    }

    /**
-     * Lazy load the related image.
-     *
-     * @see ../utils/image.js
-     *
-     * It is recommended to wrap your `<img>` into an element with the
-     * CSS class name `.c-lazy`. The CSS class name modifier `.-lazy-loaded`
-     * will be applied on both the image and the parent wrapper.
-     *
-     * ```html
-     * <div class="c-lazy o-ratio u-4:3">
-     *     <img data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/640/480?v=1" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
-     * </div>
-     * ```
-     *
-     * @param {LocomotiveScroll} args - The Locomotive Scroll instance.
-     */
-    lazyLoad(args) {
-        lazyLoadImage(args.obj.el, null, () => {
-            //callback
-        })
+    * Observe new scroll elements
+    *
+    * @param $newContainer (HTMLElement)
+    */
+    addScrollElements($newContainer) {
+        this.scroll?.addScrollElements($newContainer)
+    }
+
+    /**
+    * Unobserve scroll elements
+    *
+    * @param $oldContainer (HTMLElement)
+    */
+    removeScrollElements($oldContainer) {
+        this.scroll?.removeScrollElements($oldContainer)
    }

    destroy() {
--- a/assets/scripts/utils/dom.js
+++ b/assets/scripts/utils/dom.js
@@ -0,0 +1,7 @@
+const $html = document.documentElement
+const $body = document.body
+
+export {
+    $html,
+    $body,
+}
--- a/assets/scripts/utils/environment.js
+++ b/assets/scripts/utils/environment.js
@@ -1,9 +0,0 @@
-const APP_NAME     = 'Boilerplate';
-const DATA_API_KEY = '.data-api';
-
-const html         = document.documentElement;
-const body         = document.body;
-const isDebug      = html.hasAttribute('data-debug');
-
-
-export { APP_NAME, DATA_API_KEY, html, body, isDebug };
--- a/assets/scripts/utils/html.js
+++ b/assets/scripts/utils/html.js
@@ -4,15 +4,18 @@
 * @return {string} escaped string
 */

-const escapeHtml = str =>
-    str.replace(/[&<>'"]/g, tag => ({
-        '&': '&amp;',
-        '<': '&lt;',
-        '>': '&gt;',
-        "'": '&#39;',
-        '"': '&quot;'
-    }[tag]))
-
+const escapeHtml = (str) =>
+    str.replace(
+        /[&<>'"]/g,
+        (tag) =>
+            ({
+                "&": "&amp;",
+                "<": "&lt;",
+                ">": "&gt;",
+                "'": "&#39;",
+                '"': "&quot;",
+            }[tag])
+    );

 /**
 * Unescape HTML string
@@ -20,13 +23,13 @@ const escapeHtml = str =>
 * @return {string} unescaped string
 */

-const unescapeHtml = str =>
-    str.replace('&amp;', '&')
-        .replace('&lt;', '<')
-        .replace('&gt;', '>')
-        .replace('&#39;', "'")
-        .replace('&quot;', '"')
-
+const unescapeHtml = (str) =>
+    str
+        .replace("&amp;", "&")
+        .replace("&lt;", "<")
+        .replace("&gt;", ">")
+        .replace("&#39;", "'")
+        .replace("&quot;", '"');

 /**
 * Get element data attributes
@@ -34,46 +37,41 @@ const unescapeHtml = str =>
 * @return {array}       node data
 */

-const getNodeData = node => {
-
+const getNodeData = (node) => {
    // All attributes
-    const attributes = node.attributes
+    const attributes = node.attributes;

    // Regex Pattern
-    const pattern = /^data\-(.+)$/
+    const pattern = /^data\-(.+)$/;

    // Output
-    const data = {}
+    const data = {};

    for (let i in attributes) {
        if (!attributes[i]) {
-            continue
+            continue;
        }

        // Attributes name (ex: data-module)
-        let name = attributes[i].name
+        let name = attributes[i].name;

        // This happens.
        if (!name) {
-            continue
+            continue;
        }

-        let match = name.match(pattern)
+        let match = name.match(pattern);
        if (!match) {
-            continue
+            continue;
        }

        // If this throws an error, you have some
        // serious problems in your HTML.
-        data[match[1]] = getData(node.getAttribute(name))
+        data[match[1]] = getData(node.getAttribute(name));
    }

    return data;
-
-}
-
-
-
+};

 /**
 * Parse value to data type.
@@ -83,32 +81,31 @@ const getNodeData = node => {
 * @return {mixed}  value in its natural data type
 */

-const rbrace = /^(?:\{[\w\W]*\}|\[[\w\W]*\])$/
-const getData = data => {
-    if (data === 'true') {
-        return true
+const rbrace = /^(?:\{[\w\W]*\}|\[[\w\W]*\])$/;
+const getData = (data) => {
+    if (data === "true") {
+        return true;
    }

-    if (data === 'false') {
-        return false
+    if (data === "false") {
+        return false;
    }

-    if (data === 'null') {
-        return null
+    if (data === "null") {
+        return null;
    }

    // Only convert to a number if it doesn't change the string
-    if (data === +data+'') {
-        return +data
+    if (data === +data + "") {
+        return +data;
    }

    if (rbrace.test(data)) {
-        return JSON.parse(data)
+        return JSON.parse(data);
    }

-    return data
-}
-
+    return data;
+};

 /**
 * Returns an array containing all the parent nodes of the given node
@@ -116,20 +113,45 @@ const getData = data => {
 * @return {array}          parent nodes
 */

-const getParents = $el => {
-
+const getParents = ($el) => {
    // Set up a parent array
-    let parents = []
+    let parents = [];

    // Push each parent element to the array
    for (; $el && $el !== document; $el = $el.parentNode) {
-        parents.push($el)
+        parents.push($el);
    }

    // Return our parent array
-    return parents
-}
+    return parents;
+};

+// https://gomakethings.com/how-to-get-the-closest-parent-element-with-a-matching-selector-using-vanilla-javascript/
+const queryClosestParent = ($el, selector) => {
+    // Element.matches() polyfill
+    if (!Element.prototype.matches) {
+        Element.prototype.matches =
+            Element.prototype.matchesSelector ||
+            Element.prototype.mozMatchesSelector ||
+            Element.prototype.msMatchesSelector ||
+            Element.prototype.oMatchesSelector ||
+            Element.prototype.webkitMatchesSelector ||
+            function (s) {
+                var matches = (
+                        this.document || this.ownerDocument
+                    ).querySelectorAll(s),
+                    i = matches.length;
+                while (--i >= 0 && matches.item(i) !== this) {}
+                return i > -1;
+            };
+    }
+
+    // Get the closest matching element
+    for (; $el && $el !== document; $el = $el.parentNode) {
+        if ($el.matches(selector)) return $el;
+    }
+    return null;
+};

 export {
    escapeHtml,
@@ -137,4 +159,5 @@ export {
    getNodeData,
    getData,
    getParents,
-}
+    queryClosestParent,
+};
--- a/assets/scripts/utils/image.js
+++ b/assets/scripts/utils/image.js
@@ -1,3 +1,6 @@
+import { CSS_CLASS } from '../config'
+import { queryClosestParent } from './html'
+
 /**
 * Get an image meta data
 *
@@ -89,22 +92,111 @@ const lazyLoadImage = async ($el, url, callback) => {
    }

    requestAnimationFrame(() => {
-        let lazyParent = $el.closest('.c-lazy')
+        let lazyParent = $el.closest(`.${CSS_CLASS.IMAGE}`)

        if(lazyParent) {
-            lazyParent.classList.add('-lazy-loaded')
+            lazyParent.classList.add(CSS_CLASS.IMAGE_LAZY_LOADED)
            lazyParent.style.backgroundImage = ''
        }

-        $el.classList.add('-lazy-loaded')
+        $el.classList.add(CSS_CLASS.IMAGE_LAZY_LOADED)

        callback?.()
    })
 }

+/**
+ * Lazyload Callbacks
+ *
+ */
+const lazyImageLoad = (e) => {
+    const $img = e.currentTarget;
+    const $parent = queryClosestParent($img, `.${CSS_CLASS.IMAGE}`);
+
+    requestAnimationFrame(() => {
+        if ($parent) {
+            $parent.classList.remove(CSS_CLASS.IMAGE_LAZY_LOADING);
+            $parent.classList.add(CSS_CLASS.IMAGE_LAZY_LOADED);
+        }
+
+        $img.classList.add(CSS_CLASS.IMAGE_LAZY_LOADED);
+    });
+};
+
+const lazyImageError = (e) => {
+    const $img = e.currentTarget;
+    const $parent = queryClosestParent($img, `.${CSS_CLASS.IMAGE}`);
+
+    requestAnimationFrame(() => {
+        if ($parent) {
+            $parent.classList.remove(CSS_CLASS.IMAGE_LAZY_LOADING);
+            $parent.classList.add(CSS_CLASS.IMAGE_LAZY_ERROR);
+        }
+    });
+};
+
+/* Trigger Lazyload Callbacks */
+const triggerLazyloadCallbacks = ($lazyImagesArgs) => {
+    const $lazyImages = $lazyImagesArgs
+        ? $lazyImagesArgs
+        : document.querySelectorAll('[loading="lazy"]');
+
+    if ("loading" in HTMLImageElement.prototype) {
+        for (const $img of $lazyImages) {
+            const $parent = queryClosestParent(
+                $img,
+                `.${CSS_CLASS.IMAGE}`
+            );
+
+
+            if (!$img.complete) {
+                if($parent) {
+                    $parent.classList.add(
+                        CSS_CLASS.IMAGE_LAZY_LOADING
+                    );
+                }
+
+                $img.addEventListener("load", lazyImageLoad, { once: true });
+                $img.addEventListener("error", lazyImageError, { once: true });
+            } else {
+                if (!$img.complete) {
+                    $parent.classList.add(
+                        CSS_CLASS.IMAGE_LAZY_LOADED
+                    );
+                }
+            }
+        }
+    } else {
+        // if 'loading' supported
+        for (const $img of $lazyImages) {
+            const $parent = queryClosestParent(
+                $img,
+                `.${CSS_CLASS.IMAGE}`
+            );
+
+            if($parent) {
+                $parent.classList.add(CSS_CLASS.IMAGE_LAZY_LOADED);
+            }
+        }
+    }
+};
+
+/* Reset Lazyload Callbacks */
+const resetLazyloadCallbacks = () => {
+    if ("loading" in HTMLImageElement.prototype) {
+        const $lazyImages = document.querySelectorAll('[loading="lazy"]');
+        for (const $img of $lazyImages) {
+            $img.removeEventListener("load", lazyImageLoad, { once: true });
+            $img.removeEventListener("error", lazyImageError, { once: true });
+        }
+    }
+};
+

 export {
    getImageMetadata,
    loadImage,
-    lazyLoadImage
+    lazyLoadImage,
+    triggerLazyloadCallbacks,
+    resetLazyloadCallbacks
 }
--- a/assets/styles/components/_form.scss
+++ b/assets/styles/components/_form.scss
@@ -27,7 +27,7 @@ $input-icon-color: 424242; // No #
 .c-form_input {
    padding: rem(10px);
    border: 1px solid lightgray;
-    background-color: $color-lightest;
+    background-color: color(lightest);

    &:hover {
        border-color: darkgray;
@@ -63,7 +63,7 @@ $checkbox-icon-color: $input-icon-color;
        top: 50%;
        left: 0;
        display: inline-block;
-        margin-top: (-$checkbox / 2);
+        margin-top: math.div(-$checkbox, 2);
        padding: 0;
        width: $checkbox;
        height: $checkbox;
@@ -71,7 +71,7 @@ $checkbox-icon-color: $input-icon-color;
    }

    &::before {
-        background-color: $color-lightest;
+        background-color: color(lightest);
        border: 1px solid lightgray;
    }

--- a/assets/styles/components/_heading.scss
+++ b/assets/styles/components/_heading.scss
@@ -3,30 +3,29 @@
 // ==========================================================================

 .c-heading {
-    line-height: $line-height-h;
    margin-bottom: rem(30px);

    &.-h1 {
-        font-size: rem($font-size-h1);
+        font-size: var(--font-size-h1);
    }

    &.-h2 {
-        font-size: rem($font-size-h2);
+        font-size: var(--font-size-h2);
    }

    &.-h3 {
-        font-size: rem($font-size-h3);
+        font-size: var(--font-size-h3);
    }

    &.-h4 {
-        font-size: rem($font-size-h4);
+        font-size: var(--font-size-h4);
    }

    &.-h5 {
-        font-size: rem($font-size-h5);
+        font-size: var(--font-size-h5);
    }

    &.-h6 {
-        font-size: rem($font-size-h6);
+        font-size: var(--font-size-h6);
    }
 }
--- a/assets/styles/components/_image.scss
+++ b/assets/styles/components/_image.scss
@@ -0,0 +1,20 @@
+// ==========================================================================
+// Components / Image
+// ==========================================================================
+
+.c-image {
+
+}
+
+.c-image_img {
+
+    // Lazy loading styles
+    .c-image.-lazy-load & {
+        transition: opacity $speed $easing;
+        opacity: 0;
+    }
+
+    .c-image.-lazy-loaded & {
+        opacity: 1;
+    }
+}
--- a/assets/styles/components/_scrollbar.scss
+++ b/assets/styles/components/_scrollbar.scss
@@ -1,38 +0,0 @@
-// ==========================================================================
-// Components / Scrollbar
-// ==========================================================================
-
-.c-scrollbar {
-    position: absolute;
-    right: 0;
-    top: 0;
-    width: 11px;
-    height: 100vh;
-    transform-origin: center right;
-    transition: transform 0.3s, opacity 0.3s;
-    opacity: 0;
-
-    &:hover {
-        transform: scaleX(1.45);
-    }
-
-    &:hover, .has-scroll-scrolling &, .has-scroll-dragging & {
-        opacity: 1;
-    }
-}
-
-.c-scrollbar_thumb {
-    position: absolute;
-    top: 0;
-    right: 0;
-    background-color: $color-darkest;
-    opacity: 0.5;
-    width: 7px;
-    border-radius: 10px;
-    margin: 2px;
-    cursor: grab;
-
-    .has-scroll-dragging & {
-        cursor: grabbing;
-    }
-}
--- a/assets/styles/elements/_document.scss
+++ b/assets/styles/elements/_document.scss
@@ -2,21 +2,6 @@
 // Elements / Document
 // ==========================================================================

-:root {
-
-    // Grid
-    --grid-columns      : 4;
-    --grid-gutter       : #{rem(10px)};
-    --grid-gutter-half  : calc(0.5 * var(--grid-gutter));
-    --grid-margin       : 0px;
-
-    @media (min-width: $from-small) {
-        --grid-columns  : 12;
-        --grid-gutter   : #{rem(16px)};
-        --grid-margin   : #{rem(20px)};
-    }
-}
-
 //
 // Simple page-level setup.
 //
@@ -66,30 +51,14 @@ html {
    &.is-loading {
        cursor: wait;
    }
-
-    &.has-scroll-smooth {
-        overflow: hidden;
-        position: fixed;
-        left: 0;
-        top: 0;
-        height: 100%;
-        width: 100%;
-    }
-
-    &.has-scroll-dragging {
-        user-select: none;
-    }
 }

 body {
-    .has-scroll-smooth & {
-        overflow: hidden;
-    }
 }

 ::selection {
-    background-color: $selection-background-color;
-    color: $selection-text-color;
+    background-color: $color-selection-background;
+    color: $color-selection-text;
    text-shadow: none;
 }

--- a/assets/styles/main.scss
+++ b/assets/styles/main.scss
@@ -1,14 +1,7 @@
 // ==========================================================================
 // Main
 // ==========================================================================
-$app-env: app-env();  
-
-// Settings
-// ==========================================================================
-
-@import "settings/config.eases";
-@import "settings/config.colors";
-@import "settings/config";
+@use "sass:math";

 // ==========================================================================
 // Tools
@@ -22,6 +15,14 @@ $app-env: app-env();
 // @import "tools/widths";
 // @import "tools/family";

+// Settings
+// ==========================================================================
+
+@import "settings/config.eases";
+@import "settings/config.colors";
+@import "settings/config";
+@import "settings/config.variables";
+
 // Generic
 // ==========================================================================

@@ -31,6 +32,10 @@ $app-env: app-env();
@import "generic/form";
@import "generic/button";

+// Vendors
+// ==========================================================================
+@import "node_modules/locomotive-scroll/dist/locomotive-scroll";
+
 // Elements
 // ==========================================================================

@@ -39,26 +44,20 @@ $app-env: app-env();
 // Objects
 // ==========================================================================

-@import "objects/scroll";
@import "objects/container";
@import "objects/ratio";
@import "objects/icons";
@import "objects/grid";
 // @import "objects/layout";
-// @import "objects/crop";
 // @import "objects/table";

-// Vendors
-// ==========================================================================
-// @import "vendors/vendor";
-
 // Components
 // ==========================================================================

-@import "components/scrollbar";
@import "components/heading";
@import "components/button";
@import "components/form";
+@import "components/image";

 // Utilities
 // ==========================================================================
@@ -70,4 +69,4 @@ $app-env: app-env();
 // @import "utilities/helpers";
 // @import "utilities/states";
 // @import "utilities/spacing";
-// @import "utilities/print";
+// @import "utilities/print";
--- a/assets/styles/objects/_container.scss
+++ b/assets/styles/objects/_container.scss
@@ -13,6 +13,6 @@
 .o-container {
    margin-right: auto;
    margin-left: auto;
-    padding-right: $base-column-gap;
-    padding-left: $base-column-gap;
+    padding-left: var(--grid-margin);
+    padding-right: var(--grid-margin);
 }
--- a/assets/styles/objects/_crop.scss
+++ b/assets/styles/objects/_crop.scss
@@ -1,83 +0,0 @@
-// ==========================================================================
-// Objects / Crop
-// ==========================================================================
-
-// @link https://github.com/inuitcss/inuitcss/blob/19d0c7e/objects/_objects.crop.scss
-
-
-// A list of cropping ratios that get generated as modifier classes.
-
-$crop-ratios: (
-    (2:1),
-    (4:3),
-    (16:9),
-) !default;
-
-// Provide a cropping container in order to display media (usually images)
-// cropped to certain ratios.
-//
-// 1. Set up a positioning context in which the image can sit.
-// 2. This is the crucial part: where the cropping happens.
-
-.o-crop {
-    position: relative; // [1]
-    display: block;
-    overflow: hidden; // [2]
-}
-
-// Apply this class to the content (usually `img`) that needs cropping.
-//
-// 1. Image’s default positioning is top-left in the cropping box.
-// 2. Make sure the media doesn’t stop itself too soon.
-
-.o-crop_content {
-    position: absolute;
-    top: 0; // [1]
-    left: 0; // [1]
-    max-width: none; // [2]
-
-    // We can position the media in different locations within the cropping area.
-
-    &.-right {
-        right: 0;
-        left: auto;
-    }
-
-    &.-bottom {
-        top: auto;
-        bottom: 0;
-    }
-
-    &.-center {
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-    }
-}
-
-/* stylelint-disable */
-
-// Generate a series of crop classes to be used like so:
-//
-// @example
-//   <div class="o-crop -16:9">
-
-.o-crop {
-    @each $crop in $crop-ratios {
-        @each $antecedent, $consequent in $crop {
-            @if (type-of($antecedent) != number) {
-                @error "`#{$antecedent}` needs to be a number.";
-            }
-
-            @if (type-of($consequent) != number) {
-                @error "`#{$consequent}` needs to be a number.";
-            }
-
-            &.-#{$antecedent}\:#{$consequent} {
-                padding-bottom: ($consequent/$antecedent) * 100%;
-            }
-        }
-    }
-}
-
-/* stylelint-enable */
--- a/assets/styles/objects/_grid.scss
+++ b/assets/styles/objects/_grid.scss
@@ -31,6 +31,12 @@
    // ==========================================================================
    // Cols
    // ==========================================================================
+
+    // Responsive grid columns based on `--grid-columns`
+    &.-cols {
+        grid-template-columns: repeat(var(--grid-columns), 1fr);
+    }
+
    &.-col-#{$base-column-nb} {
        grid-template-columns: repeat(#{$base-column-nb}, 1fr);
    }
@@ -51,8 +57,8 @@

    // Gutters rows and columns
    &.-gutters {
-        gap: $base-column-gap;
-        column-gap: $base-column-gap;
+        gap: var(--grid-gutter);
+        column-gap: var(--grid-gutter);
    }

    // ==========================================================================
@@ -163,7 +169,8 @@
 // By default, a grid item takes full width of its parent.
 //
 .o-grid_item {
-    grid-column: 1 / -1;
+    grid-column-start: var(--gc-start, 1);
+    grid-column-end: var(--gc-end, -1);

    &.-align-end {
        align-self: end;
--- a/assets/styles/objects/_icons.scss
+++ b/assets/styles/objects/_icons.scss
@@ -32,7 +32,7 @@
    vertical-align: middle;

    svg {
-        --icon-height: calc(var(--icon-width) * (1 / (var(--icon-ratio))));
+        --icon-height: calc(var(--icon-width) * math.div(1, (var(--icon-ratio))));

        display: block;
        width: var(--icon-width);
--- a/assets/styles/objects/_scroll.scss
+++ b/assets/styles/objects/_scroll.scss
@@ -1,7 +0,0 @@
-// ==========================================================================
-// Objects / Scroll
-// ==========================================================================
-
-.o-scroll {
-    min-height: 100vh;
-}
--- a/assets/styles/settings/_config.colors.scss
+++ b/assets/styles/settings/_config.colors.scss
@@ -5,24 +5,26 @@
 // Palette
 // =============================================================================

-$color-lightest:    #FFFFFF;
-$color-darkest:     #000000;
+$colors: (
+    primary:        #3297FD,
+    lightest:       #FFFFFF,
+    darkest:        #000000,
+);

-// Specific
+
+// Specifics
 // =============================================================================

 // Link
-$color-link:        #1A0DAB;
-$color-link-focus:  #1A0DAB;
-$color-link-hover:  darken(#1A0DAB, 10%);
+$color-link:           color(primary);
+$color-link-focus:     color(primary);
+$color-link-hover:     darken(color(primary), 10%);

 // Selection
-$selection-text-color:          #3297FD;
-$selection-background-color:    #FFFFFF;
-
-// Social Colors
-// =============================================================================
+$color-selection-text:         color(darkest);
+$color-selection-background:   color(lightest);

+// Socials
 $color-facebook:    #3B5998;
 $color-instagram:   #E1306C;
 $color-youtube:     #CD201F;
--- a/assets/styles/settings/_config.scss
+++ b/assets/styles/settings/_config.scss
@@ -48,17 +48,8 @@ $font-faces: (

 // Base
 $font-size: 16px;
-$line-height:   24px / $font-size;
-$font-color:    $color-darkest;
-
-// Headings
-$font-size-h1:  36px  !default;
-$font-size-h2:  28px  !default;
-$font-size-h3:  24px  !default;
-$font-size-h4:  20px  !default;
-$font-size-h5:  18px  !default;
-$font-size-h6:  16px  !default;
-$line-height-h: $line-height;
+$line-height:   math.div(24px, $font-size);
+$font-color:    color(darkest);

 // Weights
 $font-weight-light:     300;
@@ -84,7 +75,6 @@ $padding:         $unit;
 // Grid
 // ==========================================================================
 $base-column-nb: 12;
-$base-column-gap: $unit-small;

 // Breakpoints
 // =============================================================================
--- a/assets/styles/settings/_config.variables.scss
+++ b/assets/styles/settings/_config.variables.scss
@@ -0,0 +1,34 @@
+// ==========================================================================
+// Settings / Config / CSS VARS
+// ==========================================================================
+
+:root {
+
+    // Grid
+    --grid-columns:     4;
+    --grid-gutter:      #{rem(10px)};
+    --grid-gutter-half: calc(0.5 * var(--grid-gutter));
+    --grid-margin:      #{rem(10px)};
+
+    // Container
+    --container-width:  calc(100% - 2 * var(--grid-margin));
+
+    // Font sizes
+    --font-size-h1:     #{responsive-type(36px, 72px, 1400px)};
+    --font-size-h2:     #{rem(28px)};
+    --font-size-h3:     #{rem(24px)};
+    --font-size-h4:     #{rem(20px)};
+    --font-size-h5:     #{rem(18px)};
+    --font-size-h6:     #{rem(16px)};
+
+    // // Colors
+    // @each $color, $value in $colors {
+    //     --color-#{"" + $color}: #{$value};
+    // }
+
+    @media (min-width: $from-small) {
+        --grid-columns:     #{$base-column-nb};
+        --grid-gutter:      #{rem(16px)};
+        --grid-margin:      #{rem(20px)};
+    }
+}
--- a/assets/styles/tools/_family.scss
+++ b/assets/styles/tools/_family.scss
@@ -147,7 +147,7 @@
 // @param {number} $num - id of the child

@mixin middle($num) {
-    &:nth-child(#{round($num / 2)}) {
+    &:nth-child(#{round(math.div($num, 2))}) {
        @content;
    }
 }
--- a/assets/styles/tools/_functions.scss
+++ b/assets/styles/tools/_functions.scss
@@ -26,7 +26,7 @@
        @error "`#{$base}` needs to be a number in pixel.";
    }

-    @return ($size / $base) * 1em;
+    @return math.div($size, $base) * 1em;
 }

 // Converts the given pixel value to its REM quivalent.
@@ -45,7 +45,7 @@
        @error "`#{$base}` needs to be a number in pixel.";
    }

-    @return ($size / $base) * 1rem;
+    @return math.div($size, $base) * 1rem;
 }

 // Retrieves the z-index from the {@see $layers master list}.
@@ -139,3 +139,89 @@
 }

 $context: 'frontend' !default;
+
+// Returns calculation of a percentage of the grid cell width
+// with optional inset of grid gutter.
+//
+// ```scss
+// .c-box {
+//     width: grid-space(6/12);
+//     margin-left: grid-space(1/12, 1);
+// }
+// ```
+//
+// @param  {number} $number - The percentage spacer
+// @param  {number} $inset  - The grid gutter inset
+// @return {function<number>}
+@function grid-space($percentage, $inset: 0) {
+    @return calc(#{$percentage} * (100vw - 2 * var(--grid-margin, 0px)) - (1 - #{$percentage}) * var(--grid-gutter, 0px) + #{$inset} * var(--grid-gutter, 0px));
+}
+
+// Returns calculation of a percentage of the viewport height.
+//
+// ```scss
+// .c-box {
+//     height: vh(100);
+// }
+// ```
+//
+// @param  {number} $number - The percentage number
+// @return {function<number>} in vh
+@function vh($number) {
+    @return calc(#{$number} * var(--vh, 1vh));
+}
+
+// Returns calculation of a percentage of the viewport width.
+//
+// ```scss
+// .c-box {
+//     width: vw(100);
+// }
+// ```
+//
+// @param  {number} $number - The percentage number
+// @return {function<number>} in vw
+
+@function vw($number) {
+    @return calc(#{$number} * var(--vw, 1vw));
+}
+
+// Returns clamp of calculated preferred responsive font size
+// within a font size and breakpoint range.
+//
+// ```scss
+// .c-heading.-h1 {
+//     font-size: responsive-type(30px, 60px, 1800);
+// }
+//
+// .c-heading.-h2 {
+//     font-size: responsive-type(20px, 40px, $from-big);
+// }
+// ```
+//
+// @param  {number} $min-size   - Minimum font size in pixels.
+// @param  {number} $max-size   - Maximum font size in pixels.
+// @param  {number} $breakpoint - Maximum breakpoint.
+// @return {function<number, function<number>, number>}
+@function responsive-type($min-size, $max-size, $breakpoint) {
+    $delta: math.div($max-size, $breakpoint);
+    @return clamp($min-size, calc(#{strip-unit($delta)} * #{vw(100)}), $max-size);
+}
+
+// Returns color code.
+//
+// ```scss
+// .c-box {
+//     width: color(primary);
+// }
+// ```
+//
+// @param  {string} $key - The color key in $colors.
+// @return {color}
+
+@function color($key) {
+    @if not map-has-key($colors, $key) {
+        @error "Unknown '#{$key}' in $colors.";
+    }
+    @return map-get($colors, $key);
+}
--- a/assets/styles/tools/_maths.scss
+++ b/assets/styles/tools/_maths.scss
@@ -2,13 +2,18 @@
 // Tools / Maths
 // ==========================================================================

-// Removes the unit from the given number.
+// Remove the unit of a length
 //
-// @param  {number} $number The number to strip.
-// @return {number}
+// @param {Number} $number Number to remove unit from
+// @return {function<number>}
+@function strip-unit($value) {
+    @if type-of($value) != "number" {
+        @error "Invalid `#{type-of($value)}` type. Choose a number type instead.";
+    } @else if type-of($value) == "number" and not is-unitless($value) {
+        @return math.div($value, $value * 0 + 1);
+    }

-@function strip-units($number) {
-    @return $number / ($number * 0 + 1);
+    @return $value;
 }

 // Returns the square root of the given number.
@@ -21,7 +26,7 @@
    $value: $x;

    @for $i from 1 through 10 {
-        $value: $x - ($x * $x - abs($number)) / (2 * $x);
+        $value: $x - math.div(($x * $x - abs($number)), (2 * $x));
        $x: $value;
    }

@@ -43,7 +48,7 @@
        }
    } @else if $exp < 0 {
        @for $i from 1 through -$exp {
-            $value: $value / $number;
+            $value: math.div($value, $number);
        }
    }

@@ -88,7 +93,7 @@

    // If the angle has `deg` as unit, convert to radians.
    @if ($unit == deg) {
-        @return $angle / 180 * pi();
+        @return math.div($angle, 180) * pi();
    }

    @return $angle;
@@ -104,7 +109,7 @@
    $angle: rad($angle);

    @for $i from 0 through 10 {
-        $sin: $sin + pow(-1, $i) * pow($angle, (2 * $i + 1)) / fact(2 * $i + 1);
+        $sin: $sin + pow(-1, $i) * math.div(pow($angle, (2 * $i + 1)), fact(2 * $i + 1));
    }

    @return $sin;
@@ -120,7 +125,7 @@
    $angle: rad($angle);

    @for $i from 0 through 10 {
-        $cos: $cos + pow(-1, $i) * pow($angle, 2 * $i) / fact(2 * $i);
+        $cos: $cos + pow(-1, $i) * math.div(pow($angle, 2 * $i), fact(2 * $i));
    }

    @return $cos;
@@ -132,5 +137,5 @@
 // @return {number}

@function tan($angle) {
-    @return sin($angle) / cos($angle);
+    @return math.div(sin($angle), cos($angle));
 }
--- a/assets/styles/tools/_mixins.scss
+++ b/assets/styles/tools/_mixins.scss
@@ -51,13 +51,13 @@
    font-size: rem($font-size) $important;

    @if ($line-height == "auto") {
-        line-height: ceil($font-size / $line-height) * ($line-height / $font-size) $important;
+        line-height: ceil(math.div($font-size, $line-height)) * math.div($line-height, $font-size) $important;
    }
    @else {
        @if (type-of($line-height) == number or $line-height == "inherit" or $line-height == "normal") {
            line-height: $line-height $important;
        }
-        @elseif ($line-height != "none" and $line-height != false) {
+        @else if ($line-height != "none" and $line-height != false) {
            @error "D’oh! `#{$line-height}` is not a valid value for `$line-height`.";
        }
    }
--- a/assets/styles/tools/_widths.scss
+++ b/assets/styles/tools/_widths.scss
@@ -58,7 +58,7 @@ $breakpoint-delimiter: \@ !default;
        @for $numerator from 1 through $denominator {
            // Build a class in the format `.u-3/4[@<breakpoint>]`.
            .u-#{$numerator}#{$fractions-delimiter}#{$denominator}#{$breakpoint} {
-                width: ($numerator / $denominator) * 100% $important;
+                width: math.div($numerator, $denominator) * 100% $important;
            }

            @if ($widths-offsets == true) {
@@ -66,13 +66,13 @@ $breakpoint-delimiter: \@ !default;
                .u-push-#{$numerator}#{$fractions-delimiter}#{$denominator}#{$breakpoint} {
                    position: relative $important;
                    right: auto $important;
-                    left: ($numerator / $denominator) * 100% $important;
+                    left: math.div($numerator, $denominator) * 100% $important;
                }

                // Build a class in the format `.u-pull-5/6[@<breakpoint>]`.
                .u-pull-#{$numerator}#{$fractions-delimiter}#{$denominator}#{$breakpoint} {
                    position: relative $important;
-                    right: ($numerator / $denominator) * 100% $important;
+                    right: math.div($numerator, $denominator) * 100% $important;
                    left: auto $important;
                }
            }
--- a/assets/styles/utilities/_grid-column.scss
+++ b/assets/styles/utilities/_grid-column.scss
@@ -13,48 +13,26 @@ $colsMax: $base-column-nb + 1;

 $breakpoints: (
    "null" null,
-    "from-tiny" "from-tiny",
-    "from-small" "from-small",
-    "from-medium" "from-medium",
-    "from-large" "from-large",
-    "from-big" "from-big"
+    "from-tiny" $from-tiny,
+    "from-small" $from-small,
+    "from-medium" $from-medium,
+    "from-large" $from-large,
+    "from-big" $from-big
 ) !default;

-@each $breakpoint-namespace, $breakpoint in $breakpoints {
+@each $breakpoint, $mediaquery in $breakpoints {
    @for $fromIndex from 1 through $colsMax {
        @for $toIndex from 1 through $colsMax {
-            @if $breakpoint == null {
+            @if $mediaquery == null {
                .u-gc-#{$fromIndex}\/#{$toIndex} {
-                    grid-column-start: #{$fromIndex};
-                    grid-column-end: #{$toIndex};
+                    --gc-start: #{$fromIndex};
+                    --gc-end: #{$toIndex};
                }
            } @else {
                .u-gc-#{$fromIndex}\/#{$toIndex}\@#{$breakpoint} {
-                    @if $breakpoint-namespace == "from-tiny" {
-                        @media (min-width: $from-tiny) {
-                            grid-column-start: #{$fromIndex};
-                            grid-column-end: #{$toIndex};
-                        }
-                    } @else if $breakpoint-namespace == "from-small" {
-                        @media (min-width: $from-small) {
-                            grid-column-start: #{$fromIndex};
-                            grid-column-end: #{$toIndex};
-                        }
-                    } @else if $breakpoint-namespace == "from-medium" {
-                        @media (min-width: $from-medium) {
-                            grid-column-start: #{$fromIndex};
-                            grid-column-end: #{$toIndex};
-                        }
-                    } @else if $breakpoint-namespace == "from-large" {
-                        @media (min-width: $from-large) {
-                            grid-column-start: #{$fromIndex};
-                            grid-column-end: #{$toIndex};
-                        }
-                    } @else if $breakpoint-namespace == "from-big" {
-                        @media (min-width: $from-big) {
-                            grid-column-start: #{$fromIndex};
-                            grid-column-end: #{$toIndex};
-                        }
+                    @media (min-width: #{$mediaquery}) {
+                        --gc-start: #{$fromIndex};
+                        --gc-end: #{$toIndex};
                    }
                }
            }
--- a/assets/styles/utilities/_ratio.scss
+++ b/assets/styles/utilities/_ratio.scss
@@ -28,8 +28,8 @@ $aspect-ratios: (
            @error "`#{$consequent}` needs to be a number."
        }

-        &.u-#{$antecedent}\:#{$consequent}::before {
-            padding-bottom: ($consequent/$antecedent) * 100%;
+        .u-#{$antecedent}\:#{$consequent}::before {
+            padding-bottom: math.div($consequent, $antecedent) * 100%;
        }
    }
 }
--- a/build/helpers/config.js
+++ b/build/helpers/config.js
@@ -0,0 +1,25 @@
+/**
+ * @file Provides simple user configuration options.
+ */
+
+import loconfig from '../../loconfig.json' assert { type: 'json' };
+import { merge } from '../utils/index.js';
+
+let usrconfig;
+
+try {
+    usrconfig = await import('../../loconfig.local.json', {
+        assert: { type: 'json' },
+    });
+    usrconfig = usrconfig.default;
+
+    merge(loconfig, usrconfig);
+} catch (err) {
+    // do nothing
+}
+
+export default loconfig;
+
+export {
+    loconfig,
+};
--- a/build/helpers/glob.js
+++ b/build/helpers/glob.js
@@ -0,0 +1,162 @@
+/**
+ * @file Retrieve the first available glob library.
+ *
+ * Note that options vary between libraries.
+ *
+ * Candidates:
+ *
+ * - {@link https://npmjs.com/package/tiny-glob tiny-glob} [1][5][6]
+ * - {@link https://npmjs.com/package/globby globby} [2][5]
+ * - {@link https://npmjs.com/package/fast-glob fast-glob} [3]
+ * - {@link https://npmjs.com/package/glob glob} [1][4][5]
+ *
+ * Notes:
+ *
+ * - [1] The library's function accepts only a single pattern.
+ * - [2] The library's function accepts only an array of patterns.
+ * - [3] The library's function accepts either a single pattern
+ *       or an array of patterns.
+ * - [4] The library's function does not return a Promise but will be
+ *       wrapped in a function that does return a Promise.
+ * - [5] The library's function will be wrapped in a function that
+ *       supports a single pattern and an array of patterns.
+ * - [6] The library's function returns files and directories but will be
+ *       preconfigured to return only files.
+ */
+
+import { promisify } from 'node:util';
+
+/**
+ * @callback GlobFn
+ *
+ * @param {string|string[]} patterns - A string pattern
+ *     or an array of string patterns.
+ * @param {object}          options
+ *
+ * @returns {Promise<string[]>}
+ */
+
+/**
+ * @typedef {object} GlobOptions
+ */
+
+/**
+ * @type {GlobFn|undefined} The discovered glob function.
+ */
+let glob;
+
+/**
+ * @type {string[]} A list of packages to attempt import.
+ */
+const candidates = [
+    'tiny-glob',
+    'globby',
+    'fast-glob',
+    'glob',
+];
+
+try {
+    glob = await importGlob();
+} catch (err) {
+    // do nothing
+}
+
+/**
+ * @type {boolean} Whether a glob function was discovered (TRUE) or not (FALSE).
+ */
+const supportsGlob = (typeof glob === 'function');
+
+/**
+ * Imports the first available glob function.
+ *
+ * @throws {TypeError} If no glob library was found.
+ *
+ * @returns {GlobFn}
+ */
+async function importGlob() {
+    for (let name of candidates) {
+        try {
+            let globModule = await import(name);
+
+            if (typeof globModule.default !== 'function') {
+                throw new TypeError(`Expected ${name} to be a function`);
+            }
+
+            /**
+             * Wrap the function to ensure
+             * a common pattern.
+             */
+            switch (name) {
+                case 'tiny-glob':
+                    /** [1][5] */
+                    return createArrayableGlob(
+                        /** [6] */
+                        createPresetGlob(globModule.default, {
+                            filesOnly: true
+                        })
+                    );
+
+                case 'globby':
+                    /** [2][5] - If `patterns` is a string, wraps into an array. */
+                    return (patterns, options) => globModule.default([].concat(patterns), options);
+
+                case 'glob':
+                    /** [1][5] */
+                    return createArrayableGlob(
+                        /** [4] */
+                        promisify(globModule.default)
+                    );
+
+                default:
+                    return globModule.default;
+            }
+        } catch (err) {
+            // swallow this error; skip to the next candidate.
+        }
+    }
+
+    throw new TypeError(
+        `No glob library was found, expected one of: ${candidates.join(', ')}`
+    );
+}
+
+/**
+ * Creates a wrapper function for the glob function
+ * to provide support for arrays of patterns.
+ *
+ * @param {function} globFn - The glob function.
+ *
+ * @returns {GlobFn}
+ */
+function createArrayableGlob(globFn) {
+    return (patterns, options) => {
+        /** [2] If `patterns` is a string, wraps into an array. */
+        patterns = [].concat(patterns);
+
+        const globs = patterns.map((pattern) => globFn(pattern, options));
+
+        return Promise.all(globs).then((files) => {
+            return [].concat.apply([], files);
+        });
+    };
+}
+
+/**
+ * Creates a wrapper function for the glob function
+ * to define new default options.
+ *
+ * @param {function}    globFn  - The glob function.
+ * @param {GlobOptions} presets - The glob function options to preset.
+ *
+ * @returns {GlobFn}
+ */
+function createPresetGlob(globFn, presets) {
+    return (patterns, options) => globFn(patterns, Object.assign({}, presets, options));
+}
+
+export default glob;
+
+export {
+    glob,
+    supportsGlob,
+};
--- a/build/helpers/message.js
+++ b/build/helpers/message.js
@@ -11,7 +11,7 @@ import kleur from 'kleur';
 * @param {string} [type]    - The type of message.
 * @param {string} [timerID] - The console time label to output.
 */
-export default function message(text, type, timerID) {
+function message(text, type, timerID) {
    switch (type) {
        case 'success':
            console.log('✅ ', kleur.bgGreen().black(text));
@@ -52,4 +52,10 @@ export default function message(text, type, timerID) {
    }

    console.log('');
+}
+
+export default message;
+
+export {
+    message,
 };
--- a/build/helpers/notification.js
+++ b/build/helpers/notification.js
@@ -16,7 +16,7 @@ import notifier from 'node-notifier';
 * @param  {function}      callback        - The notification callback.
 * @return {void}
 */
-export default function notification(options, callback) {
+function notification(options, callback) {
    if (typeof options === 'string') {
        options = {
            message: options
@@ -42,4 +42,10 @@ export default function notification(options, callback) {
    }

    notifier.notify(options, callback);
+}
+
+export default notification;
+
+export {
+    notification,
 };
--- a/build/helpers/postcss.js
+++ b/build/helpers/postcss.js
@@ -0,0 +1,139 @@
+/**
+ * @file If available, returns the PostCSS Processor creator and
+ * any the Autoprefixer PostCSS plugin.
+ */
+
+/**
+ * @typedef {import('autoprefixer').autoprefixer.Options} AutoprefixerOptions
+ */
+
+/**
+ * @typedef {import('postcss').AcceptedPlugin} AcceptedPlugin
+ */
+
+/**
+ * @typedef {import('postcss').Postcss} Postcss
+ */
+
+/**
+ * @typedef {import('postcss').ProcessOptions} ProcessOptions
+ */
+
+/**
+ * @typedef {import('postcss').Processor} Processor
+ */
+
+/**
+ * @typedef {AcceptedPlugin[]} PluginList
+ */
+
+/**
+ * @typedef {object<string, AcceptedPlugin>} PluginMap
+ */
+
+/**
+ * @typedef {PluginList|PluginMap} PluginCollection
+ */
+
+/**
+ * @typedef {object} PostCSSOptions
+ *
+ * @property {ProcessOptions}      processor    - The `Processor#process()` options.
+ * @property {AutoprefixerOptions} autoprefixer - The `autoprefixer()` options.
+ */
+
+/**
+ * @type {Postcss|undefined}        postcss      - The discovered PostCSS function.
+ * @type {AcceptedPlugin|undefined} autoprefixer - The discovered Autoprefixer function.
+ */
+let postcss, autoprefixer;
+
+try {
+    postcss = await import('postcss');
+    postcss = postcss.default;
+
+    autoprefixer = await import('autoprefixer');
+    autoprefixer = autoprefixer.default;
+} catch (err) {
+    // do nothing
+}
+
+/**
+ * @type {boolean} Whether PostCSS was discovered (TRUE) or not (FALSE).
+ */
+const supportsPostCSS = (typeof postcss === 'function');
+
+/**
+ * @type {PluginList} A list of supported plugins.
+ */
+const pluginsList = [
+    autoprefixer,
+];
+
+/**
+ * @type {PluginMap} A map of supported plugins.
+ */
+const pluginsMap = {
+    'autoprefixer': autoprefixer,
+};
+
+/**
+ * Attempts to create a PostCSS Processor with the given plugins and options.
+ *
+ * @param {PluginCollection} pluginsListOrMap - A list or map of plugins.
+ *     If a map of plugins, the plugin name looks up `options`.
+ * @param {PostCSSOptions}   options - The PostCSS wrapper options.
+ *
+ * @returns {Processor|null}
+ */
+function createProcessor(pluginsListOrMap, options)
+{
+    if (!postcss) {
+        return null;
+    }
+
+    const plugins = parsePlugins(pluginsListOrMap, options);
+
+    return postcss(plugins);
+}
+
+/**
+ * Parses the PostCSS plugins and options.
+ *
+ * @param {PluginCollection} pluginsListOrMap - A list or map of plugins.
+ *     If a map of plugins, the plugin name looks up `options`.
+ * @param {PostCSSOptions}   options - The PostCSS wrapper options.
+ *
+ * @returns {PluginList}
+ */
+function parsePlugins(pluginsListOrMap, options)
+{
+    if (Array.isArray(pluginsListOrMap)) {
+        return pluginsListOrMap;
+    }
+
+    /** @type {PluginList} */
+    const plugins = [];
+
+    for (let [ name, plugin ] of Object.entries(pluginsListOrMap)) {
+        if (name in options) {
+            plugin = plugin[name](options[name]);
+        }
+
+        plugins.push(plugin);
+    }
+
+    return plugins;
+}
+
+export default postcss;
+
+export {
+    autoprefixer,
+    createProcessor,
+    parsePlugins,
+    pluginsList,
+    pluginsMap,
+    postcss,
+    supportsPostCSS,
+};
--- a/build/helpers/template.js
+++ b/build/helpers/template.js
@@ -3,6 +3,10 @@
 */

 import loconfig from './config.js';
+import {
+    escapeRegExp,
+    flatten
+} from '../utils/index.js';

 const templateData = flatten({
    paths: loconfig.paths
@@ -22,7 +26,7 @@ const templateData = flatten({
 * @param  {object} [data] - An object in the form `{ 'from': 'to', … }`.
 * @return {*} Returns the transformed value.
 */
-export default function resolve(input, data = templateData) {
+function resolve(input, data = templateData) {
    switch (typeof input) {
        case 'string': {
            return resolveValue(input, data);
@@ -56,7 +60,7 @@ export default function resolve(input, data = templateData) {
 * @param  {object} [data] - An object in the form `{ 'from': 'to', … }`.
 * @return {string} Returns the translated string.
 */
-export function resolveValue(input, data = templateData) {
+function resolveValue(input, data = templateData) {
    const tags = [];

    if (data !== templateData) {
@@ -93,55 +97,9 @@ export function resolveValue(input, data = templateData) {
    });
 }

-/**
- * Creates a new object with all nested object properties
- * concatenated into it recursively.
- *
- * Nested keys are flattened into a property path:
- *
- * ```js
- * {
- *   a: {
- *     b: {
- *       c: 1
- *     }
- *   },
- *   d: 1
- * }
- * ```
- *
- * ```js
- * {
- *   "a.b.c": 1,
- *   "d": 1
- * }
- * ```
- *
- * @param  {object} input  - The object to flatten.
- * @param  {string} prefix - The parent key prefix.
- * @param  {object} target - The object that will receive the flattened properties.
- * @return {object} Returns the `target` object.
- */
-function flatten(input, prefix, target = {}) {
-    for (let key in input) {
-        let field = (prefix ? prefix + '.' + key : key);
+export default resolve;

-        if (typeof input[key] === 'object') {
-            flatten(input[key], field, target);
-        } else {
-            target[field] = input[key];
-        }
-    }
-
-    return target;
-}
-
-/**
- * Quotes regular expression characters.
- *
- * @param  {string} str - The input string.
- * @return {string} Returns the quoted (escaped) string.
- */
-function escapeRegExp(str) {
-    return str.replace(/[\[\]\{\}\(\)\-\*\+\?\.\,\\\^\$\|\#\s]/g, '\\$&');
-}
+export {
+    resolve,
+    resolveValue,
+};
--- a/build/tasks/concats.js
+++ b/build/tasks/concats.js
@@ -1,8 +1,9 @@
-import loconfig from '../utils/config.js';
-import glob from '../utils/glob.js';
-import message from '../utils/message.js';
-import notification from '../utils/notification.js';
-import resolve from '../utils/template.js';
+import loconfig from '../helpers/config.js';
+import glob, { supportsGlob } from '../helpers/glob.js';
+import message from '../helpers/message.js';
+import notification from '../helpers/notification.js';
+import resolve from '../helpers/template.js';
+import { merge } from '../utils/index.js';
 import concat from 'concat';
 import {
    basename,
@@ -64,7 +65,7 @@ export const productionConcatFilesArgs  = [
 * @return {Promise}
 */
 export default async function concatFiles(globOptions = null, concatOptions = null) {
-    if (glob) {
+    if (supportsGlob) {
        if (globOptions == null) {
            globOptions = productionGlobOptions;
        } else if (
@@ -72,7 +73,7 @@ export default async function concatFiles(globOptions = null, concatOptions = nu
            globOptions !== developmentGlobOptions &&
            globOptions !== productionGlobOptions
        ) {
-            globOptions = Object.assign({}, defaultGlobOptions, globOptions);
+            globOptions = merge({}, defaultGlobOptions, globOptions);
        }
    }

@@ -82,9 +83,18 @@ export default async function concatFiles(globOptions = null, concatOptions = nu
        concatOptions !== developmentConcatOptions &&
        concatOptions !== productionConcatOptions
    ) {
-        concatOptions = Object.assign({}, defaultConcatOptions, concatOptions);
+        concatOptions = merge({}, defaultConcatOptions, concatOptions);
    }

+    /**
+     * @async
+     * @param  {object}   entry          - The entrypoint to process.
+     * @param  {string[]} entry.includes - One or more paths to process.
+     * @param  {string}   entry.outfile  - The file to write to.
+     * @param  {?string}  [entry.label]  - The task label.
+     *     Defaults to the outfile name.
+     * @return {Promise}
+     */
    loconfig.tasks.concats.forEach(async ({
        includes,
        outfile,
@@ -98,25 +108,25 @@ export default async function concatFiles(globOptions = null, concatOptions = nu
        console.time(timeLabel);

        try {
+            if (!Array.isArray(includes)) {
+                includes = [ includes ];
+            }
+
            includes = resolve(includes);
            outfile  = resolve(outfile);

-            let files;
-
-            if (glob && globOptions) {
-                files = await glob(includes, globOptions);
-            } else {
-                files = includes;
+            if (supportsGlob && globOptions) {
+                includes = await glob(includes, globOptions);
            }

            if (concatOptions.removeDuplicates) {
-                files = files.map((path) => normalize(path));
-                files = [ ...new Set(files) ];
+                includes = includes.map((path) => normalize(path));
+                includes = [ ...new Set(includes) ];
            }

-            await concat(files, outfile);
+            await concat(includes, outfile);

-            if (files.length) {
+            if (includes.length) {
                message(`${label} concatenated`, 'success', timeLabel);
            } else {
                message(`${label} is empty`, 'notice', timeLabel);
--- a/build/tasks/scripts.js
+++ b/build/tasks/scripts.js
@@ -1,7 +1,8 @@
-import loconfig from '../utils/config.js';
-import message from '../utils/message.js';
-import notification from '../utils/notification.js';
-import resolve from '../utils/template.js';
+import loconfig from '../helpers/config.js';
+import message from '../helpers/message.js';
+import notification from '../helpers/notification.js';
+import resolve from '../helpers/template.js';
+import { merge } from '../utils/index.js';
 import esbuild from 'esbuild';
 import { basename } from 'node:path';

@@ -50,9 +51,20 @@ export default async function compileScripts(esBuildOptions = null) {
        esBuildOptions !== developmentESBuildOptions &&
        esBuildOptions !== productionESBuildOptions
    ) {
-        esBuildOptions = Object.assign({}, defaultESBuildOptions, esBuildOptions);
+        esBuildOptions = merge({}, defaultESBuildOptions, esBuildOptions);
    }

+    /**
+     * @async
+     * @param  {object}   entry           - The entrypoint to process.
+     * @param  {string[]} entry.includes  - One or more paths to process.
+     * @param  {string}   [entry.outdir]  - The directory to write to.
+     * @param  {string}   [entry.outfile] - The file to write to.
+     * @param  {?string}  [entry.label]   - The task label.
+     *     Defaults to the outdir or outfile name.
+     * @throws {TypeError} If outdir and outfile are missing.
+     * @return {Promise}
+     */
    loconfig.tasks.scripts.forEach(async ({
        includes,
        outdir = '',
@@ -67,6 +79,10 @@ export default async function compileScripts(esBuildOptions = null) {
        console.time(timeLabel);

        try {
+            if (!Array.isArray(includes)) {
+                includes = [ includes ];
+            }
+
            includes = resolve(includes);

            if (outdir) {
--- a/build/tasks/styles.js
+++ b/build/tasks/styles.js
@@ -1,12 +1,17 @@
-import loconfig from '../utils/config.js';
-import message from '../utils/message.js';
-import notification from '../utils/notification.js';
-import postcss, { pluginsMap as postcssPluginsMap } from '../utils/postcss.js';
-import resolve from '../utils/template.js';
+import loconfig from '../helpers/config.js';
+import message from '../helpers/message.js';
+import notification from '../helpers/notification.js';
+import {
+    createProcessor,
+    pluginsMap as postcssPluginsMap,
+    supportsPostCSS
+} from '../helpers/postcss.js';
+import resolve from '../helpers/template.js';
+import { merge } from '../utils/index.js';
 import { writeFile } from 'node:fs/promises';
 import { basename } from 'node:path';
 import { promisify } from 'node:util';
-import sass, { types } from 'node-sass';
+import sass from 'sass';
 import { PurgeCSS } from 'purgecss';

 const sassRender = promisify(sass.render);
@@ -26,11 +31,6 @@ export const defaultSassOptions = {

 export const developmentSassOptions = Object.assign({}, defaultSassOptions, {
    outputStyle: 'expanded',
-    functions: {
-        'app-env()': function () {
-            return (new types.String('development'))
-        }
-    }
 });
 export const productionSassOptions = Object.assign({}, defaultSassOptions, {
    outputStyle: 'compressed',
@@ -87,10 +87,10 @@ export default async function compileStyles(sassOptions = null, postcssOptions =
        sassOptions !== developmentSassOptions &&
        sassOptions !== productionSassOptions
    ) {
-        sassOptions = Object.assign({}, defaultSassOptions, sassOptions);
+        sassOptions = merge({}, defaultSassOptions, sassOptions);
    }

-    if (postcss) {
+    if (supportsPostCSS) {
        if (postcssOptions == null) {
            postcssOptions = productionPostCSSOptions;
        } else if (
@@ -98,10 +98,19 @@ export default async function compileStyles(sassOptions = null, postcssOptions =
            postcssOptions !== developmentPostCSSOptions &&
            postcssOptions !== productionPostCSSOptions
        ) {
-            postcssOptions = Object.assign({}, defaultPostCSSOptions, postcssOptions);
+            postcssOptions = merge({}, defaultPostCSSOptions, postcssOptions);
        }
    }

+    /**
+     * @async
+     * @param  {object}   entry         - The entrypoint to process.
+     * @param  {string[]} entry.infile  - The file to process.
+     * @param  {string}   entry.outfile - The file to write to.
+     * @param  {?string}  [entry.label] - The task label.
+     *     Defaults to the outfile name.
+     * @return {Promise}
+     */
    loconfig.tasks.styles.forEach(async ({
        infile,
        outfile,
@@ -121,9 +130,9 @@ export default async function compileStyles(sassOptions = null, postcssOptions =
                outFile: outfile,
            }));

-            if (postcss && postcssOptions) {
+            if (supportsPostCSS && postcssOptions) {
                if (typeof postcssProcessor === 'undefined') {
-                    postcssProcessor = createPostCSSProcessor(
+                    postcssProcessor = createProcessor(
                        postcssPluginsMap,
                        postcssOptions
                    );
@@ -196,35 +205,6 @@ export default async function compileStyles(sassOptions = null, postcssOptions =
    });
 };

-/**
- * Creates a PostCSS Processor with the given plugins and options.
- *
- * @param {array<(function|object)>|object<string, (function|object)>} pluginsListOrMap -
- *     A list or map of plugins.
- *     If a map of plugins, the plugin name looks up `options`.
- * @param {object}              options - The PostCSS options.
- */
-function createPostCSSProcessor(pluginsListOrMap, options)
-{
-    let plugins;
-
-    if (Array.isArray(pluginsListOrMap)) {
-        plugins = pluginsListOrMap;
-    } else {
-        plugins = [];
-
-        for (let [ name, plugin ] of Object.entries(pluginsListOrMap)) {
-            if (name in options) {
-                plugin = plugin[name](options[name]);
-            }
-
-            plugins.push(plugin);
-        }
-    }
-
-    return postcss(plugins);
-}
-
 /**
 * Purge unused styles from CSS files.
 *
@@ -237,22 +217,23 @@ function createPostCSSProcessor(pluginsListOrMap, options)
 */
 async function purgeUnusedCSS(outfile, label) {
    label = label ?? basename(outfile);
+
    const timeLabel = `${label} purged in`;
    console.time(timeLabel);

    const purgeCSSContentFiles = Array.from(loconfig.tasks.purgeCSS.content);

-    const purgeCSSResults = await new PurgeCSS().purge({
+    const purgeCSSResults = await (new PurgeCSS()).purge({
        content: purgeCSSContentFiles,
        css: [ outfile ],
        rejected: true,
-        defaultExtractor: content => content.match(/[a-z0-9_\-\\\/\@]+/gi) || [],
+        defaultExtractor: (content) => content.match(/[a-z0-9_\-\\\/\@]+/gi) || [],
        safelist: {
            standard: [ /^((?!\bu-gc-).)*$/ ]
        }
    })

-    for(let result of purgeCSSResults) {
+    for (let result of purgeCSSResults) {
        await writeFile(outfile, result.css)

        message(`${label} purged`, 'chore', timeLabel);
--- a/build/tasks/svgs.js
+++ b/build/tasks/svgs.js
@@ -1,7 +1,8 @@
-import loconfig from '../utils/config.js';
-import message from '../utils/message.js';
-import notification from '../utils/notification.js';
-import resolve from '../utils/template.js';
+import loconfig from '../helpers/config.js';
+import message from '../helpers/message.js';
+import notification from '../helpers/notification.js';
+import resolve from '../helpers/template.js';
+import { merge } from '../utils/index.js';
 import { basename } from 'node:path';
 import mixer from 'svg-mixer';

@@ -44,9 +45,18 @@ export default async function compileSVGs(mixerOptions = null) {
        mixerOptions !== developmentMixerOptions &&
        mixerOptions !== productionMixerOptions
    ) {
-        mixerOptions = Object.assign({}, defaultMixerOptions, mixerOptions);
+        mixerOptions = merge({}, defaultMixerOptions, mixerOptions);
    }

+    /**
+     * @async
+     * @param  {object}   entry          - The entrypoint to process.
+     * @param  {string[]} entry.includes - One or more paths to process.
+     * @param  {string}   entry.outfile  - The file to write to.
+     * @param  {?string}  [entry.label]  - The task label.
+     *     Defaults to the outfile name.
+     * @return {Promise}
+     */
    loconfig.tasks.svgs.forEach(async ({
        includes,
        outfile,
@@ -60,6 +70,10 @@ export default async function compileSVGs(mixerOptions = null) {
        console.time(timeLabel);

        try {
+            if (!Array.isArray(includes)) {
+                includes = [ includes ];
+            }
+
            includes = resolve(includes);
            outfile  = resolve(outfile);

--- a/build/tasks/versions.js
+++ b/build/tasks/versions.js
@@ -1,6 +1,7 @@
-import loconfig from '../utils/config.js';
-import message from '../utils/message.js';
-import resolve from '../utils/template.js';
+import loconfig from '../helpers/config.js';
+import message from '../helpers/message.js';
+import resolve from '../helpers/template.js';
+import { merge } from '../utils/index.js';
 import { randomBytes } from 'node:crypto';
 import events from 'node:events';
 import {
@@ -94,11 +95,22 @@ export default async function bumpVersions(versionOptions = null) {
        versionOptions !== developmentVersionOptions &&
        versionOptions !== productionVersionOptions
    ) {
-        versionOptions = Object.assign({}, defaultVersionOptions, versionOptions);
+        versionOptions = merge({}, defaultVersionOptions, versionOptions);
    }

    const queue = new Map();

+    /**
+     * @async
+     * @param  {object}         entry          - The entrypoint to process.
+     * @param  {string}         entry.outfile  - The file to write to.
+     * @param  {?string}        [entry.label]  - The task label.
+     *     Defaults to the outfile name.
+     * @param  {?string}        [entry.format] - The version number format.
+     * @param  {?string}        [entry.key]    - The JSON field name assign the version number to.
+     * @param  {?string|number} [entry.pretty] - The white space to use to format the JSON file.
+     * @return {Promise}
+     */
    loconfig.tasks.versions.forEach(({
        outfile,
        label = null,
--- a/build/utils/config.js
+++ b/build/utils/config.js
@@ -1,64 +0,0 @@
-/**
- * @file Provides simple user configuration options.
- */
-
-import loconfig from '../../loconfig.json';
-
-let usrconfig;
-
-try {
-    usrconfig = await import('../../loconfig.local.json');
-    usrconfig = usrconfig.default;
-
-    merge(loconfig, usrconfig);
-} catch (err) {
-    // do nothing
-}
-
-export default loconfig;
-
-/**
- * Creates a new object with all nested object properties
- * merged into it recursively.
- *
- * @param  {object}   target     - The target object.
- * @param  {object[]} ...sources - The source object(s).
- * @throws {TypeError} If the target and source are the same.
- * @return {object} Returns the `target` object.
- */
-export function merge(target, ...sources) {
-    for (const source of sources) {
-        if (target === source) {
-            throw new TypeError(
-                'Cannot merge, target and source are the same'
-            );
-        }
-
-        for (const key in source) {
-            if (source[key] != null) {
-                if (isObjectLike(source[key]) && isObjectLike(target[key])) {
-                    merge(target[key], source[key]);
-                    continue;
-                } else if (Array.isArray(source[key]) && Array.isArray(target[key])) {
-                    target[key] = target[key].concat(source[key]);
-                    continue;
-                }
-            }
-
-            target[key] = source[key];
-        }
-    }
-
-    return target;
-}
-
-/**
- * Determines whether the passed value is an `Object`.
- *
- * @param  {*} value - The value to be checked.
- * @return {boolean} Returns `true` if the value is an `Object`,
- *     otherwise `false`.
- */
-function isObjectLike(value) {
-    return (value != null && typeof value === 'object');
-}
--- a/build/utils/glob.js
+++ b/build/utils/glob.js
@@ -1,95 +0,0 @@
-/**
- * @file Retrieve the first available glob library.
- *
- * Note that options vary between libraries.
- *
- * Candidates:
- *
- * - {@link https://npmjs.com/package/tiny-glob tiny-glob}
- * - {@link https://npmjs.com/package/globby globby}
- * - {@link https://npmjs.com/package/fast-glob fast-glob}
- * - {@link https://npmjs.com/package/glob glob}
- */
-
-import { promisify } from 'node:util';
-
-/**
- * @type {string[]} A list of packages to attempt import.
- */
-const candidates = [
-    'tiny-glob',
-    'globby',
-    'fast-glob',
-    'glob',
-];
-
-let glob;
-
-try {
-    glob = await importGlob();
-} catch (err) {
-    // do nothing
-}
-
-export default glob;
-
-/**
- * Imports the first available glob function.
- *
- * @throws {TypeError} If no glob library was found.
- * @return {function}
- */
-async function importGlob() {
-    let glob, module;
-
-    for (let name of candidates) {
-        try {
-            module = await import(name);
-
-            if (typeof module.default !== 'function') {
-                throw new TypeError(`Expected ${name} to be a function`);
-            }
-
-            /**
-             * Wrap the function to ensure
-             * a common pattern.
-             */
-            switch (name) {
-                case 'tiny-glob':
-                    return createArrayableGlob(module.default, {
-                        filesOnly: true
-                    });
-
-                case 'glob':
-                    return promisify(module.default);
-
-                default:
-                    return module.default;
-            }
-        } catch (err) {
-            // swallow this error; skip to the next candidate.
-        }
-    }
-
-    throw new TypeError(
-        `No glob library was found, expected one of: ${candidates.join(', ')}`
-    );
-}
-
-/**
- * Creates a wrapper function for the glob function
- * to provide support for arrays of patterns.
- *
- * @param  {function} glob    - The glob function.
- * @param  {object}   options - The glob options.
- * @return {function}
- */
-function createArrayableGlob(glob, options) {
-    return (patterns, options) => {
-        const globs = patterns.map((pattern) => glob(pattern, options));
-
-        return Promise.all(globs).then((files) => {
-            return [].concat.apply([], files);
-        });
-    };
-}
--- a/build/utils/index.js
+++ b/build/utils/index.js
@@ -0,0 +1,115 @@
+/**
+ * @file Provides generic functions and constants.
+ */
+
+/**
+ * @type {RegExp} - Match all special characters.
+ */
+const regexUnescaped = /[\[\]\{\}\(\)\-\*\+\?\.\,\\\^\$\|\#\s]/g;
+
+/**
+ * Quotes regular expression characters.
+ *
+ * @param  {string} str - The input string.
+ * @return {string} Returns the quoted (escaped) string.
+ */
+function escapeRegExp(str) {
+    return str.replace(regexUnescaped, '\\$&');
+}
+
+/**
+ * Creates a new object with all nested object properties
+ * concatenated into it recursively.
+ *
+ * Nested keys are flattened into a property path:
+ *
+ * ```js
+ * {
+ *   a: {
+ *     b: {
+ *       c: 1
+ *     }
+ *   },
+ *   d: 1
+ * }
+ * ```
+ *
+ * ```js
+ * {
+ *   "a.b.c": 1,
+ *   "d": 1
+ * }
+ * ```
+ *
+ * @param  {object} input  - The object to flatten.
+ * @param  {string} prefix - The parent key prefix.
+ * @param  {object} target - The object that will receive the flattened properties.
+ * @return {object} Returns the `target` object.
+ */
+function flatten(input, prefix, target = {}) {
+    for (const key in input) {
+        const field = (prefix ? prefix + '.' + key : key);
+
+        if (isObjectLike(input[key])) {
+            flatten(input[key], field, target);
+        } else {
+            target[field] = input[key];
+        }
+    }
+
+    return target;
+}
+
+/**
+ * Determines whether the passed value is an `Object`.
+ *
+ * @param  {*} value - The value to be checked.
+ * @return {boolean} Returns `true` if the value is an `Object`,
+ *     otherwise `false`.
+ */
+function isObjectLike(value) {
+    return (value != null && typeof value === 'object');
+}
+
+/**
+ * Creates a new object with all nested object properties
+ * merged into it recursively.
+ *
+ * @param  {object}   target     - The target object.
+ * @param  {object[]} ...sources - The source object(s).
+ * @throws {TypeError} If the target and source are the same.
+ * @return {object} Returns the `target` object.
+ */
+function merge(target, ...sources) {
+    for (const source of sources) {
+        if (target === source) {
+            throw new TypeError(
+                'Cannot merge, target and source are the same'
+            );
+        }
+
+        for (const key in source) {
+            if (source[key] != null) {
+                if (isObjectLike(source[key]) && isObjectLike(target[key])) {
+                    merge(target[key], source[key]);
+                    continue;
+                } else if (Array.isArray(source[key]) && Array.isArray(target[key])) {
+                    target[key] = target[key].concat(source[key]);
+                    continue;
+                }
+            }
+
+            target[key] = source[key];
+        }
+    }
+
+    return target;
+}
+
+export {
+    escapeRegExp,
+    flatten,
+    isObjectLike,
+    merge,
+    regexUnescaped,
+};
--- a/build/utils/postcss.js
+++ b/build/utils/postcss.js
@@ -1,27 +0,0 @@
-/**
- * @file If available, returns the PostCSS Processor creator and
- * any the Autoprefixer PostCSS plugin.
- */
-
-let postcss, autoprefixer;
-
-try {
-    postcss = await import('postcss');
-    postcss = postcss.default;
-
-    autoprefixer = await import('autoprefixer');
-    autoprefixer = autoprefixer.default;
-} catch (err) {
-    // do nothing
-}
-
-export default postcss;
-export const pluginsList = [
-    autoprefixer,
-];
-export const pluginsMap = {
-    'autoprefixer': autoprefixer,
-};
-export {
-    autoprefixer
-};
--- a/build/watch.js
+++ b/build/watch.js
@@ -2,10 +2,11 @@ import concatFiles, { developmentConcatFilesArgs } from './tasks/concats.js';
 import compileScripts, { developmentScriptsArgs } from './tasks/scripts.js';
 import compileStyles, { developmentStylesArgs } from './tasks/styles.js' ;
 import compileSVGs, { developmentSVGsArgs } from './tasks/svgs.js';
-import loconfig, { merge } from './utils/config.js';
-import message from './utils/message.js';
-import notification from './utils/notification.js';
-import resolve from './utils/template.js';
+import loconfig from './helpers/config.js';
+import message from './helpers/message.js';
+import notification from './helpers/notification.js';
+import resolve from './helpers/template.js';
+import { merge } from './utils/index.js';
 import browserSync from 'browser-sync';
 import { join } from 'node:path';

--- a/docs/development.md
+++ b/docs/development.md
@@ -265,7 +265,7 @@ See [`scripts.js`](../build/tasks/scripts.js) for details.

 ### `styles`

-A wrapper around [node-sass] (with optional support for [Autoprefixer]
+A wrapper around [sass] (with optional support for [Autoprefixer]
 via [PostCSS]) for compiling and minifying Sass into CSS.

 By default, [PostCSS] and [Autoprefixer] are installed with the boilerplate.
@@ -416,7 +416,7 @@ See [`versions.js`](../build/tasks/versions.js) for details.
 [glob]:         https://npmjs.com/package/glob
 [globby]:       https://npmjs.com/package/globby
 [Node]:         https://nodejs.org/
-[node-sass]:    https://npmjs.com/package/node-sass
+[sass]:         https://npmjs.com/package/sass
 [NPM]:          https://npmjs.com/
 [NVM]:          https://github.com/nvm-sh/nvm
 [PostCSS]:      https://npmjs.com/package/postcss
--- a/docs/technologies.md
+++ b/docs/technologies.md
@@ -181,10 +181,7 @@ detection and smooth scrolling with parallax.
 ```js
 import LocomotiveScroll from 'locomotive-scroll';

-this.scroll = new LocomotiveScroll({
-    el: this.el,
-    smooth: true
-});
+this.scroll = new LocomotiveScroll({})
 ````

 Learn more about [Locomotive Scroll][locomotive-scroll].
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
    "author": "Locomotive <info@locomotive.ca>",
    "type": "module",
    "engines": {
-        "node": ">=14.17",
+        "node": ">=17.9",
        "npm": ">=8.0"
    },
    "scripts": {
@@ -14,7 +14,7 @@
        "build": "node --experimental-json-modules --no-warnings build/build.js"
    },
    "dependencies": {
-        "locomotive-scroll": "^4.1.4",
+        "locomotive-scroll": "^5.0.0-beta.8",
        "modujs": "^1.4.2",
        "modularload": "^1.2.6",
        "normalize.css": "^8.0.1",
@@ -24,16 +24,19 @@
        "autoprefixer": "^10.4.13",
        "browser-sync": "^2.27.11",
        "concat": "^1.0.3",
-        "esbuild": "^0.16.17",
+        "esbuild": "^0.17.6",
        "kleur": "^4.1.5",
        "node-notifier": "^10.0.1",
-        "node-sass": "^8.0.0",
        "postcss": "^8.4.21",
        "purgecss": "^5.0.0",
+        "sass": "^1.57.1",
        "svg-mixer": "~2.3.14",
        "tiny-glob": "^0.2.9"
    },
    "overrides": {
+        "browser-sync": {
+            "ua-parser-js": "~1.0.33"
+        },
        "svg-mixer": {
            "postcss": "^8.4.20"
        }
--- a/www/assets/scripts/app.js
+++ b/www/assets/scripts/app.js
--- a/www/assets/scripts/app.js.map
+++ b/www/assets/scripts/app.js.map
--- a/www/assets/styles/main.css
+++ b/www/assets/styles/main.css
--- a/www/assets/styles/main.css.map
+++ b/www/assets/styles/main.css.map
--- a/www/form.html
+++ b/www/form.html
@@ -18,8 +18,8 @@
    </head>
    <body data-module-load>
        <div data-load-container>
-            <div class="o-scroll" data-module-scroll="main">
-                <header data-scroll-section>
+            <div data-module-scroll="main">
+                <header>
                    <a href="/"><h1>Locomotive Boilerplate</h1></a>
                    <nav>
                        <ul>
@@ -30,7 +30,7 @@
                    </nav>
                </header>

-                <main data-scroll-section>
+                <main>
                    <div class="o-container">
                        <h1 class="c-heading -h1">Page</h1>

@@ -90,7 +90,7 @@
                    </div>
                </main>

-                <footer data-scroll-section>
+                <footer>
                    <p>Made with <a href="https://github.com/locomotivemtl/locomotive-boilerplate" title="Locomotive Boilerplate" target="_blank" rel="noopener">🚂</a></p>
                </footer>
            </div>
--- a/www/grid.html
+++ b/www/grid.html
@@ -34,8 +34,8 @@

 <body data-module-load>
    <div data-load-container>
-        <div class="o-scroll" data-module-scroll="main">
-            <header data-scroll-section>
+        <div data-module-scroll="main">
+            <header>
                <a href="/">
                    <h1>Locomotive Boilerplate</h1>
                </a>
@@ -48,7 +48,7 @@
                </nav>
            </header>

-            <main data-scroll-section>
+            <main>
                <div class="o-container">
                    <h1 class="c-heading -h1">Hello</h1>

@@ -76,7 +76,7 @@
                </div>
            </main>

-            <footer data-scroll-section>
+            <footer>
                <p>Made with <a href="https://github.com/locomotivemtl/locomotive-boilerplate"
                        title="Locomotive Boilerplate" target="_blank" rel="noopener">🚂</a></p>
            </footer>
--- a/www/images.html
+++ b/www/images.html
@@ -18,8 +18,8 @@
    </head>
    <body data-module-load>
        <div data-load-container>
-            <div class="o-scroll" data-module-scroll="main">
-                <header data-scroll-section>
+            <div data-module-scroll="main">
+                <header>
                    <a href="/"><h1>Locomotive Boilerplate</h1></a>
                    <nav>
                        <ul>
@@ -30,7 +30,7 @@
                    </nav>
                </header>

-                <main data-scroll-section>
+                <main>
                    <div class="o-container">
                        <h1 class="c-heading -h1">Images</h1>

@@ -39,84 +39,24 @@

                            <h3 class="c-heading -h3">Basic</h3>

-                            <div style="width: 640px; max-width: 100%;">
-                                <div class="o-ratio u-4:3"><img data-load-src="http://picsum.photos/800/600?v=1" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></div>
-                                <div class="o-ratio u-4:3"><img data-load-src="http://picsum.photos/800/600?v=2" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></div>
-                            </div>
-
-                            <h4 class="c-heading -h3">Using o-ratio & background-image</h3>
-
-                            <div style="width: 480px; max-width: 100%;">
-                                <div class="o-ratio u-16:9" data-load-style="background-size: cover; background-position: center; background-image: url(http://picsum.photos/640/480?v=1);"></div>
-                                <div class="o-ratio u-16:9" data-load-style="background-size: cover; background-position: center; background-image: url(http://picsum.photos/640/480?v=2);"></div>
-                            </div>
-                        </section>
-
-                        <section>
-                            <h3 class="c-heading -h3">Relative to scroll</h3>
-
-                            <h4 class="c-heading -h3">Using o-ratio & img</h3>
+                            <img src="http://picsum.photos/800/600?v=1" alt="" loading="lazy" class="c-image_img" width="800" height="600"/>

                            <div style="width: 640px; max-width: 100%;">
-                                <div class="o-ratio u-4:3">
-                                    <img data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/800/600?v=1" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
-                                </div>
-                                <div class="o-ratio u-4:3">
-                                    <img data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/800/600?v=2" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
-                                </div>
-                                <div class="o-ratio u-4:3">
-                                    <img data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/800/600?v=3" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
-                                </div>
-                                <div class="o-ratio u-4:3">
-                                    <img data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/800/600?v=4" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
-                                </div>
-                                <div class="o-ratio u-4:3">
-                                    <img data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/800/600?v=5" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
-                                </div>
+                                <div class="c-image"><img src="http://picsum.photos/800/600?v=2" alt="" loading="lazy" class="c-image_img" width="800" height="600"/></div>
+                                <div class="c-image"><img src="http://picsum.photos/800/600?v=3" alt="" loading="lazy" class="c-image_img" width="800" height="600"/></div>
                            </div>

-                            <h4 class="c-heading -h3">Using o-ratio & background-image</h3>
+                            <h4 class="c-heading -h3">Using o-ratio</h3>

                            <div style="width: 480px; max-width: 100%;">
-                                <div style="background-size: cover; background-position: center;" class="o-ratio u-16:9" data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/1280/720?v=1"></div>
-                                <div style="background-size: cover; background-position: center;" class="o-ratio u-16:9" data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/1280/720?v=2"></div>
-                                <div style="background-size: cover; background-position: center;" class="o-ratio u-16:9" data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/1280/720?v=3"></div>
-                                <div style="background-size: cover; background-position: center;" class="o-ratio u-16:9" data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/1280/720?v=4"></div>
-                                <div style="background-size: cover; background-position: center;" class="o-ratio u-16:9" data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/1280/720?v=5"></div>
-                            </div>
-
-                            <h4 class="c-heading -h3">Using SVG viewport for ratio</h3>
-
-                            <div style="width: 480px; max-width: 100%;">
-                                <img
-                                    data-scroll
-                                    data-scroll-call="lazyLoad, Scroll, main"
-                                    data-src="http://picsum.photos/640/480?v=6"
-                                    alt=""
-                                    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3C/svg%3E"
-                                />
-
-                                <img
-                                    data-scroll
-                                    data-scroll-call="lazyLoad, Scroll, main"
-                                    data-src="http://picsum.photos/640/480?v=7"
-                                    alt=""
-                                    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3C/svg%3E"
-                                />
-
-                                <img
-                                    data-scroll
-                                    data-scroll-call="lazyLoad, Scroll, main"
-                                    data-src="http://picsum.photos/640/480?v=8"
-                                    alt=""
-                                    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3C/svg%3E"
-                                />
+                                <div class="o-ratio u-4:3"><div class="c-image || o-ratio_content"><img src="http://picsum.photos/800/600?v=4" alt="" loading="lazy" class="c-image_img"/></div></div>
+                                <div class="o-ratio u-4:3"><div class="c-image || o-ratio_content"><img src="http://picsum.photos/800/600?v=5" alt="" loading="lazy" class="c-image_img"/></div></div>
                            </div>
                        </section>
                    </div>
                </main>

-                 <footer data-scroll-section>
+                 <footer>
                    <p>Made with <a href="https://github.com/locomotivemtl/locomotive-boilerplate" title="Locomotive Boilerplate" target="_blank" rel="noopener">🚂</a></p>
                </footer>
            </div>
--- a/www/index.html
+++ b/www/index.html
@@ -42,8 +42,8 @@
 <body data-module-load>

    <div data-load-container>
-        <div class="o-scroll" data-module-scroll="main">
-            <header data-scroll-section>
+        <div data-module-scroll="main">
+            <header>
                <a href="/">
                    <h1>Locomotive Boilerplate</h1>
                </a>
@@ -56,13 +56,13 @@
                </nav>
            </header>

-            <main data-module-example data-scroll-section>
+            <main data-module-example>
                <div class="o-container">
                    <h1 class="c-heading -h1">Hello</h1>
                </div>
            </main>

-            <footer data-scroll-section>
+            <footer>
                <p>Made with <a href="https://github.com/locomotivemtl/locomotive-boilerplate"
                        title="Locomotive Boilerplate" target="_blank" rel="noopener">🚂</a></p>
            </footer>
Author	SHA1	Message	Date
Pier-Luc Cossette	3e12fc31f0	Add natif lazy-load	2023-08-03 13:42:36 -04:00
Deven Caron	70b36052e6	Merge pull request #154 from locomotivemtl/dependabot/npm_and_yarn/socket.io-parser-4.2.4 Bump socket.io-parser from 4.2.2 to 4.2.4	2023-07-31 10:56:07 -04:00
dependabot[bot]	f1e2e2270f	Bump socket.io-parser from 4.2.2 to 4.2.4 Bumps [socket.io-parser](https://github.com/socketio/socket.io-parser) from 4.2.2 to 4.2.4. - [Release notes](https://github.com/socketio/socket.io-parser/releases) - [Changelog](https://github.com/socketio/socket.io-parser/blob/main/CHANGELOG.md) - [Commits](https://github.com/socketio/socket.io-parser/compare/4.2.2...4.2.4) --- updated-dependencies: - dependency-name: socket.io-parser dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com>	2023-07-31 14:30:51 +00:00
Deven Caron	13735c64f9	Merge pull request #153 from locomotivemtl/feature/update-scroll Update locomotive scroll v5	2023-07-31 10:30:17 -04:00
Deven Caron	659ef3767b	Fix img scroll lazyload $el	2023-07-31 10:29:02 -04:00
Deven Caron	e162af17dd	Update LS styles vendor import	2023-07-31 10:28:35 -04:00
Lucas Vallenet	e16ba2ca16	Import locomotive scroll CSS / Removed unused styles (scroll, scorllbar) / Update DOM Markup / Update doc	2023-06-12 09:36:14 +02:00
Lucas Vallenet	43a5eb1ad3	Update locomotive scroll v5	2023-06-08 15:44:35 +02:00
Lucas Vallenet	217a1adba7	Merge scss functions / Fix strip-unit	2023-06-08 10:57:59 +02:00
Lucas Vallenet	a11e98e31e	Fix js FONT var error	2023-05-22 09:48:34 +02:00
Deven Caron	6ef90dbe11	Merge pull request #149 from locomotivemtl/dependabot/npm_and_yarn/engine.io-6.4.2 Bump engine.io from 6.4.0 to 6.4.2	2023-05-12 10:41:24 -04:00
Deven Caron	6726d665f2	Merge pull request #148 from locomotivemtl/feature/scss-colors Color as list	2023-05-12 10:39:38 -04:00
Deven Caron	dca6c5de1d	Merge branch 'master' into feature/scss-colors	2023-05-12 10:39:10 -04:00
Deven Caron	05a00c4258	Merge pull request #146 from locomotivemtl/feature/css-math Replace fractions with math.div in scss files	2023-05-12 10:36:33 -04:00
Deven Caron	7517be0e76	Merge pull request #147 from locomotivemtl/feature/js-config Feature/js config	2023-05-12 10:36:08 -04:00
dependabot[bot]	dcec21adf4	Bump engine.io from 6.4.0 to 6.4.2 Bumps [engine.io](https://github.com/socketio/engine.io) from 6.4.0 to 6.4.2. - [Release notes](https://github.com/socketio/engine.io/releases) - [Changelog](https://github.com/socketio/engine.io/blob/main/CHANGELOG.md) - [Commits](https://github.com/socketio/engine.io/compare/6.4.0...6.4.2) --- updated-dependencies: - dependency-name: engine.io dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com>	2023-05-04 01:31:42 +00:00
Lucas Vallenet	297e0b4ec8	Update color function	2023-04-21 11:34:15 +02:00
Lucas Vallenet	9a2083d894	Color as list with function	2023-04-19 15:37:52 +02:00
Lucas Vallenet	1a81c865ae	Config namespaces	2023-04-05 15:06:51 -04:00
Lucas Vallenet	d6b5784cdd	Replace fractions with math.div in scss files	2023-04-05 14:40:28 +02:00
Lucas Vallenet	8894664743	Update js config values and use it within whole app	2023-04-05 12:23:25 +02:00
Deven Caron	8aac2ffea6	Merge pull request #132 from locomotivemtl/feature/build-task-chores Various fixes and changes to build utilities	2023-03-06 09:07:04 -05:00
Chauncey McAskill	349d110dee	Revert merging of `usrconfig` to use `let` declaration	2023-03-03 13:13:31 -05:00
Chauncey McAskill	7be5e48f22	Fix import of `merge` util in 'watch.js' The `merge` function is provided by 'utils/index.js'.	2023-03-03 13:07:47 -05:00
Chauncey McAskill	1ee315663e	Fix glob.js and improve documentation Documented API inconsistencies between supported glob libraries (expected/supported parameters and return types). Fixed API inconsistencies between 'tiny-glob', 'globby', and 'glob', to match 'fast-glob'. Fixed broken support for preset options for 'tiny-glob'.	2023-03-03 13:04:22 -05:00
Chauncey McAskill	89bb00790f	Update postcss.js documentation	2023-03-03 13:04:22 -05:00
Chauncey McAskill	9db0c71a82	Move helpers/utils exports to end of file Improves readability by always expecting exports at the end of the file.	2023-03-03 13:04:22 -05:00
Chauncey McAskill	7742bbb9d0	Add block comments to task iteratees	2023-03-03 13:04:22 -05:00
Chauncey McAskill	c9a9209b4b	Refactor build utilities Separated generic functions from build helpers. Changed: - Moved 'utils/.js' to 'helpers/.js' - From 'utils/config.js': - Moved function `merge` to 'utils/index.js'. - Moved function `isObjectLike` to 'utils/index.js'. - From 'utils/template.js': - Moved function `flatten` to 'utils/index.js'. - Moved function `escapeRegExp` to 'utils/index.js'. - From 'tasks/styles.js': - Moved function `createPostCSSProcessor` to 'helpers/postcss.js' as `createProcessor`. - Replaced function `Object.assign` with `merge` for task options parsing in all tasks.	2023-03-03 13:04:22 -05:00
Chauncey McAskill	9d758f3b2c	Improve postcss.js Added constant `supportsPostCSS` to provide a boolean to check if PostCSS is available.	2023-03-03 13:04:22 -05:00
Chauncey McAskill	0738dd6491	Improve glob.js Added constant `supportsGlob` to provide a boolean to check if a glob function is available.	2023-03-03 13:04:22 -05:00
Chauncey McAskill	a4656f59ed	Improve concats.js, scripts.js, svgs.js Added: - Condition to cast `includes` into an array. Removed: - Variable `files` in favour of reusing `includes` in 'concats.js'.	2023-03-03 13:04:20 -05:00
Deven Caron	7ff6094e40	Move `sass` to dev dependencies	2023-03-03 10:49:57 -05:00
Chauncey McAskill	3fee6f4888	Update NPM depdencies Updated: - browser-sync v2.27.5 → v2.27.11 - esbuild v0.16.17 → v0.17.6 - engine.io v3.5.0 → v6.4.0 - qs v6.2.3 → v6.11.0 Changed: - Overrode ua-parser-js constraint in browser-sync from `1.0.2` to `~1.0.33` to fix security notice.	2023-02-09 10:52:26 -05:00
Deven Caron	f774482255	Update README node version	2023-02-09 10:21:39 -05:00
Deven Caron	b7d9311ac6	Remove container width; replace with padding	2023-02-09 10:18:47 -05:00
Deven Caron	c22a006079	Merge pull request #139 from locomotivemtl/feature/update-node-version Update node version to v17.9 and switch from node-sass to sass	2023-02-09 10:15:42 -05:00
Deven Caron	af57ebd9cb	Merge branch 'master' into feature/update-node-version	2023-02-09 10:11:24 -05:00
Deven Caron	c82e9916d0	Merge branch 'master' into feature/update-node-version	2023-02-09 10:05:25 -05:00
Deven Caron	943324220a	Downgrade to node v17.9	2023-02-09 10:00:31 -05:00
Deven Caron	477cec7763	Merge pull request #141 from locomotivemtl/feature/optimize-grid Optimise grid-column loops / Use css vars for grid columns	2023-02-09 09:08:35 -05:00
Deven Caron	5d38685460	Merge branch 'master' into feature/optimize-grid	2023-02-09 09:07:35 -05:00
Deven Caron	9079d735bc	Merge pull request #138 from locomotivemtl/feature/css-variables Feature / CSS Variables	2023-02-09 09:02:59 -05:00
Deven Caron	87238fcdd5	Merge branch 'master' into feature/css-variables	2023-02-09 09:01:24 -05:00
Deven Caron	2f75d8f3d2	Merge pull request #142 from locomotivemtl/dependabot/npm_and_yarn/http-cache-semantics-4.1.1 Bump http-cache-semantics from 4.1.0 to 4.1.1	2023-02-07 09:30:26 -05:00
dependabot[bot]	0346a15b57	Bump http-cache-semantics from 4.1.0 to 4.1.1 Bumps [http-cache-semantics](https://github.com/kornelski/http-cache-semantics) from 4.1.0 to 4.1.1. - [Release notes](https://github.com/kornelski/http-cache-semantics/releases) - [Commits](https://github.com/kornelski/http-cache-semantics/compare/v4.1.0...v4.1.1) --- updated-dependencies: - dependency-name: http-cache-semantics dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com>	2023-02-04 05:43:43 +00:00
Deven Caron	a2d658bc13	Remove log to prevent throwing unwanted errors	2023-02-02 10:14:48 -05:00
Deven Caron	7c1b61eda9	Add build config dynamic import assertation type	2023-02-02 10:00:20 -05:00
Lucas Vallenet	1fe30a9837	Optimize grid-column loops / Use css vars for grid columns	2023-02-01 10:23:43 +01:00
Deven Caron	e4ae03a94c	Remove unused sass env function	2023-01-31 15:37:40 -05:00
Deven Caron	3cde7d40ee	Update readme	2023-01-31 14:15:56 -05:00
Deven Caron	d1d4fb5fe5	Bump node-version & upgrade node-sass to sass	2023-01-31 13:57:51 -05:00
Lucas Vallenet	be71474633	Remove duplicate / Update functions descriptions	2023-01-05 09:58:01 +01:00
Lucas Vallenet	810df92a61	Fix functions.scss error	2023-01-04 14:41:25 +01:00
Lucas Vallenet	aba77ea2d9	Add default CSS Variables	2023-01-04 11:21:43 +01:00
Lucas Vallenet	bf28fe21a3	Strip breakpoint unit from responsive-type	2023-01-04 11:02:32 +01:00
Lucas Vallenet	7b3cefd8df	Add usefull scss functions	2023-01-04 10:50:36 +01:00