Declare REGISTERED_CUSTOM_EVENTS as a const to avoid altering window global object

.gitignore

@@ -3,11 +3,3 @@ node_modules
 Thumbs.db
 loconfig.*.json
 !loconfig.example.json
-.prettierrc
-
-www/assets/scripts/*
-!www/assets/scripts/.gitkeep
-www/assets/styles/*
-!www/assets/styles/.gitkeep
-
-assets.json

.nvmrc

@@ -1 +1 @@
-v20
+v14.17

README.md

@@ -15,7 +15,6 @@
 * Uses [SVG Mixer] for processing SVG files and generating spritesheets.
 * Uses [ITCSS] for a sane and scalable CSS architecture.
 * Uses [Locomotive Scroll] for smooth scrolling with parallax effects.
-* Uses a custom [grid system](docs/grid.md) for layout creation.
 
 Learn more about [languages and technologies](docs/technologies.md).
 
@@ -23,8 +22,8 @@ Learn more about [languages and technologies](docs/technologies.md).
 
 Make sure you have the following installed:
 
-* [Node] — at least 20, the latest LTS is recommended.
-* [NPM] — at least 10, the latest LTS is recommended.
+* [Node] — at least 14.17, the latest LTS is recommended.
+* [NPM] — at least 6.0, the latest LTS is recommended.
 
 > 💡 You can use [NVM] to install and use different versions of Node via the command-line.
 
@@ -85,7 +84,6 @@ Learn more about [development and building](docs/development.md).
 
 * [Development and building](docs/development.md)
 * [Languages and technologies](docs/technologies.md)
-* [Grid system](docs/grid.md)
 
 [BrowserSync]:       https://npmjs.com/package/browser-sync
 [ESBuild]:           https://npmjs.com/package/esbuild

assets/scripts/app.js

@@ -1,137 +1,35 @@
 import modular from 'modujs';
 import * as modules from './modules';
 import globals from './globals';
-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';
+import { html } from './utils/environment';
 
 const app = new modular({
-    modules,
+    modules: modules
 });
 
-function init() {
-    bindEvents();
-    globals();
-    setViewportSizes();
-
-    app.init(app);
-
-    $html.classList.add(CSS_CLASS.LOADED, CSS_CLASS.READY);
-    $html.classList.remove(CSS_CLASS.LOADING);
-
-    /**
-     * Debug focus
-     */
-    // document.addEventListener(
-    //     "focusin",
-    //     function () {
-    //         console.log('focused: ', document.activeElement)
-    //     }, true
-    // );
-
-    /**
-     * Eagerly load the following fonts.
-     */
-    if (isFontLoadingAPIAvailable) {
-        loadFonts(FONT.EAGER, ENV.IS_DEV).then((eagerFonts) => {
-            $html.classList.add(CSS_CLASS.FONTS_LOADED);
-
-            /**
-             * Debug fonts loading
-             */
-            // 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));
-            //     console.groupEnd();
-            //     console.group('State of all fonts:');
-            //     document.fonts.forEach(font => console.log(font.family, font.style, font.weight, font.status));
-            //     console.groupEnd();
-            // }
-        });
-    }
-}
-
-////////////////
-// Global events
-////////////////
-function bindEvents() {
-
-    // Resize event
-    const resizeEndEvent = new CustomEvent(CUSTOM_EVENT.RESIZE_END)
-    window.addEventListener(
-        "resize",
-        debounce(() => {
-            window.dispatchEvent(resizeEndEvent)
-        }, 200, false)
-    )
-    window.addEventListener(
-        "resize",
-        onResize
-    )
-}
-
-function onResize() {
-    setViewportSizes()
-}
-
-function setViewportSizes() {
-
-    // Document styles
-    const documentStyles = document.documentElement.style;
-
-    // Viewport width
-    const vw = document.body.clientWidth * 0.01;
-    documentStyles.setProperty('--vw', `${vw}px`);
-
-    // Return if browser supports vh, svh, dvh, & lvh
-    if (ENV.SUPPORTS_VH) {
-        return
-    }
-
-    // Viewport height
-    const svh = document.documentElement.clientHeight * 0.01;
-    documentStyles.setProperty('--svh', `${svh}px`);
-
-    const dvh = window.innerHeight * 0.01;
-    documentStyles.setProperty('--dvh', `${dvh}px`);
-
-    if (document.body) {
-        const fixed = document.createElement('div');
-        fixed.style.width = '1px';
-        fixed.style.height = '100vh';
-        fixed.style.position = 'fixed';
-        fixed.style.left = '0';
-        fixed.style.top = '0';
-        fixed.style.bottom = '0';
-        fixed.style.visibility = 'hidden';
-
-        document.body.appendChild(fixed);
-
-        var fixedHeight = fixed.clientHeight;
-
-        fixed.remove();
-
-        const lvh = fixedHeight * 0.01;
-
-        documentStyles.setProperty('--lvh', `${lvh}px`);
-    }
-}
-
-////////////////
-// Execute
-////////////////
-window.addEventListener('load', () => {
+window.onload = (event) => {
     const $style = document.getElementById('main-css');
 
     if ($style) {
         if ($style.isLoaded) {
             init();
         } else {
-            $style.addEventListener('load', init);
+            $style.addEventListener('load', (event) => {
+                init();
+            });
         }
     } else {
         console.warn('The "main-css" stylesheet not found');
     }
-});
+};
+
+function init() {
+    globals();
+
+    app.init(app);
+
+    html.classList.add('is-loaded');
+    html.classList.add('is-ready');
+    html.classList.remove('is-loading');
+}
+

assets/scripts/config.js

@@ -1,65 +0,0 @@
-/**
- * > When using the esBuild API, all `process.env.NODE_ENV` expressions
- * > are automatically defined to `"production"` if all minification
- * > options are enabled and `"development"` otherwise. This only happens
- * > if `process`, `process.env`, and `process.env.NODE_ENV` are not already
- * > defined. This substitution is necessary to avoid code crashing instantly
- * > (since `process` is a Node API, not a web API).
- * > — https://esbuild.github.io/api/#platform
- */
-
-const NODE_ENV = process.env.NODE_ENV
-const IS_MOBILE = window.matchMedia('(any-pointer:coarse)').matches
-
-// Main environment variables
-const ENV = Object.freeze({
-    // Node environment
-    NAME: NODE_ENV,
-    IS_PROD: NODE_ENV === 'production',
-    IS_DEV: NODE_ENV === 'development',
-
-    // Device
-    IS_MOBILE,
-    IS_DESKTOP: !IS_MOBILE,
-
-    // Supports
-    SUPPORTS_VH: (
-        'CSS' in window
-        && 'supports' in window.CSS
-        && window.CSS.supports('height: 100svh')
-        && window.CSS.supports('height: 100dvh')
-        && window.CSS.supports('height: 100lvh')
-    )
-})
-
-// 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',
-    LAZY_CONTAINER: 'c-lazy',
-    LAZY_LOADED: '-lazy-loaded',
-    // ...
-})
-
-// 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,
-}

assets/scripts/globals.js

@@ -1,17 +1,5 @@
-import { ENV } from './config';
+import svg4everybody from 'svg4everybody';
 
-// Dynamic imports for development mode only
-let gridHelper;
-(async () => {
-    if (ENV.IS_DEV) {
-        const gridHelperModule = await import('./utils/grid-helper');
-        gridHelper = gridHelperModule?.gridHelper;
-    }
-})();
-
-export default function () {
-    /**
-     * Add grid helper
-     */
-    gridHelper?.();
+export default function() {
+    svg4everybody();
 }

assets/scripts/modules.js

@@ -1,3 +1,2 @@
-export {default as Example} from './modules/Example';
 export {default as Load} from './modules/Load';
 export {default as Scroll} from './modules/Scroll';

assets/scripts/modules/Example.js

@@ -1,6 +1,4 @@
 import { module } from 'modujs';
-import { FONT } from '../config';
-import { whenReady } from '../utils/fonts';
 
 export default class extends module {
     constructor(m) {
@@ -8,10 +6,5 @@ export default class extends module {
     }
 
     init() {
-        whenReady(FONT.EAGER).then((fonts) => this.onFontsLoaded(fonts));
-    }
-
-    onFontsLoaded(fonts) {
-        console.log('Example: Eager Fonts Loaded!', fonts)
     }
 }

assets/scripts/modules/Scroll.js

@@ -1,6 +1,6 @@
-import { module } from 'modujs'
-import { lazyLoadImage } from '../utils/image'
-import LocomotiveScroll from 'locomotive-scroll'
+import { module } from 'modujs';
+import { lazyLoadImage } from '../utils/image';
+import LocomotiveScroll from 'locomotive-scroll';
 
 export default class extends module {
     constructor(m) {
@@ -9,14 +9,18 @@ export default class extends module {
 
     init() {
         this.scroll = new LocomotiveScroll({
-            modularInstance: this,
-        })
+            el: this.el,
+            smooth: true
+        });
 
-        // // Force scroll to top
-        // if (history.scrollRestoration) {
-        //     history.scrollRestoration = 'manual'
-        //     window.scrollTo(0, 0)
-        // }
+        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);
+        })
     }
 
     /**
@@ -37,22 +41,11 @@ export default class extends module {
      * @param {LocomotiveScroll} args - The Locomotive Scroll instance.
      */
     lazyLoad(args) {
-        lazyLoadImage(args.target, null, () => {
+        lazyLoadImage(args.obj.el, null, () => {
             //callback
         })
     }
 
-    scrollTo(params) {
-        let { target, ...options } = params
-
-        options = Object.assign({
-            // Defaults
-            duration: 1,
-        }, options)
-
-        this.scroll?.scrollTo(target, options)
-    }
-
     destroy() {
         this.scroll.destroy();
     }

assets/scripts/utils/array.js

@@ -0,0 +1,101 @@
+import { isArray } from './is';
+
+export function addToArray ( array, value ) {
+    const index = array.indexOf( value );
+
+    if ( index === -1 ) {
+        array.push( value );
+    }
+}
+
+export function arrayContains ( array, value ) {
+    for ( let i = 0, c = array.length; i < c; i++ ) {
+        if ( array[i] == value ) {
+            return true;
+        }
+    }
+
+    return false;
+}
+
+export function arrayContentsMatch ( a, b ) {
+    let i;
+
+    if ( !isArray( a ) || !isArray( b ) ) {
+        return false;
+    }
+
+    if ( a.length !== b.length ) {
+        return false;
+    }
+
+    i = a.length;
+    while ( i-- ) {
+        if ( a[i] !== b[i] ) {
+            return false;
+        }
+    }
+
+    return true;
+}
+
+export function ensureArray ( x ) {
+    if ( typeof x === 'string' ) {
+        return [ x ];
+    }
+
+    if ( x === undefined ) {
+        return [];
+    }
+
+    return x;
+}
+
+export function lastItem ( array ) {
+    return array[ array.length - 1 ];
+}
+
+export function removeFromArray ( array, member ) {
+    if ( !array ) {
+        return;
+    }
+
+    const index = array.indexOf( member );
+
+    if ( index !== -1 ) {
+        array.splice( index, 1 );
+    }
+}
+
+export function toArray ( arrayLike ) {
+    const array = [];
+    let i = arrayLike.length;
+    while ( i-- ) {
+        array[i] = arrayLike[i];
+    }
+
+    return array;
+}
+
+export function findByKeyValue( array, key, value ) {
+    return array.filter(function( obj ) {
+        return obj[key] === value;
+    });
+}
+
+export function cloneArray( array ) {
+    return JSON.parse(JSON.stringify(array));
+}
+
+/**
+ * Shuffles array in place. ES6 version
+ * @param {Array} a items An array containing the items.
+ */
+export function shuffle(a) {
+    for (let i = a.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [a[i], a[j]] = [a[j], a[i]];
+    }
+    return a;
+}
+

assets/scripts/utils/dom.js

@@ -1,7 +0,0 @@
-const $html = document.documentElement
-const $body = document.body
-
-export {
-    $html,
-    $body,
-}

assets/scripts/utils/environment.js

@@ -0,0 +1,8 @@
+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 };

assets/scripts/utils/events.js

@@ -0,0 +1,180 @@
+import { debounce } from './tickers'
+
+/**
+ * @typedef {object} RegisteredCustomEvent
+ *
+ * @property {EventTarget} target - The event target ({@see Window} or {@see Node}).
+ * @property {string}      type   - The custom event name.
+ */
+/** @type {RegisteredCustomEvent[]} */
+
+const REGISTERED_CUSTOM_EVENTS = []
+
+/**
+ * Determines if the given object is the {@see Window}.
+ *
+ * @param  {object} obj
+ * @return {boolean}
+ */
+
+const isWindow = obj => obj === window
+
+
+/**
+ * Determines if the given object implements {@see EventTarget}.
+ *
+ * @param  {object} obj
+ * @return {boolean}
+ */
+
+const isEventTarget = obj => (obj instanceof EventTarget)
+
+
+/**
+ * Determines if the target already has the event attached.
+ *
+ * @param  {EventTarget} target
+ * @param  {string}      type   - The custom event name.
+ * @return {boolean}
+ */
+
+const isCustomEventRegistered = (target, type) => REGISTERED_CUSTOM_EVENTS.some(e => e.target === target && e.type === type)
+
+
+/**
+ * Registers the custom event with the given target, if not already registered.
+ *
+ * @param  {EventTarget} target
+ * @param  {string}      type   - The custom event name.
+ * @return {void}
+ */
+
+const addCustomEvent = (target, type) => {
+    if (!isCustomEventRegistered(target, type)) {
+        REGISTERED_CUSTOM_EVENTS.push({
+            target,
+            type
+        })
+    }
+}
+
+
+/**
+ * Adds a custom "start" event for the given target.
+ *
+ * Internally, this function adds a debounced event listener on
+ * the given `event` to trigger the custom `<event>start` event.
+ *
+ * @param  {EventTarget} target
+ * @param  {string}      type    - The base event name.
+ * @param  {number}      [delay] - The number of milliseconds to wait
+ *     before dispatching the custom event.
+ * @throws Error If the target is invalid.
+ * @throws Error If the custom event is already defined.
+ * @return {void}
+ */
+
+const addStartEvent = (target, type, delay = 200) => {
+
+    const customType = `${type}start`
+
+    if (!isEventTarget(target)) {
+        throw new Error(`addStartEvent: target parameter must be an instance of EventTarget`)
+    }
+
+    if (isCustomEventRegistered(target, customType)) {
+        throw new Error(`addStartEvent: '${customType}' already exists for target parameter`)
+    }
+
+    addCustomEvent(target, customType)
+    const startEvent = new CustomEvent(customType)
+
+    target.addEventListener(type, debounce(() => {
+        target.dispatchEvent(startEvent)
+    }, delay, true))
+}
+
+
+/**
+ * Adds a custom "end" event for the given target.
+ *
+ * Internally, this function adds a debounced event listener on
+ * the given `event` to trigger the custom `<event>end` event.
+ *
+ * @param  {EventTarget} target
+ * @param  {string}      type    - The base event name.
+ * @param  {number}      [delay] - The number of milliseconds to wait
+ *     before dispatching the custom event.
+ * @throws Error If the target is invalid.
+ * @throws Error If the custom event is already defined.
+ * @return {void}
+ */
+
+const addEndEvent = (target, type, delay = 200) => {
+
+    const customType = `${type}end`
+
+    if (!isEventTarget(target)) {
+        throw new Error(`addEndEvent: target parameter must be an instance of EventTarget`)
+    }
+
+    if (isCustomEventRegistered(target, customType)) {
+        throw new Error(`addEndEvent: '${customType}' already exists for target parameter`)
+    }
+
+    addCustomEvent(target, customType)
+    const endEvent = new CustomEvent(customType)
+
+    target.addEventListener(type, debounce(() => {
+        target.dispatchEvent(endEvent)
+    }, delay))
+}
+
+
+/**
+ * Adds custom scroll "up" and "down" events for the given target.
+ *
+ * Internally, this function adds an event listener on
+ * the scroll event to detect the direction and trigger
+ * the custom `scrollup` and `scrolldown` events.
+ *
+ * @param  {EventTarget} [target] - If omitted, the custom event
+ *     if attached to the Window.
+ * @throws Error If the target is invalid.
+ * @return {void}
+ */
+
+const addScrollDirectionEvents = (target = window) => {
+
+    if (!isEventTarget(target)) {
+        throw new Error(`addScrollDirectionEvents: target parameter must be an instance of EventTarget`)
+    }
+
+    let scrollTop = target.scrollTop
+    let previousScrollTop = scrollTop
+    let direction = 0
+    const scrollUp = new CustomEvent('scrollup')
+    const scrollDown = new CustomEvent('scrolldown')
+    const scrollProperty = isWindow(target) ? 'scrollY' : 'scrollTop'
+
+    target.addEventListener('scroll', () => {
+        scrollTop = target[scrollProperty]
+        // Scroll up
+        if (scrollTop < previousScrollTop && direction > -1) {
+            target.dispatchEvent(scrollUp)
+            direction = -1
+        // Scroll down
+        } else if (scrollTop > previousScrollTop && direction < 1) {
+            target.dispatchEvent(scrollDown)
+            direction = 1
+        }
+        previousScrollTop = scrollTop
+    })
+}
+
+
+export {
+    addStartEvent,
+    addEndEvent,
+    addScrollDirectionEvents,
+}

assets/scripts/utils/fonts.js

@@ -1,402 +0,0 @@
-/**
- * Font Faces
- *
- * Provides utilities to facilitate interactions with the CSS Font Loading API.
- *
- * Features functions to:
- *
- * - Retrieve one or more `FontFace` instances based on a font search query.
- * - Check if a `FontFace` instance matches a font search query.
- * - Eagerly load fonts that match a font search query.
- * - Wait until fonts that match a font search query are loaded.
- *
- * References:
- *
- * - {@link https://developer.mozilla.org/en-US/docs/Web/API/CSS_Font_Loading_API}
- */
-
-/**
- * @typedef {Object} FontFaceReference
- *
- * @property {string} family   - The name used to identify the font in our CSS.
- * @property {string} [style]  - The style used by the font in our CSS.
- * @property {string} [weight] - The weight used by the font in our CSS.
- */
-
-const isFontLoadingAPIAvailable = ('fonts' in document);
-
-/**
- * Determines if the given font matches the given `FontFaceReference`.
- *
- * @param {FontFace}          font      - The font to inspect.
- * @param {FontFaceReference} criterion - The object of property values to match.
- *
- * @returns {boolean}
- */
-function conformsToReference(font, criterion)
-{
-    for (const [ key, value ] of Object.entries(criterion)) {
-        switch (key) {
-            case 'family': {
-                if (trim(font[key]) !== value) {
-                    return false;
-                }
-                break;
-            }
-
-            case 'weight': {
-                /**
-                 * Note concerning font weights:
-                 * Loose equality (`==`) is used to compare numeric weights,
-                 * a number (`400`) and a numeric string (`"400"`).
-                 * Comparison between numeric and keyword values is neglected.
-                 *
-                 * @link https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#common_weight_name_mapping
-                 */
-                if (font[key] != value) {
-                    return false;
-                }
-                break;
-            }
-
-            default: {
-                if (font[key] !== value) {
-                    return false;
-                }
-                break;
-            }
-        }
-    }
-
-    return true;
-}
-
-/**
- * Determines if the given font matches the given font shorthand.
- *
- * @param {FontFace} font      - The font to inspect.
- * @param {string}   criterion - The font shorthand to match.
- *
- * @returns {boolean}
- */
-function conformsToShorthand(font, criterion)
-{
-    const family = trim(font.family);
-
-    if (trim(family) === criterion) {
-        return true;
-    }
-
-    if (
-        criterion.endsWith(trim(family)) && (
-            criterion.match(font.weight) ||
-            criterion.match(font.style)
-        )
-    ) {
-        return true;
-    }
-
-    return true;
-}
-
-/**
- * Determines if the given font matches any of the given criteria.
- *
- * @param {FontFace}            font     - The font to inspect.
- * @param {FontFaceReference[]} criteria - A list of objects with property values to match.
- *
- * @returns {boolean}
- */
-function conformsToAnyReference(font, criteria)
-{
-    for (const criterion of criteria) {
-        if (conformsToReference(font, criterion)) {
-            return true;
-        }
-    }
-
-    return false;
-}
-
-/**
- * Returns an iterator of all `FontFace` from `document.fonts` that satisfy
- * the provided `FontFaceReference`.
- *
- * @param {FontFaceReference} font
- *
- * @returns {FontFace[]}
- */
-function findManyByReference(search)
-{
-    const found = [];
-
-    for (const font of document.fonts) {
-        if (conformsToReference(font, search)) {
-            found.push(font);
-        }
-    }
-
-    return found;
-}
-
-/**
- * Returns an iterator of all `FontFace` from `document.fonts` that satisfy
- * the provided font shorthand.
- *
- * @param {string} font
- *
- * @returns {FontFace[]}
- */
-function findManyByShorthand(search)
-{
-    const found = [];
-
-    for (const font of document.fonts) {
-        if (conformsToShorthand(font, search)) {
-            found.push(font);
-        }
-    }
-
-    return found;
-}
-
-/**
- * Returns the first `FontFace` from `document.fonts` that satisfies
- * the provided `FontFaceReference`.
- *
- * @param {FontFaceReference} font
- *
- * @returns {?FontFace}
- */
-function findOneByReference(search)
-{
-    for (const font of document.fonts) {
-        if (conformsToReference(font, criterion)) {
-            return font;
-        }
-    }
-
-    return null;
-}
-
-/**
- * Returns the first `FontFace` from `document.fonts` that satisfies
- * the provided font shorthand.
- *
- * Examples:
- *
- * - "Roboto"
- * - "italic bold 16px Roboto"
- *
- * @param {string} font
- *
- * @returns {?FontFace}
- */
-function findOneByShorthand(search)
-{
-    for (const font of document.fonts) {
-        if (conformsToShorthand(font, search)) {
-            return font;
-        }
-    }
-
-    return null;
-}
-
-/**
- * Returns a `FontFace` from `document.fonts` that satisfies
- * the provided query.
- *
- * @param {FontFaceReference|string} font - Either:
- *     - a `FontFaceReference` object
- *     - a font family name
- *     - a font specification, for example "italic bold 16px Roboto"
- *
- * @returns {?FontFace}
- *
- * @throws {TypeError}
- */
-function getAny(search) {
-    if (search) {
-        switch (typeof search) {
-            case 'string':
-                return findOneByShorthand(search);
-
-            case 'object':
-                return findOneByReference(search);
-        }
-    }
-
-    throw new TypeError(
-        'Expected font query to be font shorthand or font reference'
-    );
-}
-
-/**
- * Returns an iterator of all `FontFace` from `document.fonts` that satisfy
- * the provided queries.
- *
- * @param {FontFaceReference|string|(FontFaceReference|string)[]} queries
- *
- * @returns {FontFace[]}
- *
- * @throws {TypeError}
- */
-function getMany(queries) {
-    if (!Array.isArray(queries)) {
-        queries = [ queries ];
-    }
-
-    const found = new Set();
-
-    queries.forEach((search) => {
-        if (search) {
-            switch (typeof search) {
-                case 'string':
-                    found.add(...findManyByShorthand(search));
-                    return;
-
-                case 'object':
-                    found.add(...findManyByReference(search));
-                    return;
-            }
-        }
-
-        throw new TypeError(
-            'Expected font query to be font shorthand or font reference'
-        );
-    })
-
-    return [ ...found ];
-}
-
-/**
- * Determines if a font face is registered.
- *
- * @param {FontFace|FontFaceReference|string} search - Either:
- *     - a `FontFace` instance
- *     - a `FontFaceReference` object
- *     - a font family name
- *     - a font specification, for example "italic bold 16px Roboto"
- *
- * @returns {boolean}
- */
-function hasAny(search) {
-    if (search instanceof FontFace) {
-        return document.fonts.has(search);
-    }
-
-    return getAny(search) != null;
-}
-
-/**
- * Eagerly load fonts.
- *
- * Most user agents only fetch and load fonts when they are first needed
- * ("lazy loaded"), which can result in a perceptible delay.
- *
- * This function will "eager load" the fonts.
- *
- * @param {(FontFace|FontFaceReference)[]} fontsToLoad - List of fonts to load.
- * @param {boolean}             [debug]     - If TRUE, log details to the console.
- *
- * @returns {Promise}
- */
-async function loadFonts(fontsToLoad, debug = false)
-{
-    if ((fontsToLoad.size ?? fontsToLoad.length) === 0) {
-        throw new TypeError(
-            'Expected at least one font'
-        );
-    }
-
-    return await loadFontsWithAPI([ ...fontsToLoad ], debug);
-}
-
-/**
- * Eagerly load a font using `FontFaceSet` API.
- *
- * @param {FontFace} font
- *
- * @returns {Promise}
- */
-async function loadFontFaceWithAPI(font)
-{
-    return await (font.status === 'unloaded'
-        ? font.load()
-        : font.loaded
-    ).then((font) => font, (err) => font)
-}
-
-/**
- * Eagerly load fonts using `FontFaceSet` API.
- *
- * @param {FontFaceReference[]} fontsToLoad
- * @param {boolean}             [debug]
- *
- * @returns {Promise}
- */
-async function loadFontsWithAPI(fontsToLoad, debug = false)
-{
-    debug && console.group('[loadFonts:API]', fontsToLoad.length, '/', document.fonts.size);
-
-    const fontsToBeLoaded = [];
-
-    for (const fontToLoad of fontsToLoad) {
-        if (fontToLoad instanceof FontFace) {
-            if (!document.fonts.has(fontToLoad)) {
-                document.fonts.add(fontToLoad);
-            }
-
-            fontsToBeLoaded.push(
-                loadFontFaceWithAPI(fontToLoad)
-            );
-        } else {
-            fontsToBeLoaded.push(
-                ...getMany(fontToLoad).map((font) => loadFontFaceWithAPI(font))
-            );
-        }
-    }
-
-    debug && console.groupEnd();
-
-    return await Promise.all(fontsToBeLoaded);
-}
-
-/**
- * Removes quotes from the the string.
- *
- * When a `@font-face` is declared, the font family is sometimes
- * defined in quotes which end up included in the `FontFace` instance.
- *
- * @param {string} value
- *
- * @returns {string}
- */
-function trim(value) {
-    return value.replace(/['"]+/g, '');
-}
-
-/**
- * Returns a Promise that resolves with the specified fonts
- * when they are done loading or failed.
- *
- * @param {FontFaceReference|string|(FontFaceReference|string)[]} queries
- *
- * @returns {Promise}
- */
-async function whenReady(queries)
-{
-    const fonts = getMany(queries);
-
-    return await Promise.all(fonts.map((font) => font.loaded));
-}
-
-export {
-    getAny,
-    getMany,
-    hasAny,
-    isFontLoadingAPIAvailable,
-    loadFonts,
-    whenReady,
-}

assets/scripts/utils/grid-helper.js

@@ -1,138 +0,0 @@
-/**
- * Grid Helper
- *
- * Provides a grid based on the design guidelines and is helpful for web integration.
- *
- * - `Control + g` to toggle the grid
- *
- */
-
-/**
- * @typedef {Object} GridHelperReference
- *
- * @property {string} [gutterCssVar=GRID_HELPER_GUTTER_CSS_VAR] - CSS variable used to define grid gutters.
- * @property {string} [marginCssVar=GRID_HELPER_MARGIN_CSS_VAR] - CSS variable used to define grid margins.
- * @property {string} [rgbaColor=GRID_HELPER_RGBA_COLOR]        - RGBA color for the grid appearence.
- */
-
-const GRID_HELPER_GUTTER_CSS_VAR = '--grid-gutter';
-const GRID_HELPER_MARGIN_CSS_VAR = '--grid-margin';
-const GRID_HELPER_RGBA_COLOR = 'rgba(255, 0, 0, .1)';
-
-/**
- * Create a grid helper
- *
- * @param {GridHelperReference}
- *
- */
-function gridHelper({
-    gutterCssVar = GRID_HELPER_GUTTER_CSS_VAR,
-    marginCssVar = GRID_HELPER_MARGIN_CSS_VAR,
-    rgbaColor = GRID_HELPER_RGBA_COLOR,
-} = {}) {
-    // Set grid container
-    const $gridContainer = document.createElement('div');
-    document.body.append($gridContainer);
-
-    // Set grid appearence
-    setGridHelperColumns($gridContainer, rgbaColor);
-    setGridHelperStyles($gridContainer, gutterCssVar, marginCssVar);
-
-    // Set grid interactivity
-    setGridEvents($gridContainer, rgbaColor);
-}
-
-/**
- * Set grid container styles
- *
- * @param {HTMLElement} $container - DOM Element that contains a list of generated columns
- * @param {string} gutterCssVar    - CSS variable used to define grid gutters.
- * @param {string} marginCssVar    - CSS variable used to define grid margins.
- *
- */
-function setGridHelperStyles($container, gutterCssVar, marginCssVar) {
-    const elStyles = $container.style;
-    elStyles.zIndex = '10000';
-    elStyles.position = 'fixed';
-    elStyles.top = '0';
-    elStyles.left = '0';
-    elStyles.display = 'flex';
-    elStyles.width = '100%';
-    elStyles.height = '100%';
-    elStyles.columnGap = `var(${gutterCssVar}, 0)`;
-    elStyles.paddingLeft = `var(${marginCssVar}, 0)`;
-    elStyles.paddingRight = `var(${marginCssVar}, 0)`;
-    elStyles.pointerEvents = 'none';
-    elStyles.visibility = 'hidden';
-}
-
-/**
- * Set grid columns
- *
- * @param {HTMLElement} $container - DOM Element that will contain a list of generated columns
- * @param {string} rgbaColor       - RGBA color to stylize the generated columns
- *
- */
-function setGridHelperColumns($container, rgbaColor) {
-    // Clear columns
-    $container.innerHTML = '';
-
-    // Loop through columns
-    const columns = Number(
-        window.getComputedStyle($container).getPropertyValue('--grid-columns')
-    );
-
-    let $col;
-    for (var i = 0; i < columns; i++) {
-        $col = document.createElement('div');
-        $col.style.flex = '1 1 0';
-        $col.style.backgroundColor = rgbaColor;
-        $container.appendChild($col);
-    }
-}
-
-/**
- * Set grid events
- *
- * Resize to rebuild columns
- * Keydown/Keyup to toggle the grid display
- *
- * @param {HTMLElement} $container - DOM Element that contains a list of generated columns
- * @param {string} rgbaColor       - RGBA color to stylize the generated columns
- *
- */
-function setGridEvents($container, rgbaColor) {
-    // Handle resize
-    window.addEventListener(
-        'resize',
-        setGridHelperColumns($container, rgbaColor)
-    );
-
-    // Toggle grid
-    let ctrlDown = false;
-    let isActive = false;
-
-    document.addEventListener('keydown', (e) => {
-        if (e.key == 'Control') {
-            ctrlDown = true;
-        } else {
-            if (ctrlDown && e.key == 'g') {
-                if (isActive) {
-                    $container.style.visibility = 'hidden';
-                } else {
-                    $container.style.visibility = 'visible';
-                }
-
-                isActive = !isActive;
-            }
-        }
-    });
-
-    document.addEventListener('keyup', (e) => {
-        if (e.key == 'Control') {
-            ctrlDown = false;
-        }
-    });
-}
-
-export { gridHelper };

assets/scripts/utils/html.js

@@ -1,140 +1,141 @@
 /**
- * Escape HTML string
- * @param {string}  str   - string to escape
- * @return {string} escaped string
+ * @see  https://github.com/ractivejs/ractive/blob/dev/src/utils/html.js
  */
-
-const escapeHtml = str =>
-    str.replace(/[&<>'"]/g, tag => ({
-        '&': '&amp;',
-        '<': '&lt;',
-        '>': '&gt;',
-        "'": '&#39;',
-        '"': '&quot;'
-    }[tag]))
-
+export function escapeHtml(str) {
+    return str
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
+}
 
 /**
- * Unescape HTML string
- * @param {string}  str   - string to unescape
- * @return {string} unescaped string
+ * Prepare HTML content that contains mustache characters for use with Ractive
+ * @param  {string} str
+ * @return {string}
  */
-
-const unescapeHtml = str =>
-    str.replace('&amp;', '&')
-        .replace('&lt;', '<')
-        .replace('&gt;', '>')
-        .replace('&#39;', "'")
-        .replace('&quot;', '"')
-
+export function unescapeHtml(str) {
+    return str
+        .replace(/&lt;/g, '<')
+        .replace(/&gt;/g, '>')
+        .replace(/&amp;/g, '&');
+}
 
 /**
  * Get element data attributes
- * @param {HTMLElement}  node   - node element
- * @return {array}       node data
+ * @param   {DOMElement}  node
+ * @return  {Array}       data
  */
-
-const getNodeData = node => {
-
+export function 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;
-
 }
 
-
-
+const rbrace = /^(?:\{[\w\W]*\}|\[[\w\W]*\])$/;
 
 /**
  * Parse value to data type.
  *
  * @link   https://github.com/jquery/jquery/blob/3.1.1/src/data.js
- * @param  {string} data - value to convert
- * @return {mixed}  value in its natural data type
+ * @param  {string} data - A value to convert.
+ * @return {mixed}  Returns the value in its natural data type.
  */
-
-const rbrace = /^(?:\{[\w\W]*\}|\[[\w\W]*\])$/
-const getData = data => {
+export function getData(data) {
     if (data === 'true') {
-        return true
+        return true;
     }
 
     if (data === 'false') {
-        return false
+        return false;
     }
 
     if (data === 'null') {
-        return null
+        return null;
     }
 
     // Only convert to a number if it doesn't change the string
     if (data === +data+'') {
-        return +data
+        return +data;
     }
 
-    if (rbrace.test(data)) {
-        return JSON.parse(data)
+    if (rbrace.test( data )) {
+        return JSON.parse( data );
     }
 
-    return data
+    return data;
 }
 
-
 /**
  * Returns an array containing all the parent nodes of the given node
- * @param  {HTMLElement}    $el     - DOM Element
- * @return {array}          parent nodes
+ * @param  {object} node
+ * @return {array} parent nodes
  */
-
-const getParents = $el => {
-
+export function getParents(elem) {
     // 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)
+    for ( ; elem && elem !== document; elem = elem.parentNode ) {
+        parents.push(elem);
     }
 
     // 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/
+export function queryClosestParent(elem, selector) {
 
-export {
-    escapeHtml,
-    unescapeHtml,
-    getNodeData,
-    getData,
-    getParents,
-}
+    // 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 ( ; elem && elem !== document; elem = elem.parentNode ) {
+        if ( elem.matches( selector ) ) return elem;
+    }
+    return null;
+
+};

assets/scripts/utils/image.js

@@ -1,41 +1,18 @@
-import { CSS_CLASS } from '../config'
+const LAZY_LOADED_IMAGES = []
 
-/**
- * Get an image meta data
- *
- * @param {HTMLImageElement}    $img   - The image element.
- * @return {object}             The given image meta data
- */
-
-const getImageMetadata = $img => ({
-    url: $img.src,
-    width: $img.naturalWidth,
-    height: $img.naturalHeight,
-    ratio: $img.naturalWidth / $img.naturalHeight,
-})
-
-
-/**
- * Load the given image.
- *
- * @param {string}  url         - The URI to lazy load into $el.
- * @param {object}  options     - An object of options
- * @return {void}
- */
-
-const loadImage = (url, options = {}) => {
+export function loadImage(url, options = {}) {
     return new Promise((resolve, reject) => {
-        const $img = new Image()
+        const $img = new Image();
 
         if (options.crossOrigin) {
-            $img.crossOrigin = options.crossOrigin
+            $img.crossOrigin = options.crossOrigin;
         }
 
         const loadCallback = () => {
             resolve({
                 element: $img,
                 ...getImageMetadata($img),
-            })
+            });
         }
 
         if($img.decode) {
@@ -46,26 +23,31 @@ const loadImage = (url, options = {}) => {
         } else {
             $img.onload = loadCallback
             $img.onerror = (e) => {
-                reject(e)
-            }
+                reject(e);
+            };
             $img.src = url
         }
-    })
+    });
 }
 
+export function getImageMetadata($img) {
+    return {
+        url: $img.src,
+        width: $img.naturalWidth,
+        height: $img.naturalHeight,
+        ratio: $img.naturalWidth / $img.naturalHeight,
+    };
+}
 
 /**
  * Lazy load the given image.
  *
- * @param {HTMLImageElement}    $el      - The image element.
- * @param {?string}             url      - The URI to lazy load into $el.
+ * @param {HTMLImageElement} $el      - The image element.
+ * @param {?string}          url      - The URI to lazy load into $el.
  *     If falsey, the value of the `data-src` attribute on $el will be used as the URI.
- * @param {?function}           callback - A function to call when the image is loaded.
- * @return {void}
+ * @param {?function}        callback - A function to call when the image is loaded.
  */
-
-const LAZY_LOADED_IMAGES = []
-const lazyLoadImage = async ($el, url, callback) => {
+export async function lazyLoadImage($el, url, callback) {
     let src = url ? url : $el.dataset.src
 
     let loadedImage = LAZY_LOADED_IMAGES.find(image => image.url === src)
@@ -74,7 +56,7 @@ const lazyLoadImage = async ($el, url, callback) => {
         loadedImage = await loadImage(src)
 
         if (!loadedImage.url) {
-            return
+            return;
         }
 
         LAZY_LOADED_IMAGES.push(loadedImage)
@@ -85,28 +67,21 @@ const lazyLoadImage = async ($el, url, callback) => {
     }
 
     if ($el.tagName === 'IMG') {
-        $el.src = loadedImage.url
+        $el.src = loadedImage.url;
     } else {
-        $el.style.backgroundImage = `url(${loadedImage.url})`
+        $el.style.backgroundImage = `url(${loadedImage.url})`;
     }
 
     requestAnimationFrame(() => {
-        let lazyParent = $el.closest(`.${CSS_CLASS.LAZY_CONTAINER}`)
+        let lazyParent = $el.closest('.c-lazy');
 
         if(lazyParent) {
-            lazyParent.classList.add(CSS_CLASS.LAZY_LOADED)
+            lazyParent.classList.add('-lazy-loaded')
             lazyParent.style.backgroundImage = ''
         }
 
-        $el.classList.add(CSS_CLASS.LAZY_LOADED)
+        $el.classList.add('-lazy-loaded')
 
         callback?.()
     })
 }
-
-
-export {
-    getImageMetadata,
-    loadImage,
-    lazyLoadImage
-}

assets/scripts/utils/is.js

@@ -1,25 +1,37 @@
-/**
- * Determines if the argument is object-like.
- *
- * A value is object-like if it's not `null` and has a `typeof` result of "object".
- *
- * @param  {*} x - The value to be checked.
- * @return {boolean}
- */
+const toString = Object.prototype.toString;
+const arrayLikePattern = /^\[object (?:Array|FileList)\]$/;
 
-const isObject = x => (x && typeof x === 'object')
-
-/**
- * Determines if the argument is a function.
- *
- * @param  {*} x - The value to be checked.
- * @return {boolean}
- */
-
-const isFunction = x => typeof x === 'function'
-
-
-export {
-    isObject,
-    isFunction
+// thanks, http://perfectionkills.com/instanceof-considered-harmful-or-how-to-write-a-robust-isarray/
+export function isArray ( thing ) {
+    return toString.call( thing ) === '[object Array]';
+}
+
+export function isArrayLike ( obj ) {
+    return arrayLikePattern.test( toString.call( obj ) );
+}
+
+export function isEqual ( a, b ) {
+    if ( a === null && b === null ) {
+        return true;
+    }
+
+    if ( typeof a === 'object' || typeof b === 'object' ) {
+        return false;
+    }
+
+    return a === b;
+}
+
+// http://stackoverflow.com/questions/18082/validate-numbers-in-javascript-isnumeric
+export function isNumeric ( thing ) {
+    return !isNaN( parseFloat( thing ) ) && isFinite( thing );
+}
+
+export function isObject ( thing ) {
+    return ( thing && toString.call( thing ) === '[object Object]' );
+}
+
+export function isFunction( thing ) {
+    const getType = {};
+    return thing && getType.toString.call(thing) === '[object Function]';
 }

assets/scripts/utils/maths.js

@@ -1,54 +1,3 @@
-/**
- * Clamp value
- * @param {number}  min - start value
- * @param {number}  max - end value
- * @param {number}  a   - alpha value
- * @return {number} clamped value
- */
-
-const clamp = (min = 0, max = 1, a) => Math.min(max, Math.max(min, a))
-
-
-/**
- * Calculate lerp
- * @param {number}  x   - start value
- * @param {number}  y   - end value
- * @param {number}  a   - alpha value
- * @return {number} lerp value
- */
-
-const lerp = (x, y, a) => x * (1 - a) + y * a
-
-
-/**
- * Calculate inverted lerp
- * @param {number}  x   - start value
- * @param {number}  y   - end value
- * @param {number}  a   - alpha value
- * @return {number} inverted lerp value
- */
-
-const invlerp = (x, y, a) => clamp((a - x)/(y - x))
-
-
-/**
- * Round number to the specified precision.
- *
- * This function is necessary because `Number.prototype.toPrecision()`
- * and `Number.prototype.toFixed()`
- *
- * @param  {number}  number      - The floating point number to round.
- * @param  {number}  [precision] - The number of digits to appear after the decimal point.
- * @return {number} The rounded number.
- */
-const roundNumber = (number, precision = 2) => {
-    return Number.parseFloat(number.toPrecision(precision));
-}
-
-
-export {
-    clamp,
-    lerp,
-    invlerp,
-    roundNumber
+export function lerp(start, end, amt){
+    return (1 - amt) * start + amt * end
 }

assets/scripts/utils/transform.js

@@ -1,35 +1,21 @@
-/**
- * Get translate function
- * @param {HTMLElement}     $el     - DOM Element
- * @return {number|object}  translate value
- */
-
-const getTranslate = $el => {
-
-    if(!window.getComputedStyle) {
-        return
-    }
-
-    let translate
-    const style = getComputedStyle($el)
-    const transform = style.msTransform || style.webkitTransform || style.MozTransform || style.OTransform || style.transform
-
-    const matrix3D = transform.match(/^matrix3d\((.+)\)$/)
-    if(matrix3D) {
-        translate = parseFloat(matrix3D[1].split(', ')[13])
-    } else {
-        const matrix = transform.match(/^matrix\((.+)\)$/)
-        translate = {
-            x: matrix ? parseFloat(matrix[1].split(', ')[4]) : 0
-            y: matrix ? parseFloat(matrix[1].split(', ')[5]) : 0
-        }
-    }
-
-    return translate
+export function transform(el, transformValue){
+    el.style.webkitTransform = transformValue;
+    el.style.msTransform = transformValue;
+    el.style.transform = transformValue;
 }
 
+export function getTranslate(el){
+    const translate = {}
+    if(!window.getComputedStyle) return;
 
-export {
-    transform,
-    getTranslate
+    const style = getComputedStyle(el);
+    const transform = style.transform || style.webkitTransform || style.mozTransform;
+
+    let mat = transform.match(/^matrix3d\((.+)\)$/);
+    if(mat) return parseFloat(mat[1].split(', ')[13]);
+    mat = transform.match(/^matrix\((.+)\)$/);
+    translate.x = mat ? parseFloat(mat[1].split(', ')[4]) : 0;
+    translate.y = mat ? parseFloat(mat[1].split(', ')[5]) : 0;
+
+    return translate;
 }

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: colorCode(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: math.div(-$checkbox, 2);
+        margin-top: (-$checkbox / 2);
         padding: 0;
         width: $checkbox;
         height: $checkbox;
@@ -71,7 +71,7 @@ $checkbox-icon-color: $input-icon-color;
     }
 
     &::before {
-        background-color: colorCode(lightest);
+        background-color: $color-lightest;
         border: 1px solid lightgray;
     }
 

assets/styles/components/_heading.scss

@@ -2,78 +2,31 @@
 // Components / Headings
 // ==========================================================================
 
-// Font sizes
-// ==========================================================================
-:root {
-    // Default
-    --font-size-h1: #{responsive-value(38px, 90px, $from-xl)};
-    --font-size-h2: #{responsive-value(34px, 72px, $from-xl)};
-    --font-size-h3: #{responsive-value(28px, 54px, $from-xl)};
-    --font-size-h4: #{responsive-value(24px, 40px, $from-xl)};
-    --font-size-h5: #{responsive-value(20px, 30px, $from-xl)};
-    --font-size-h6: #{responsive-value(18px, 23px, $from-xl)};
-}
-
-// Mixins
-// ==========================================================================
-
-@mixin heading {
-    font-family: ff('sans');
-    font-weight: $font-weight-medium;
-}
-
-@mixin heading-h1 {
-    font-size: var(--font-size-h1);
-    line-height: 1.1;
-}
-
-@mixin heading-h2 {
-    font-size: var(--font-size-h2);
-    line-height: 1.1;
-}
-
-@mixin heading-h3 {
-    font-size: var(--font-size-h3);
-    line-height: 1.1;
-}
-
-@mixin heading-h4 {
-    font-size: var(--font-size-h4);
-    line-height: 1.2;
-}
-
-@mixin heading-h5 {
-    font-size: var(--font-size-h5);
-    line-height: 1.2;
-}
-
-@mixin heading-h6 {
-    font-size: var(--font-size-h6);
-    line-height: 1.4;
-}
-
-// Styles
-// ==========================================================================
-
 .c-heading {
-    @include heading;
+    line-height: $line-height-h;
+    margin-bottom: rem(30px);
 
     &.-h1 {
-        @include heading-h1;
+        font-size: rem($font-size-h1);
     }
+
     &.-h2 {
-        @include heading-h2;
+        font-size: rem($font-size-h2);
     }
+
     &.-h3 {
-        @include heading-h3;
+        font-size: rem($font-size-h3);
     }
+
     &.-h4 {
-        @include heading-h4;
+        font-size: rem($font-size-h4);
     }
+
     &.-h5 {
-        @include heading-h5;
+        font-size: rem($font-size-h5);
     }
+
     &.-h6 {
-        @include heading-h6;
+        font-size: rem($font-size-h6);
     }
 }

assets/styles/components/_scrollbar.scss

@@ -9,7 +9,7 @@
     width: 11px;
     height: 100vh;
     transform-origin: center right;
-    transition: transform t(normal), opacity t(normal);
+    transition: transform 0.3s, opacity 0.3s;
     opacity: 0;
 
     &:hover {
@@ -25,7 +25,7 @@
     position: absolute;
     top: 0;
     right: 0;
-    background-color: colorCode(darkest);
+    background-color: $color-darkest;
     opacity: 0.5;
     width: 7px;
     border-radius: 10px;

assets/styles/components/_text.scss

@@ -1,53 +0,0 @@
-// ==========================================================================
-// Components / Texts
-// ==========================================================================
-
-// Font sizes
-// ==========================================================================
-:root {
-    --font-size-body-regular:   #{responsive-value(15px, 17px, $from-lg)};
-    --font-size-body-medium:    #{responsive-value(18px, 23px, $from-lg)};
-    --font-size-body-small:     #{responsive-value(13px, 16px, $from-lg)};
-}
-
-// Mixins
-// ==========================================================================
-@mixin text {
-    font-family: ff('sans');
-}
-
-@mixin body-regular {
-    font-size: var(--font-size-body-regular);
-    font-weight: $font-weight-normal;
-    line-height: 1.2;
-}
-
-@mixin body-medium {
-    font-size: var(--font-size-body-medium);
-    font-weight: $font-weight-normal;
-    line-height: 1.2;
-}
-
-@mixin body-small {
-    font-size: var(--font-size-body-small);
-    font-weight: $font-weight-normal;
-    line-height: 1.2;
-}
-
-// Styles
-// ==========================================================================
-.c-text {
-    @include text;
-
-    &.-body-regular {
-        @include body-regular;
-    }
-
-    &.-body-medium {
-        @include body-medium;
-    }
-
-    &.-body-small {
-        @include body-small;
-    }
-}

assets/styles/elements/_document.scss

@@ -2,10 +2,9 @@
 // Elements / Document
 // ==========================================================================
 
-//
 // Simple page-level setup.
 //
-// 1. Includes fonts
+// 1. Include web fonts
 // 2. Ensure the page always fills at least the entire height of the viewport.
 // 3. Set the default `font-size` and `line-height` for the entire project,
 //    sourced from our default variables.
@@ -14,43 +13,63 @@
 
 html {
     min-height: 100%; // [2]
-    line-height: $line-height; // [3]
+    line-height: $line-height;
     font-family: ff("sans");
     color: $font-color;
+    line-height: $line-height; // [3]
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 
-    @media (max-width: $to-sm) {
+    @media (max-width: $to-small) {
         font-size: $font-size - 2px;
     }
 
-    @media (min-width: $from-sm) and (max-width: $to-lg) {
+    @media (min-width: $from-small) and (max-width: $to-medium) {
+        font-size: $font-size - 2px;
+    }
+
+    @media (min-width: $from-medium) and (max-width: $to-large) {
         font-size: $font-size - 1px;
     }
 
-    @media (min-width: $from-lg) and (max-width: $to-2xl) {
-        font-size: $font-size;
+    @media (min-width: $from-large) and (max-width: $to-huge) {
+        font-size: $font-size; // [1]
     }
 
-    @media (min-width: $from-2xl) and (max-width: $to-3xl) {
+    @media (min-width: $from-huge) and (max-width: $to-gigantic) {
         font-size: $font-size + 1px;
     }
 
-    @media (min-width: $from-3xl) {
+    @media (min-width: $from-gigantic) and (max-width: $to-colossal) {
         font-size: $font-size + 2px;
     }
 
+    @media (min-width: $from-colossal) {
+        font-size: $font-size + 4px;
+    }
+
     &.is-loading {
         cursor: wait;
     }
+
+    &.has-scroll-smooth {
+        overflow: hidden;
+    }
+
+    &.has-scroll-dragging {
+        user-select: none;
+    }
 }
 
 body {
+    .has-scroll-smooth & {
+        overflow: hidden;
+    }
 }
 
 ::selection {
-    background-color: $color-selection-background;
-    color: $color-selection-text;
+    background-color: $selection-background-color;
+    color: $selection-text-color;
     text-shadow: none;
 }
 

assets/styles/elements/_normalize.scss

@@ -1,124 +0,0 @@
-// ==========================================================================
-// Elements / Normalize
-// ==========================================================================
-
-// Modern CSS Normalize
-// Based on the reset by Andy.set with some tweaks.
-// Original by Andy.set: https://piccalil.li/blog/a-more-modern-css-reset/
-// Review by Chris collier: https://chriscoyier.net/2023/10/03/being-picky-about-a-css-reset-for-fun-pleasure/
-
-
-// Box sizing rules
-*,
-*:after,
-*:before {
-    box-sizing: border-box;
-}
-
-// Prevent font size inflation
-html {
-    -moz-text-size-adjust: none;
-    -webkit-text-size-adjust: none;
-    text-size-adjust: none;
-}
-
-// Remove default margin in favour of better control in authored CSS
-p,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-dl,
-dd,
-figure,
-blockquote {
-    margin-block: unset;
-}
-
-// Remove list styles on ul, ol elements with a class, which suggests default styling will be removed
-ul[class],
-ol[class] {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-}
-
-// Set core defaults
-html {
-    line-height: 1.5;
-}
-
-body {
-    margin: unset;
-}
-
-// Set shorter line heights on headings and interactive elements
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-input,
-label,
-button {
-    line-height: 1.1;
-}
-
-// Balance text wrapping on headings
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-    text-wrap: balance;
-}
-
-// Remove a elements default styles if they have a class
-a[class] {
-    color: inherit;
-    text-decoration: none;
-}
-
-// Make assets easier to work with
-img,
-svg,
-canvas,
-picture {
-    display: block;
-    max-inline-size: 100%;
-    block-size: auto;
-}
-
-// Inherit fonts for inputs and buttons
-input,
-button,
-select,
-textarea {
-    font: inherit;
-}
-
-// Make sure textareas without a rows attribute are not tiny
-textarea:not([rows]) {
-    min-height: 10em;
-}
-
-// Anything that has been anchored to should have extra scroll margin
-:target {
-    scroll-margin-block: 1rlh;
-}
-
-// Reduced mootion preference
-@media (prefers-reduced-motion: reduce) {
-    *,
-    *:after,
-    *:before {
-        animation-duration: 0.01ms !important;
-        animation-iteration-count: 1 !important;
-        transition-duration: 0.01ms !important;
-        scroll-behavior: auto !important;
-    }
-}

assets/styles/generic/_button.scss

@@ -0,0 +1,34 @@
+// ==========================================================================
+// Generic / Buttons
+// ==========================================================================
+
+// 1. Allow us to style box model properties.
+// 2. Fixes odd inner spacing in IE7.
+// 3. Reset/normalize some styles.
+// 4. Line different sized buttons up a little nicer.
+// 5. Make buttons inherit font styles (often necessary when styling `input`s as buttons).
+// 6. Force all button-styled elements to appear clickable.
+
+button,
+.c-button {
+    @include u-hocus {
+        text-decoration: none;
+    }
+
+    display: inline-block; // [1]
+    overflow: visible; // [2]
+    margin: 0; // [3]
+    padding: 0;
+    outline: 0;
+    border: 0;
+    background: none transparent;
+    color: inherit;
+    vertical-align: middle; // [4]
+    text-align: center; // [3]
+    text-decoration: none;
+    text-transform: none;
+    font: inherit; // [5]
+    line-height: normal;
+    cursor: pointer; // [6]
+    user-select: none;
+}

assets/styles/generic/_form.scss

@@ -0,0 +1,44 @@
+// ==========================================================================
+// Generic / Forms
+// ==========================================================================
+
+input,
+select,
+textarea {
+    display: block;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    outline: 0;
+    border: 0;
+    border-radius: 0;
+    background: none transparent;
+    color: inherit;
+    font: inherit;
+    line-height: normal;
+    appearance: none;
+}
+
+select {
+    text-transform: none;
+
+    &::-ms-expand {
+        display: none;
+    }
+
+    &::-ms-value {
+        background: none;
+        color: inherit;
+    }
+
+    // // Remove Firefox :focus dotted outline, breaks color inherit
+    // // &:-moz-focusring {
+    // //     color: transparent;
+    // //     text-shadow: 0 0 0 #000000; // Text :focus color
+    // // }
+}
+
+textarea {
+    overflow: auto;
+    resize: vertical;
+}

assets/styles/generic/_generic.scss

@@ -0,0 +1,87 @@
+// ==========================================================================
+// Generic
+// ==========================================================================
+
+html {
+    box-sizing: border-box;
+}
+
+// Add the correct display in IE 10-.
+// 1. Add the correct display in IE.
+
+template, // [1]
+[hidden] {
+    display: none;
+}
+
+*,
+:before,
+:after {
+    box-sizing: inherit;
+}
+
+address {
+    font-style: inherit;
+}
+
+dfn,
+cite,
+em,
+i {
+    font-style: italic;
+}
+
+b,
+strong {
+    font-weight: $font-weight-bold;
+}
+
+a {
+    text-decoration: none;
+
+    svg {
+        pointer-events: none;
+    }
+}
+
+ul,
+ol {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+p,
+figure {
+    margin: 0;
+    padding: 0;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    margin: 0;
+}
+
+// 1. Single taps should be dispatched immediately on clickable elements
+
+a, area, button, input, label, select, textarea, [tabindex] {
+    -ms-touch-action: manipulation; // [1]
+    touch-action: manipulation;
+}
+
+[hreflang] > abbr[title] {
+    text-decoration: none;
+}
+
+table {
+    border-spacing: 0;
+    border-collapse: collapse;
+}
+
+hr {
+    display: block;
+    margin: 1em 0;
+    padding: 0;
+    height: 1px;
+    border: 0;
+    border-top: 1px solid #CCCCCC;
+}

assets/styles/generic/_media.scss

@@ -0,0 +1,52 @@
+// ==========================================================================
+// Generic / Media
+// ==========================================================================
+
+// 1. Setting `vertical-align` removes the whitespace that appears under `img`
+//    elements when they are dropped into a page as-is. Safer alternative to
+//    using `display: block;`.
+
+audio,
+canvas,
+iframe,
+img,
+svg,
+video {
+    vertical-align: middle; // [1]
+}
+
+// Add the correct display in iOS 4-7.
+
+audio:not([controls]) {
+    display: none;
+    height: 0;
+}
+
+// 2. Fluid media for responsive purposes.
+
+img,
+svg {
+    max-width: 100%; // [2]
+    height: auto;
+
+    // 4. If a `width` and/or `height` attribute have been explicitly defined,
+    //    let’s not make the image fluid.
+
+    &[width], // [4]
+    &[height] {
+        // [4]
+        max-width: none;
+    }
+}
+
+// 4. Offset `alt` text from surrounding copy.
+
+img {
+    font-style: italic; // [4]
+}
+
+// 5. SVG elements should fallback to their surrounding text color.
+
+svg {
+    fill: currentColor; // [5]
+}

assets/styles/main.scss

@@ -2,59 +2,59 @@
 // Main
 // ==========================================================================
 
-// Modules
+// Settings
 // ==========================================================================
 
-@use "sass:math";
+@import "settings/config.eases";
+@import "settings/config.colors";
+@import "settings/config";
 
+// ==========================================================================
 // Tools
 // ==========================================================================
 
 @import "tools/maths";
 @import "tools/functions";
 @import "tools/mixins";
-// @import "tools/layout";
-// @import "tools/widths";
+@import "tools/fonts";
+@import "tools/layout";
+@import "tools/widths";
 // @import "tools/family";
 
-// Settings
+// Generic
 // ==========================================================================
 
-@import "settings/config";
-@import "settings/config.breakpoints";
-@import "settings/config.colors";
-@import "settings/config.eases";
-@import "settings/config.fonts";
-@import "settings/config.spacings";
-@import "settings/config.speeds";
-@import "settings/config.zindexes";
-@import "settings/config.variables";
-
-// Vendors
-// ==========================================================================
-@import "../../node_modules/locomotive-scroll/dist/locomotive-scroll";
+@import "node_modules/normalize.css/normalize";
+@import "generic/generic";
+@import "generic/media";
+@import "generic/form";
+@import "generic/button";
 
 // Elements
 // ==========================================================================
 
-@import "elements/normalize";
 @import "elements/document";
 
 // Objects
 // ==========================================================================
 
+@import "objects/scroll";
 @import "objects/container";
 @import "objects/ratio";
 @import "objects/icons";
-@import "objects/grid";
-// @import "objects/layout";
+@import "objects/layout";
+// @import "objects/crop";
 // @import "objects/table";
 
+// Vendors
+// ==========================================================================
+// @import "vendors/vendor";
+
 // Components
 // ==========================================================================
 
+@import "components/scrollbar";
 @import "components/heading";
-@import "components/text";
 @import "components/button";
 @import "components/form";
 
@@ -62,10 +62,9 @@
 // ==========================================================================
 
 @import "utilities/ratio";
-@import "utilities/grid-column";
-// @import "utilities/widths";
+@import "utilities/widths";
 // @import "utilities/align";
 // @import "utilities/helpers";
 // @import "utilities/states";
-@import "utilities/spacing";
+// @import "utilities/spacing";
 // @import "utilities/print";

assets/styles/objects/_container.scss

@@ -13,6 +13,7 @@
 .o-container {
     margin-right: auto;
     margin-left: auto;
-    padding-left: var(--grid-margin);
-    padding-right: var(--grid-margin);
+    padding-right: rem($padding);
+    padding-left: rem($padding);
+    max-width: rem($container-width + ($padding * 2));
 }

assets/styles/objects/_crop.scss

@@ -0,0 +1,83 @@
+// ==========================================================================
+// 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 */

assets/styles/objects/_grid.scss

@@ -1,178 +0,0 @@
-// ==========================================================================
-// Grid helper
-// ==========================================================================
-// Help: https://css-tricks.com/snippets/css/complete-guide-grid/
-//
-/**
- * Usage:
- *
- * ```html
- * <div class="o-grid -col-4 -col-12@from-medium -gutters">
- *     <div class="o-grid_item u-gc-1/2 u-gc-3/9@from-medium">
- *         <p>Hello</p>
- *     </div>
- *     <div class="o-grid_item u-gc-3/4 u-gc-9/13@from-medium">
- *         <p>Hello</p>
- *     </div>
- * </div>
- * ```
- */
-
-.o-grid {
-    display: grid;
-    width: 100%;
-
-    &:is(ul, ol) {
-        margin: 0;
-        padding: 0;
-        list-style: none;
-    }
-
-    // ==========================================================================
-    // 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);
-    }
-
-    &.-col-4 {
-        grid-template-columns: repeat(4, 1fr);
-    }
-
-    &.-col-#{$base-column-nb}\@from-md {
-        @media (min-width: $from-md) {
-            grid-template-columns: repeat(#{$base-column-nb}, 1fr);
-        }
-    }
-
-    // ==========================================================================
-    // Gutters
-    // ==========================================================================
-
-    // Gutters rows and columns
-    &.-gutters {
-        gap: var(--grid-gutter);
-        column-gap: var(--grid-gutter);
-    }
-
-    // ==========================================================================
-    // Modifiers
-    // ==========================================================================
-    &.-full-height {
-        height: 100%;
-    }
-
-    // ==========================================================================
-    // Aligns
-    // ==========================================================================
-
-    // ==========================================================================
-    // Items inside cells
-    //
-    &.-top-items {
-        align-items: start;
-    }
-    &.-right-items {
-        justify-items: end;
-    }
-    &.-bottom-items {
-        align-items: end;
-    }
-    &.-left-items {
-        justify-items: start;
-    }
-    &.-center-items {
-        align-items: center;
-        justify-items: center;
-    }
-    &.-center-items-x {
-        justify-items: center;
-    }
-    &.-center-items-y {
-        align-items: center;
-    }
-    &.-stretch-items {
-        align-items: stretch;
-        justify-items: stretch;
-    }
-
-    // ==========================================================================
-    // Cells
-    //
-    &.-top-cells {
-        align-content: start;
-    }
-    &.-right-cells {
-        justify-content: end;
-    }
-    &.-bottom-cells {
-        align-content: end;
-    }
-    &.-left-cells {
-        justify-content: start;
-    }
-    &.-center-cells {
-        align-content: center;
-        justify-content: center;
-    }
-    &.-center-cells-x {
-        justify-content: center;
-    }
-    &.-center-cells-y {
-        align-content: center;
-    }
-    &.-stretch-cells {
-        align-content: stretch;
-        justify-content: stretch;
-    }
-    &.-space-around-cells {
-        align-content: space-around;
-        justify-content: space-around;
-    }
-    &.-space-around-cells-x {
-        justify-content: space-around;
-    }
-    &.-space-around-cells-y {
-        align-content: space-around;
-    }
-    &.-space-between-cells {
-        justify-content: space-between;
-        align-content: space-between;
-    }
-    &.-space-between-cells-x {
-        justify-content: space-between;
-    }
-    &.-space-between-cells-y {
-        align-content: space-between;
-    }
-    &.-space-evenly-cells {
-        justify-content: space-evenly;
-        align-content: space-evenly;
-    }
-    &.-space-evenly-cells-x {
-        justify-content: space-evenly;
-    }
-    &.-space-evenly-cells-y {
-        align-content: space-evenly;
-    }
-}
-
-// ==========================================================================
-// Grid item
-// ==========================================================================
-// By default, a grid item takes full width of its parent.
-//
-.o-grid_item {
-    grid-column-start: var(--gc-start, 1);
-    grid-column-end: var(--gc-end, -1);
-
-    &.-align-end {
-        align-self: end;
-    }
-}

assets/styles/objects/_icons.scss

@@ -32,7 +32,7 @@
     vertical-align: middle;
 
     svg {
-        --icon-height: calc(var(--icon-width) * math.div(1, (var(--icon-ratio))));
+        --icon-height: calc(var(--icon-width) * (1 / (var(--icon-ratio))));
 
         display: block;
         width: var(--icon-width);
@@ -48,7 +48,7 @@
 // // Logo
 // .svg-logo {
 //     --icon-width: #{rem(100px)};
-//     --icon-ratio: math.div(20, 30); // width/height based on svg viewBox
+//     --icon-ratio: 20/30; // width/height based on svg viewBox
 
 //     // Sizes
 //     .o-icon.-big & {

assets/styles/objects/_scroll.scss

@@ -0,0 +1,7 @@
+// ==========================================================================
+// Objects / Scroll
+// ==========================================================================
+
+.o-scroll {
+    min-height: 100vh;
+}

assets/styles/settings/_config.breakpoints.scss

@@ -1,92 +0,0 @@
-// ==========================================================================
-// Settings / Config / Breakpoints
-// ==========================================================================
-
-// Breakpoints
-// ==========================================================================
-
-$breakpoints: (
-    "2xs": 340px,
-    "xs":  500px,
-    "sm":  700px,
-    "md":  1000px,
-    "lg":  1200px,
-    "xl":  1400px,
-    "2xl": 1600px,
-    "3xl": 1800px,
-    "4xl": 2000px,
-    "5xl": 2400px
-);
-
-// Functions
-// ==========================================================================
-
-// Creates a min-width or max-width media query expression.
-//
-// @param  {string} $breakpoint The breakpoint.
-// @param  {string} $type       Either "min" or "max".
-// @return {string}
-
-@function mq($breakpoint, $type: "min") {
-    @if not map-has-key($breakpoints, $breakpoint) {
-        @warn "Unknown media query breakpoint: `#{$breakpoint}`";
-    }
-
-    $value: map-get($breakpoints, $breakpoint);
-
-    @if ($type == "min") {
-        @return "(min-width: #{$value})";
-    }
-    @if ($type == "max") {
-        @return "(max-width: #{$value - 1px})";
-    }
-
-    @error "Unknown media query type: #{$type}";
-}
-
-// Creates a min-width media query expression.
-//
-// @param  {string} $breakpoint The breakpoint.
-// @return {string}
-
-@function mq-min($breakpoint) {
-    @return mq($breakpoint, "min");
-}
-
-// Creates a max-width media query expression.
-//
-// @param  {string} $breakpoint The breakpoint.
-// @return {string}
-
-@function mq-max($breakpoint) {
-    @return mq($breakpoint, "max");
-}
-
-// Creates a min-width and max-width media query expression.
-//
-// @param  {string} $from  The min-width breakpoint.
-// @param  {string} $until The max-width breakpoint.
-// @return {string}
-
-@function mq-between($breakpointMin, $breakpointMax) {
-    @return "#{mq-min($breakpointMin)} and #{mq-max($breakpointMax)}";
-}
-
-
-// Legacy
-// ==========================================================================
-
-$from-xs:  map-get($breakpoints, "xs")      !default;
-$to-xs:    map-get($breakpoints, "xs") - 1  !default;
-$from-sm:  map-get($breakpoints, "sm")      !default;
-$to-sm:    map-get($breakpoints, "sm") - 1  !default;
-$from-md:  map-get($breakpoints, "md")      !default;
-$to-md:    map-get($breakpoints, "md") - 1  !default;
-$from-lg:  map-get($breakpoints, "lg")      !default;
-$to-lg:    map-get($breakpoints, "lg") - 1  !default;
-$from-xl:  map-get($breakpoints, "xl")      !default;
-$to-xl:    map-get($breakpoints, "xl") - 1  !default;
-$from-2xl: map-get($breakpoints, "2xl")     !default;
-$to-2xl:   map-get($breakpoints, "2xl") - 1 !default;
-$from-3xl: map-get($breakpoints, "3xl")     !default;
-$to-3xl:   map-get($breakpoints, "3xl") - 1 !default;

assets/styles/settings/_config.colors.scss

@@ -1,60 +1,28 @@
-@use 'sass:color';
-
 // ==========================================================================
 // Settings / Config / Colors
 // ==========================================================================
 
 // Palette
-// ==========================================================================
+// =============================================================================
 
-$colors: (
-    primary:        #3297FD,
-    lightest:       #FFFFFF,
-    darkest:        #000000,
-);
+$color-lightest:    #FFFFFF;
+$color-darkest:     #000000;
 
-// Function
-// ==========================================================================
-
-// Returns color code.
-//
-// ```scss
-// .c-box {
-//     color: colorCode(primary);
-// }
-// ```
-//
-// @param  {string} $key - The color key in $colors.
-// @param  {number} $alpha - The alpha for the color value.
-// @return {color}
-
-@function colorCode($key, $alpha: 1) {
-    @if not map-has-key($colors, $key) {
-        @error "Unknown '#{$key}' in $colors.";
-    }
-
-    @if($alpha < 0 or $alpha > 1) {
-        @error "Alpha '#{$alpha}' must be in range [0, 1].";
-    }
-
-    $color: map-get($colors, $key);
-
-    @return rgba($color, $alpha);
-}
-
-// Specifics
-// ==========================================================================
+// Specific
+// =============================================================================
 
 // Link
-$color-link:           colorCode(primary);
-$color-link-focus:     colorCode(primary);
-$color-link-hover:     color.adjust(colorCode(primary), $lightness: -10%);
+$color-link:        #1A0DAB;
+$color-link-focus:  #1A0DAB;
+$color-link-hover:  darken(#1A0DAB, 10%);
 
 // Selection
-$color-selection-text:         colorCode(darkest);
-$color-selection-background:   colorCode(lightest);
+$selection-text-color:          #3297FD;
+$selection-background-color:    #FFFFFF;
+
+// Social Colors
+// =============================================================================
 
-// Socials
 $color-facebook:    #3B5998;
 $color-instagram:   #E1306C;
 $color-youtube:     #CD201F;

assets/styles/settings/_config.eases.scss

@@ -2,77 +2,47 @@
 // Settings / Config / Eases
 // ==========================================================================
 
-// Eases
-// ==========================================================================
+// Power 1
+$ease-power1-in:        cubic-bezier(0.550, 0.085, 0.680, 0.530);
+$ease-power1-out:       cubic-bezier(0.250, 0.460, 0.450, 0.940);
+$ease-power1-in-out:    cubic-bezier(0.455, 0.030, 0.515, 0.955);
 
-$eases: (
-    // Power 1
-    "power1.in":        cubic-bezier(0.550, 0.085, 0.680, 0.530),
-    "power1.out":       cubic-bezier(0.250, 0.460, 0.450, 0.940),
-    "power1.inOut":     cubic-bezier(0.455, 0.030, 0.515, 0.955),
+// Power 2
+$ease-power2-in:        cubic-bezier(0.550, 0.055, 0.675, 0.190);
+$ease-power2-out:       cubic-bezier(0.215, 0.610, 0.355, 1.000);
+$ease-power2-in-out:    cubic-bezier(0.645, 0.045, 0.355, 1.000);
 
-    // Power 2
-    "power2.in":        cubic-bezier(0.550, 0.055, 0.675, 0.190),
-    "power2.out":       cubic-bezier(0.215, 0.610, 0.355, 1.000),
-    "power2.inOut":     cubic-bezier(0.645, 0.045, 0.355, 1.000),
+// Power 3
+$ease-power3-in:        cubic-bezier(0.895, 0.030, 0.685, 0.220);
+$ease-power3-out:       cubic-bezier(0.165, 0.840, 0.440, 1.000);
+$ease-power3-in-out:    cubic-bezier(0.770, 0.000, 0.175, 1.000);
 
-    // Power 3
-    "power3.in":        cubic-bezier(0.895, 0.030, 0.685, 0.220),
-    "power3.out":       cubic-bezier(0.165, 0.840, 0.440, 1.000),
-    "power3.inOut":     cubic-bezier(0.770, 0.000, 0.175, 1.000),
+// Power 3
+$ease-power4-in:        cubic-bezier(0.755, 0.050, 0.855, 0.060);
+$ease-power4-out:       cubic-bezier(0.230, 1.000, 0.320, 1.000);
+$ease-power4-in-out:    cubic-bezier(0.860, 0.000, 0.070, 1.000);
 
-    // Power 4
-    "power4.in":        cubic-bezier(0.755, 0.050, 0.855, 0.060),
-    "power4.out":       cubic-bezier(0.230, 1.000, 0.320, 1.000),
-    "power4.inOut":     cubic-bezier(0.860, 0.000, 0.070, 1.000),
+// Expo
+$ease-expo-in:          cubic-bezier(0.950, 0.050, 0.795, 0.035);
+$ease-expo-out:         cubic-bezier(0.190, 1.000, 0.220, 1.000);
+$ease-expo-in-out:      cubic-bezier(1.000, 0.000, 0.000, 1.000);
 
-    // Expo
-    "expo.in":          cubic-bezier(0.950, 0.050, 0.795, 0.035),
-    "expo.out":         cubic-bezier(0.190, 1.000, 0.220, 1.000),
-    "expo.inOut":       cubic-bezier(1.000, 0.000, 0.000, 1.000),
+// Back
+$ease-back-in:          cubic-bezier(0.600, -0.280, 0.735, 0.045);
+$ease-back-out:         cubic-bezier(0.175, 00.885, 0.320, 1.275);
+$ease-back-in-out:      cubic-bezier(0.680, -0.550, 0.265, 1.550);
 
-    // Back
-    "back.in":          cubic-bezier(0.600, -0.280, 0.735, 0.045),
-    "back.out":         cubic-bezier(0.175, 00.885, 0.320, 1.275),
-    "back.inOut":       cubic-bezier(0.680, -0.550, 0.265, 1.550),
+// Sine
+$ease-sine-in:          cubic-bezier(0.470, 0.000, 0.745, 0.715);
+$ease-sine-out:         cubic-bezier(0.390, 0.575, 0.565, 1.000);
+$ease-sine-in-out:      cubic-bezier(0.445, 0.050, 0.550, 0.950);
 
-    // Sine
-    "sine.in":          cubic-bezier(0.470, 0.000, 0.745, 0.715),
-    "sine.out":         cubic-bezier(0.390, 0.575, 0.565, 1.000),
-    "sine.inOut":       cubic-bezier(0.445, 0.050, 0.550, 0.950),
+// Circ
+$ease-circ-in:          cubic-bezier(0.600, 0.040, 0.980, 0.335);
+$ease-circ-out:         cubic-bezier(0.075, 0.820, 0.165, 1.000);
+$ease-circ-in-out:      cubic-bezier(0.785, 0.135, 0.150, 0.860);
 
-    // Circ
-    "circ.in":          cubic-bezier(0.600, 0.040, 0.980, 0.335),
-    "circ.out":         cubic-bezier(0.075, 0.820, 0.165, 1.000),
-    "circ.inOut":       cubic-bezier(0.785, 0.135, 0.150, 0.860),
-
-    // Misc
-    "bounce":           cubic-bezier(0.17, 0.67, 0.3, 1.33),
-    "slow.out":         cubic-bezier(.04,1.15,0.4,.99),
-    "smooth":           cubic-bezier(0.380, 0.005, 0.215, 1),
-);
-
-// Default value for ease()
-$ease-default: "power2.out" !default;
-
-// Function
-// ==========================================================================
-
-// Returns ease curve.
-//
-// ```scss
-// .c-box {
-//     transition-timing-function: ease("power2.out");
-// }
-// ```
-//
-// @param  {string} $key - The ease key in $eases.
-// @return {easing-function}
-
-@function ease($key: $ease-default) {
-    @if not map-has-key($eases, $key) {
-        @error "Unknown '#{$key}' in $eases.";
-    }
-
-    @return map-get($eases, $key);
-}
+// Misc
+$ease-bounce:           cubic-bezier(0.17, 0.67, 0.3, 1.33);
+$ease-slow-out:         cubic-bezier(.04,1.15,0.4,.99);
+$ease-smooth:           cubic-bezier(0.380, 0.005, 0.215, 1);

assets/styles/settings/_config.fonts.scss

@@ -1,98 +0,0 @@
-// ==========================================================================
-// Settings / Config / Breakpoints
-// ==========================================================================
-
-// Font fallbacks (retrieved from systemfontstack.com on 2022-05-31)
-// ==========================================================================
-
-$font-fallback-sans:    -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
-$font-fallback-serif:   Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
-$font-fallback-mono:    Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
-
-// Typefaces
-// ==========================================================================
-
-// List of custom font faces as tuples.
-//
-// ```
-// <font-name> <font-file-basename> <font-weight> <font-style>
-// ```
-$font-faces: (
-    ("Source Sans", "SourceSans3-Bold",      700, normal),
-    ("Source Sans", "SourceSans3-BoldIt",    700, italic),
-    ("Source Sans", "SourceSans3-Regular",   400, normal),
-    ("Source Sans", "SourceSans3-RegularIt", 400, italic),
-);
-
-// Map of font families.
-//
-// ```
-// <font-id>: (<font-name>, <font-fallbacks>)
-// ```
-$font-families: (
-    sans: join("Source Sans", $font-fallback-sans, $separator: comma),
-);
-
-// Font directory
-$font-dir: "../fonts/";
-
-// Functions
-// ==========================================================================
-
-// Imports the custom font.
-//
-// The mixin expects font files to be woff and woff2.
-//
-// @param  {List}   $webfont - A custom font to import, as a tuple:
-//     `<font-name> <font-file-basename> <font-weight> <font-style>`.
-// @param  {String} $dir     - The webfont directory path.
-// @output The `@font-face` at-rule specifying the custom font.
-
-@mixin font-face($webfont, $dir) {
-    @font-face {
-        font-display: swap;
-        font-family: nth($webfont, 1);
-        src: url("#{$dir}#{nth($webfont, 2)}.woff2") format("woff2"),
-             url("#{$dir}#{nth($webfont, 2)}.woff") format("woff");
-        font-weight: #{nth($webfont, 3)};
-        font-style: #{nth($webfont, 4)};
-    }
-}
-
-// Imports the list of custom fonts.
-//
-// @require {mixin} font-face
-//
-// @param  {List<List>} $webfonts - List of custom fonts to import.
-//     See `font-face` mixin for details.
-// @param  {String}     $dir      - The webfont directory path.
-// @output The `@font-face` at-rules specifying the custom fonts.
-
-@mixin font-faces($webfonts, $dir) {
-    @if (length($webfonts) > 0) {
-        @if (type-of(nth($webfonts, 1)) == "list") {
-            @each $webfont in $webfonts {
-                @include font-face($webfont, $dir);
-            }
-        } @else {
-            @include font-face($webfonts, $dir);
-        }
-    }
-}
-
-// Retrieves the font family stack for the given font ID.
-//
-// @require {variable} $font-families - See settings directory.
-//
-// @param  {String} $font-family - The custom font ID.
-// @throws Error if the $font-family does not exist.
-// @return {List} The font stack.
-
-@function ff($font-family) {
-    @if not map-has-key($font-families, $font-family) {
-        @error "No font-family found in $font-families map for `#{$font-family}`.";
-    }
-
-    $value: map-get($font-families, $font-family);
-    @return $value;
-}

assets/styles/settings/_config.scss

@@ -11,13 +11,55 @@ $context: frontend  !default;
 // Path is relative to the stylesheets directory.
 $assets-path: "../"  !default;
 
+// Typefaces
+// =============================================================================
+
+// Font directory
+$font-dir: "../fonts/";
+
+// Font fallbacks (retrieved from systemfontstack.com on 2022-05-31)
+$font-fallback-sans:    -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
+$font-fallback-serif:   Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+$font-fallback-mono:    Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
+
+// Map of font families.
+//
+// ```
+// <font-id>: (<font-name>, <font-fallbacks>)
+// ```
+$font-families: (
+    "sans": ("Webfont Sans", $font-fallback-sans),
+    // "serif": ("Webfont Serif", $font-fallback-serif),
+    // "mono": ("Webfont Mono", $font-fallback-mono)
+);
+
+// List of custom font faces as tuples.
+//
+// ```
+// <font-name> <font-file-basename> <font-weight> <font-style>
+// ```
+$font-faces: (
+    // "Webfont Sans" "webfont-sans_regular" 400 normal,
+    // "Webfont Sans" "webfont-sans_regular-italic" 400 italic,
+    // "Webfont Serif" "webfont-sans_bold" 700 normal,
+);
+
 // Typography
 // =============================================================================
 
 // Base
-$font-size:     16px;
-$line-height:   math.div(24px, $font-size);
-$font-color:    colorCode(darkest);
+$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;
 
 // Weights
 $font-weight-light:     300;
@@ -25,21 +67,59 @@ $font-weight-normal:    400;
 $font-weight-medium:    500;
 $font-weight-bold:      700;
 
-// Transition defaults
+// Transitions
 // =============================================================================
-$speed:     t(normal);
-$easing:    ease("power2.out");
+
+$speed:     0.3s;
+$easing:    $ease-power2-out;
 
 // Spacing Units
 // =============================================================================
-$unit:        60px;
-$unit-small:  20px;
-$vw-viewport: 1440;
+
+$unit:          60px;
+$unit-small:    30px;
 
 // Container
-// ==========================================================================
-$padding:     $unit;
+// =============================================================================
 
-// Grid
-// ==========================================================================
-$base-column-nb: 12;
+$container-width:   2000px;
+$padding:           $unit;
+
+// Breakpoints
+// =============================================================================
+
+$from-tiny:     500px              !default;
+$to-tiny:       $from-tiny - 1     !default;
+$from-small:    700px              !default;
+$to-small:      $from-small - 1    !default;
+$from-medium:   1000px             !default;
+$to-medium:     $from-medium - 1   !default;
+$from-large:    1200px             !default;
+$to-large:      $from-large - 1    !default;
+$from-big:      1400px             !default;
+$to-big:        $from-big - 1      !default;
+$from-huge:     1600px             !default;
+$to-huge:       $from-huge - 1     !default;
+$from-enormous: 1800px             !default;
+$to-enormous:   $from-enormous - 1 !default;
+$from-gigantic: 2000px             !default;
+$to-gigantic:   $from-gigantic - 1 !default;
+$from-colossal: 2400px             !default;
+$to-colossal:   $from-colossal - 1 !default;
+
+// Master z-indexe
+// =============================================================================
+
+$z-indexes: (
+    "goku":       9000,
+    "transition": 500,
+    "toast":      400,
+    "popover":    300,
+    "modal":      250,
+    "sheet":      200,
+    "fixed":      150,
+    "sticky":     100,
+    "dropdown":   50,
+    "default":    1,
+    "limbo":      -999
+);

assets/styles/settings/_config.spacings.scss

@@ -1,69 +0,0 @@
-// ==========================================================================
-// Settings / Config / Spacings
-// ==========================================================================
-
-:root {
-    --spacing-2xs-mobile: 6;
-    --spacing-2xs-desktop: 10;
-
-    --spacing-xs-mobile: 12;
-    --spacing-xs-desktop: 16;
-
-    --spacing-sm-mobile: 22;
-    --spacing-sm-desktop: 32;
-
-    --spacing-md-mobile: 32;
-    --spacing-md-desktop: 56;
-
-    --spacing-lg-mobile: 48;
-    --spacing-lg-desktop: 96;
-
-    --spacing-xl-mobile: 64;
-    --spacing-xl-desktop: 128;
-
-    --spacing-2xl-mobile: 88;
-    --spacing-2xl-desktop: 176;
-
-    --spacing-3xl-mobile: 122;
-    --spacing-3xl-desktop: 224;
-}
-
-// Spacings
-// ==========================================================================
-
-$spacings: (
-    'gutter':   var(--grid-gutter),
-    '2xs':      #{size-clamp('2xs')},
-    'xs':       #{size-clamp('xs')},
-    'sm':       #{size-clamp('sm')},
-    'md':       #{size-clamp('md')},
-    'lg':       #{size-clamp('lg')},
-    'xl':       #{size-clamp('xl')},
-    '2xl':      #{size-clamp('2xl')},
-    '3xl':      #{size-clamp('3xl')},
-);
-
-// Function
-// ==========================================================================
-
-// Returns spacing.
-//
-// ```scss
-// .c-box {
-//     margin-top: spacing(gutter);
-// }
-// ```
-//
-// @param  {string} $key - The spacing key in $spacings.
-// @param  {number} $multiplier - The multiplier of the spacing value.
-// @return {size}
-
-@function spacing($spacing: 'sm', $multiplier: 1) {
-    @if not map-has-key($spacings, $spacing) {
-        @error "Unknown master spacing: #{$spacing}";
-    }
-
-    $index: map-get($spacings, $spacing);
-
-    @return calc(#{$index} * #{$multiplier});
-}

assets/styles/settings/_config.speeds.scss

@@ -1,38 +0,0 @@
-// ==========================================================================
-// Settings / Config / Speeds
-// ==========================================================================
-
-// Speeds
-// ==========================================================================
-
-$speeds: (
-    fastest:    0.1s,
-    faster:     0.15s,
-    fast:       0.25s,
-    normal:     0.3s,
-    slow:       0.5s,
-    slower:     0.75s,
-    slowest:    1s,
-);
-
-// Function
-// ==========================================================================
-
-// Returns timing.
-//
-// ```scss
-// .c-box {
-//     transition-duration: speed(slow);
-// }
-// ```
-//
-// @param  {string} $key - The speed key in $speeds.
-// @return {duration}
-
-@function speed($key: "normal") {
-    @if not map-has-key($speeds, $key) {
-        @error "Unknown '#{$key}' in $speeds.";
-    }
-
-    @return map-get($speeds, $key);
-}

assets/styles/settings/_config.variables.scss

@@ -1,20 +0,0 @@
-// ==========================================================================
-// Settings / Config / CSS VARS
-// ==========================================================================
-
-:root {
-
-    // Grid
-    --grid-columns:     4;
-    --grid-gutter:      #{rem(10px)};
-    --grid-margin:      #{rem(10px)};
-
-    // Container
-    --container-width:  calc(100% - 2 * var(--grid-margin));
-
-    @media (min-width: $from-sm) {
-        --grid-columns:     #{$base-column-nb};
-        --grid-gutter:      #{rem(16px)};
-        --grid-margin:      #{rem(20px)};
-    }
-}

assets/styles/settings/_config.zindexes.scss

@@ -1,44 +0,0 @@
-// ==========================================================================
-// Settings / Config / Z-indexes
-// ==========================================================================
-
-// Timings
-// ==========================================================================
-
-$z-indexes: (
-    "header":   200,
-    "above":    1,
-    "default":  0,
-    "below":    -1
-);
-
-// Default z-index for z()
-$z-index-default: "above" !default;
-
-// Function
-// ==========================================================================
-
-// Retrieves the z-index from the {@see $layers master list}.
-//
-// @link on http://css-tricks.com/handling-z-index/
-//
-// @param  {string} $layer    The name of the z-index.
-// @param  {number} $modifier A positive or negative modifier to apply
-//     to the returned z-index value.
-// @throw  Error if the $layer does not exist.
-// @throw  Warning if the $modifier might overlap another master z-index.
-// @return {number}           The computed z-index of $layer and $modifier.
-
-@function z($layer: $z-index-default, $modifier: 0) {
-    @if not map-has-key($z-indexes, $layer) {
-        @error "Unknown master z-index layer: #{$layer}";
-    }
-
-    @if ($modifier >= 50 or $modifier <= -50) {
-        @warn "Modifier may overlap the another master z-index layer: #{$modifier}";
-    }
-
-    $index: map-get($z-indexes, $layer);
-
-    @return $index + $modifier;
-}

assets/styles/tools/_family.scss

@@ -147,7 +147,7 @@
 // @param {number} $num - id of the child
 
 @mixin middle($num) {
-    &:nth-child(#{round(math.div($num, 2))}) {
+    &:nth-child(#{round($num / 2)}) {
         @content;
     }
 }

assets/styles/tools/_fonts.scss

@@ -0,0 +1,55 @@
+// ==========================================================================
+// Tools / Font Faces
+// ==========================================================================
+
+// Imports the custom font.
+//
+// The mixin expects font files to be woff and woff2.
+//
+// @param  {List}   $webfont - A custom font to import, as a tuple:
+//     `<font-name> <font-file-basename> <font-weight> <font-style>`.
+// @param  {String} $dir     - The webfont directory path.
+// @output The `@font-face` at-rule specifying the custom font.
+
+@mixin font-face($webfont, $dir) {
+    @font-face {
+        font-display: swap;
+        font-family: nth($webfont, 1);
+        src: url("#{$dir}#{nth($webfont, 2)}.woff2") format("woff2"),
+             url("#{$dir}#{nth($webfont, 2)}.woff") format("woff");
+        font-weight: #{nth($webfont, 3)};
+        font-style: #{nth($webfont, 4)};
+    }
+}
+
+// Imports the list of custom fonts.
+//
+// @require {mixin} font-face
+//
+// @param  {List<List>} $webfonts - List of custom fonts to import.
+//     See `font-face` mixin for details.
+// @param  {String}     $dir      - The webfont directory path.
+// @output The `@font-face` at-rules specifying the custom fonts.
+
+@mixin font-faces($webfonts, $dir) {
+    @each $webfont in $webfonts {
+        @include font-face($webfont, $dir);
+    }
+}
+
+// Retrieves the font family stack for the given font ID.
+//
+// @require {variable} $font-families - See settings directory.
+//
+// @param  {String} $font-family - The custom font ID.
+// @throws Error if the $font-family does not exist.
+// @return {List} The font stack.
+
+@function ff($font-family) {
+    @if not map-has-key($font-families, $font-family) {
+       @error "No font-family found in $font-families map for `#{$font-family}`.";
+   }
+
+    $value: map-get($font-families, $font-family);
+    @return $value;
+}

assets/styles/tools/_functions.scss

@@ -26,7 +26,7 @@
         @error "`#{$base}` needs to be a number in pixel.";
     }
 
-    @return math.div($size, $base) * 1em;
+    @return ($size / $base) * 1em;
 }
 
 // Converts the given pixel value to its REM quivalent.
@@ -45,7 +45,43 @@
         @error "`#{$base}` needs to be a number in pixel.";
     }
 
-    @return math.div($size, $base) * 1rem;
+    @return ($size / $base) * 1rem;
+}
+
+// Retrieves the z-index from the {@see $layers master list}.
+//
+// @link on http://css-tricks.com/handling-z-index/
+//
+// @param  {string} $layer    The name of the z-index.
+// @param  {number} $modifier A positive or negative modifier to apply
+//     to the returned z-index value.
+// @throw  Error if the $layer does not exist.
+// @throw  Warning if the $modifier might overlap another master z-index.
+// @return {number}           The computed z-index of $layer and $modifier.
+
+@function z($layer, $modifier: 0) {
+    @if not map-has-key($layers, $layer) {
+        @error "Unknown master z-index layer: #{$layer}";
+    }
+
+    @if ($modifier >= 50 or $modifier <= -50) {
+        @warn "Modifier may overlap the another master z-index layer: #{$modifier}";
+    }
+
+    $index: map-get($z-indexes, $layer);
+
+    @return $index + $modifier;
+}
+
+// Converts a number to a percentage.
+//
+// @alias  percentage()
+// @link   http://sassdoc.com/annotations/#alias
+// @param  {Number} $number - The value to convert.
+// @return {Number} A percentage.
+
+@function span($number) {
+    @return percentage($number);
 }
 
 // Checks if a list contains a value(s).
@@ -103,112 +139,3 @@
 }
 
 $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} $percentage - The percentage spacer
-// @param  {number} $inset      - The grid gutter inset
-// @return {function<number>}
-@function grid-space($percentage, $inset: 0) {
-    @return calc(#{$percentage} * (#{vw(100)} - 2 * var(--grid-margin, 0px)) - (1 - #{$percentage}) * var(--grid-gutter, 0px) + #{$inset} * var(--grid-gutter, 0px));
-}
-
-// Returns calculation of a percentage of the viewport small height.
-//
-// ```scss
-// .c-box {
-//     height: svh(100);
-// }
-// ```
-//
-// @param  {number} $number - The percentage number
-// @return {function<number>} in svh
-@function svh($number) {
-    @return calc(#{$number} * var(--svh, 1svh));
-}
-
-// Returns calculation of a percentage of the viewport large height.
-//
-// ```scss
-// .c-box {
-//     height: lvh(100);
-// }
-// ```
-//
-// @param  {number} $number - The percentage number
-// @return {function<number>} in lvh
-@function lvh($number) {
-    @return calc(#{$number} * var(--lvh, 1lvh));
-}
-
-// Returns calculation of a percentage of the viewport dynamic height.
-//
-// ```scss
-// .c-box {
-//     height: dvh(100);
-// }
-// ```
-//
-// @param  {number} $number - The percentage number
-// @return {function<number>} in dvh
-@function dvh($number) {
-    @return calc(#{$number} * var(--dvh, 1dvh));
-}
-
-// 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));
-}
-
-@function clamp-with-max($min, $size, $max) {
-    $vw-context: $vw-viewport * 0.01;
-    @return clamp(#{$min}, calc(#{$size} / #{$vw-context} * 1vw), #{$max});
-}
-
-@function size-clamp($size) {
-    @return clamp-with-max(
-        calc(#{rem(1px)} * var(--spacing-#{$size}-mobile)),
-        var(--spacing-#{$size}-desktop),
-        calc(#{rem(1px)} * var(--spacing-#{$size}-desktop))
-    );
-}
-
-// Returns clamp of calculated preferred responsive font size
-// within a font size and breakpoint range.
-//
-// ```scss
-// .c-heading.-h1 {
-//     font-size: responsive-value(30px, 60px, 1800);
-// }
-//
-// .c-heading.-h2 {
-//     font-size: responsive-value(20px, 40px, $from-xl);
-// }
-// ```
-//
-// @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-value($min-size, $max-size, $breakpoint) {
-    $delta: math.div($max-size, $breakpoint);
-    @return clamp($min-size, calc(#{strip-unit($delta)} * #{vw(100)}), $max-size);
-}

assets/styles/tools/_maths.scss

@@ -2,18 +2,13 @@
 // Tools / Maths
 // ==========================================================================
 
-// Remove the unit of a length
+// Removes the unit from the given 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);
-    }
+// @param  {number} $number The number to strip.
+// @return {number}
 
-    @return $value;
+@function strip-units($number) {
+    @return $number / ($number * 0 + 1);
 }
 
 // Returns the square root of the given number.
@@ -26,7 +21,7 @@
     $value: $x;
 
     @for $i from 1 through 10 {
-        $value: $x - math.div(($x * $x - abs($number)), (2 * $x));
+        $value: $x - ($x * $x - abs($number)) / (2 * $x);
         $x: $value;
     }
 
@@ -48,7 +43,7 @@
         }
     } @else if $exp < 0 {
         @for $i from 1 through -$exp {
-            $value: math.div($value, $number);
+            $value: $value / $number;
         }
     }
 
@@ -93,7 +88,7 @@
 
     // If the angle has `deg` as unit, convert to radians.
     @if ($unit == deg) {
-        @return math.div($angle, 180) * pi();
+        @return $angle / 180 * pi();
     }
 
     @return $angle;
@@ -109,7 +104,7 @@
     $angle: rad($angle);
 
     @for $i from 0 through 10 {
-        $sin: $sin + pow(-1, $i) * math.div(pow($angle, (2 * $i + 1)), fact(2 * $i + 1));
+        $sin: $sin + pow(-1, $i) * pow($angle, (2 * $i + 1)) / fact(2 * $i + 1);
     }
 
     @return $sin;
@@ -125,7 +120,7 @@
     $angle: rad($angle);
 
     @for $i from 0 through 10 {
-        $cos: $cos + pow(-1, $i) * math.div(pow($angle, 2 * $i), fact(2 * $i));
+        $cos: $cos + pow(-1, $i) * pow($angle, 2 * $i) / fact(2 * $i);
     }
 
     @return $cos;
@@ -137,5 +132,5 @@
 // @return {number}
 
 @function tan($angle) {
-    @return math.div(sin($angle), cos($angle));
+    @return sin($angle) / cos($angle);
 }

assets/styles/tools/_mixins.scss

@@ -51,13 +51,13 @@
     font-size: rem($font-size) $important;
 
     @if ($line-height == "auto") {
-        line-height: ceil(math.div($font-size, $line-height)) * math.div($line-height, $font-size) $important;
+        line-height: ceil($font-size / $line-height) * ($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;
         }
-        @else if ($line-height != "none" and $line-height != false) {
+        @elseif ($line-height != "none" and $line-height != false) {
             @error "D’oh! `#{$line-height}` is not a valid value for `$line-height`.";
         }
     }
@@ -193,32 +193,3 @@
     display: $display $important;
     visibility: visible  $important;
 }
-
-// Aspect-ratio polyfill
-//
-// @param  {Number}  $ratio     [19/6]  - The ratio of the element.
-// @param  {Number}  $width     [100%]  - The fallback width of element.
-// @param  {Boolean} $children  [false] - Whether the element contains children for the fallback properties.
-// @output Properties for maintaining aspect-ratio
-
-@mixin aspect-ratio($ratio: math.div(16, 9), $width: 100%, $children: false) {
-
-    @supports (aspect-ratio: 1) {
-        aspect-ratio: $ratio;
-    }
-
-    @supports not (aspect-ratio: 1) {
-        height: 0;
-        padding-top: calc(#{$width} * #{math.div(1, $ratio)});
-
-        @if ($children == true) {
-            position: relative;
-
-            > * {
-                position: absolute;
-                top: 0;
-                left: 0;
-            }
-        }
-    }
-}

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: math.div($numerator, $denominator) * 100% $important;
+                width: ($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: math.div($numerator, $denominator) * 100% $important;
+                    left: ($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: math.div($numerator, $denominator) * 100% $important;
+                    right: ($numerator / $denominator) * 100% $important;
                     left: auto $important;
                 }
             }

assets/styles/utilities/_grid-column.scss

@@ -1,43 +0,0 @@
-// ==========================================================================
-// Tools / Grid Columns
-// ==========================================================================
-
-//
-// Grid layout system.
-//
-// This tool generates columns for all needed media queries.
-// Unused classes will be purge by the css post-processor.
-//
-
-$colsMax: $base-column-nb + 1;
-
-@each $breakpoint, $mediaquery in $breakpoints {
-    @for $fromIndex from 1 through $colsMax {
-        @for $toIndex from 1 through $colsMax {
-
-            // Columns without media query
-            @if $breakpoint == "tiny" {
-                .u-gc-#{$fromIndex}\/#{$toIndex} {
-                    --gc-start: #{$fromIndex};
-                    --gc-end: #{$toIndex};
-                }
-            }
-
-            // Columns min-width breakpoints `@from-*`
-            .u-gc-#{$fromIndex}\/#{$toIndex}\@from-#{$breakpoint} {
-                @media #{mq-min($breakpoint)} {
-                    --gc-start: #{$fromIndex};
-                    --gc-end: #{$toIndex};
-                }
-            }
-
-            // Columns max-width breakpoints @to-*`
-            .u-gc-#{$fromIndex}\/#{$toIndex}\@to-#{$breakpoint} {
-                @media #{mq-max($breakpoint)} {
-                    --gc-start: #{$fromIndex};
-                    --gc-end: #{$toIndex};
-                }
-            }
-        }
-    }
-}

assets/styles/utilities/_ratio.scss

@@ -28,8 +28,8 @@ $aspect-ratios: (
             @error "`#{$consequent}` needs to be a number."
         }
 
-        .u-#{$antecedent}\:#{$consequent}::before {
-            padding-bottom: math.div($consequent, $antecedent) * 100%;
+        &.u-#{$antecedent}\:#{$consequent}::before {
+            padding-bottom: ($consequent/$antecedent) * 100%;
         }
     }
 }

assets/styles/utilities/_spacing.scss

@@ -8,11 +8,12 @@
 ///
 /// @example
 ///   .u-margin-top {}
-///   .u-margin-top-xs {}
-///   .u-padding-left-lg {}
-///   .u-margin-right-sm {}
+///   .u-padding-left-large {}
+///   .u-margin-right-small {}
 ///   .u-padding {}
 ///   .u-padding-right-none {}
+///   .u-padding-horizontal {}
+///   .u-padding-vertical-small {}
 ///
 /// @link https://github.com/inuitcss/inuitcss/blob/512977a/utilities/_utilities.spacing.scss
 ////
@@ -25,8 +26,8 @@ $spacing-directions: (
     '-right':      '-right',
     '-bottom':     '-bottom',
     '-left':       '-left',
-    '-x':          '-left' '-right',
-    '-y':          '-top'  '-bottom',
+    '-horizontal': '-left' '-right',
+    '-vertical':   '-top'  '-bottom',
 ) !default;
 
 $spacing-properties: (
@@ -34,47 +35,19 @@ $spacing-properties: (
     'margin':  'margin',
 ) !default;
 
-$spacing-sizes: join($spacings, (
-    null:       var(--grid-gutter),
-    'none':    0
-));
+$spacing-sizes: (
+    null:     $unit,
+    '-double': $unit * 2,
+    '-small': $unit-small,
+    '-none':  0px
+) !default;
 
-@each $breakpoint, $mediaquery in $breakpoints {
-    @each $property-namespace, $property in $spacing-properties {
-        @each $direction-namespace, $directions in $spacing-directions {
-            @each $size-namespace, $size in $spacing-sizes {
-
-                // Prepend "-" to spacing sizes if not null
-                $size-namespace: if($size-namespace != null, "-" + $size-namespace, $size-namespace);
-
-                // Base class
-                $base-class: ".u-" + #{$property-namespace}#{$direction-namespace}#{$size-namespace};
-
-                // Spacing without media query
-                @if $breakpoint == "xs" {
-                    #{$base-class} {
-                        @each $direction in $directions {
-                            #{$property}#{$direction}: $size !important;
-                        }
-                    }
-                }
-
-                // Spacing min-width breakpoints `@from-*`
-                #{$base-class}\@from-#{$breakpoint} {
-                    @media #{mq-min($breakpoint)} {
-                        @each $direction in $directions {
-                            #{$property}#{$direction}: $size !important;
-                        }
-                    }
-                }
-
-                // Spacing max-width breakpoints @to-*`
-                #{$base-class}\@to-#{$breakpoint} {
-                    @media #{mq-max($breakpoint)} {
-                        @each $direction in $directions {
-                            #{$property}#{$direction}: $size !important;
-                        }
-                    }
+@each $property-namespace, $property in $spacing-properties {
+    @each $direction-namespace, $direction-rules in $spacing-directions {
+        @each $size-namespace, $size in $spacing-sizes {
+            .u-#{$property-namespace}#{$direction-namespace}#{$size-namespace} {
+                @each $direction in $direction-rules {
+                    #{$property}#{$direction}: rem($size) !important;
                 }
             }
         }

assets/styles/utilities/_states.scss

@@ -46,14 +46,14 @@
     }
 }
 
-// .is-hidden\@to-lg {
-//     @media (max-width: $to-lg) {
+// .is-hidden\@to-large {
+//     @media (max-width: $to-large) {
 //         display: none;
 //     }
 // }
 //
-// .is-hidden\@from-lg {
-//     @media (min-width: $from-lg) {
+// .is-hidden\@from-large {
+//     @media (min-width: $from-large) {
 //         display: none;
 //     }
 // }

assets/styles/utilities/_widths.scss

@@ -21,8 +21,8 @@ $widths-fractions: 1 2 3 4 5 !default;
 
 @include widths($widths-fractions);
 
-.u-1\/2\@from-sm {
-    @media (min-width: $from-sm) {
-        width: 50%;
+.u-1\/2\@from-small {
+    @media (min-width: $from-small) {
+        width: span(1/2);
     }
 }

build/build.js

@@ -1,11 +1,9 @@
 import concatFiles from './tasks/concats.js';
 import compileScripts from './tasks/scripts.js';
-import compileStyles from './tasks/styles.js';
-import compileSVGs from './tasks/svgs.js';
-import bumpVersions from './tasks/versions.js';
+import compileStyles from './tasks/styles.js' ;
+import compileSVGs from './tasks/svgs.js' ;
 
 concatFiles();
 compileScripts();
 compileStyles();
 compileSVGs();
-bumpVersions();

build/helpers/config.js

@@ -1,25 +0,0 @@
-/**
- * @file Provides simple user configuration options.
- */
-
-import loconfig from '../../loconfig.json' with { type: 'json' };
-import { merge } from '../utils/index.js';
-
-let usrconfig;
-
-try {
-    usrconfig = await import('../../loconfig.local.json', {
-        with: { type: 'json' },
-    });
-    usrconfig = usrconfig.default;
-
-    merge(loconfig, usrconfig);
-} catch (err) {
-    // do nothing
-}
-
-export default loconfig;
-
-export {
-    loconfig,
-};

build/helpers/glob.js

@@ -1,162 +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} [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,
-};

build/helpers/postcss.js

@@ -1,139 +0,0 @@
-/**
- * @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,
-};

build/tasks/concats.js

@@ -1,9 +1,8 @@
-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 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 concat from 'concat';
 import {
     basename,
@@ -65,7 +64,7 @@ export const productionConcatFilesArgs  = [
  * @return {Promise}
  */
 export default async function concatFiles(globOptions = null, concatOptions = null) {
-    if (supportsGlob) {
+    if (glob) {
         if (globOptions == null) {
             globOptions = productionGlobOptions;
         } else if (
@@ -73,7 +72,7 @@ export default async function concatFiles(globOptions = null, concatOptions = nu
             globOptions !== developmentGlobOptions &&
             globOptions !== productionGlobOptions
         ) {
-            globOptions = merge({}, defaultGlobOptions, globOptions);
+            globOptions = Object.assign({}, defaultGlobOptions, globOptions);
         }
     }
 
@@ -83,19 +82,10 @@ export default async function concatFiles(globOptions = null, concatOptions = nu
         concatOptions !== developmentConcatOptions &&
         concatOptions !== productionConcatOptions
     ) {
-        concatOptions = merge({}, defaultConcatOptions, concatOptions);
+        concatOptions = Object.assign({}, 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 ({
+    loconfig.tasks.concats.forEach(async ({
         includes,
         outfile,
         label = null
@@ -108,25 +98,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);
 
-            if (supportsGlob && globOptions) {
-                includes = await glob(includes, globOptions);
+            let files;
+
+            if (glob && globOptions) {
+                files = await glob(includes, globOptions);
+            } else {
+                files = includes;
             }
 
             if (concatOptions.removeDuplicates) {
-                includes = includes.map((path) => normalize(path));
-                includes = [ ...new Set(includes) ];
+                files = files.map((path) => normalize(path));
+                files = [ ...new Set(files) ];
             }
 
-            await concat(includes, outfile);
+            await concat(files, outfile);
 
-            if (includes.length) {
+            if (files.length) {
                 message(`${label} concatenated`, 'success', timeLabel);
             } else {
                 message(`${label} is empty`, 'notice', timeLabel);

build/tasks/scripts.js

@@ -1,8 +1,7 @@
-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 loconfig from '../utils/config.js';
+import message from '../utils/message.js';
+import notification from '../utils/notification.js';
+import resolve from '../utils/template.js';
 import esbuild from 'esbuild';
 import { basename } from 'node:path';
 
@@ -51,21 +50,10 @@ export default async function compileScripts(esBuildOptions = null) {
         esBuildOptions !== developmentESBuildOptions &&
         esBuildOptions !== productionESBuildOptions
     ) {
-        esBuildOptions = merge({}, defaultESBuildOptions, esBuildOptions);
+        esBuildOptions = Object.assign({}, 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 ({
+    loconfig.tasks.scripts.forEach(async ({
         includes,
         outdir = '',
         outfile = '',
@@ -79,10 +67,6 @@ export default async function compileScripts(esBuildOptions = null) {
         console.time(timeLabel);
 
         try {
-            if (!Array.isArray(includes)) {
-                includes = [ includes ];
-            }
-
             includes = resolve(includes);
 
             if (outdir) {

build/tasks/styles.js

@@ -1,17 +1,14 @@
-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 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 { writeFile } from 'node:fs/promises';
 import { basename } from 'node:path';
-import * as sass from 'sass';
-import { PurgeCSS } from 'purgecss';
+import { promisify } from 'node:util';
+import sass from 'node-sass';
+
+const sassRender = promisify(sass.render);
 
 let postcssProcessor;
 
@@ -21,15 +18,15 @@ let postcssProcessor;
  * @const {object} productionSassOptions  - The predefined Sass options for production.
  */
 export const defaultSassOptions = {
-    sourceMapIncludeSources: true,
+    omitSourceMapUrl: true,
     sourceMap: true,
+    sourceMapContents: true,
 };
-
 export const developmentSassOptions = Object.assign({}, defaultSassOptions, {
-    style: 'expanded',
+    outputStyle: 'expanded',
 });
 export const productionSassOptions = Object.assign({}, defaultSassOptions, {
-    style: 'compressed',
+    outputStyle: 'compressed',
 });
 
 /**
@@ -56,12 +53,10 @@ export const productionPostCSSOptions  = Object.assign({}, defaultPostCSSOptions
 export const developmentStylesArgs = [
     developmentSassOptions,
     developmentPostCSSOptions,
-    false
 ];
 export const productionStylesArgs  = [
     productionSassOptions,
     productionPostCSSOptions,
-    true
 ];
 
 /**
@@ -78,17 +73,17 @@ export const productionStylesArgs  = [
  *     If `false`, PostCSS processing will be ignored.
  * @return {Promise}
  */
-export default async function compileStyles(sassOptions = null, postcssOptions = null, purge = true) {
+export default async function compileStyles(sassOptions = null, postcssOptions = null) {
     if (sassOptions == null) {
         sassOptions = productionSassOptions;
     } else if (
         sassOptions !== developmentSassOptions &&
         sassOptions !== productionSassOptions
     ) {
-        sassOptions = merge({}, defaultSassOptions, sassOptions);
+        sassOptions = Object.assign({}, defaultSassOptions, sassOptions);
     }
 
-    if (supportsPostCSS) {
+    if (postcss) {
         if (postcssOptions == null) {
             postcssOptions = productionPostCSSOptions;
         } else if (
@@ -96,20 +91,11 @@ export default async function compileStyles(sassOptions = null, postcssOptions =
             postcssOptions !== developmentPostCSSOptions &&
             postcssOptions !== productionPostCSSOptions
         ) {
-            postcssOptions = merge({}, defaultPostCSSOptions, postcssOptions);
+            postcssOptions = Object.assign({}, 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 ({
+    loconfig.tasks.styles.forEach(async ({
         infile,
         outfile,
         label = null
@@ -123,11 +109,14 @@ export default async function compileStyles(sassOptions = null, postcssOptions =
             infile  = resolve(infile);
             outfile = resolve(outfile);
 
-            let result = sass.compile(infile, sassOptions);
+            let result = await sassRender(Object.assign({}, sassOptions, {
+                file: infile,
+                outFile: outfile,
+            }));
 
-            if (supportsPostCSS && postcssOptions) {
+            if (postcss && postcssOptions) {
                 if (typeof postcssProcessor === 'undefined') {
-                    postcssProcessor = createProcessor(
+                    postcssProcessor = createPostCSSProcessor(
                         postcssPluginsMap,
                         postcssOptions
                     );
@@ -153,12 +142,7 @@ export default async function compileStyles(sassOptions = null, postcssOptions =
             }
 
             try {
-                await writeFile(outfile, result.css).then(() => {
-                    // Purge CSS once file exists.
-                    if (outfile && purge) {
-                        purgeUnusedCSS(outfile, `${label || `${filestem}.css`}`);
-                    }
-                });
+                await writeFile(outfile, result.css);
 
                 if (result.css) {
                     message(`${label || `${filestem}.css`} compiled`, 'success', timeLabel);
@@ -201,42 +185,30 @@ export default async function compileStyles(sassOptions = null, postcssOptions =
 };
 
 /**
- * Purge unused styles from CSS files.
+ * Creates a PostCSS Processor with the given plugins and options.
  *
- * @async
- *
- * @param  {string} outfile - The path of a css file
- *      If missing the function stops.
- * @param  {string} label   - The CSS file label or name.
- * @return {Promise}
+ * @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.
  */
-async function purgeUnusedCSS(outfile, label) {
-    const contentFiles = loconfig.tasks.purgeCSS?.content;
-    if (!Array.isArray(contentFiles) || !contentFiles.length) {
-        return;
+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);
+        }
     }
 
-    label = label ?? basename(outfile);
-
-    const timeLabel = `${label} purged in`;
-    console.time(timeLabel);
-
-    const purgeCSSResults = await (new PurgeCSS()).purge({
-        content: contentFiles,
-        css: [ outfile ],
-        defaultExtractor: content => content.match(/[a-z0-9_\-\\\/\@]+/gi) || [],
-        fontFaces: true,
-        keyframes: true,
-        safelist: {
-            // Keep all except .u-gc-* | .u-margin-* | .u-padding-*
-            standard: [ /^(?!.*\b(u-gc-|u-margin|u-padding)).*$/ ]
-        },
-        variables: true,
-    })
-
-    for (let result of purgeCSSResults) {
-        await writeFile(outfile, result.css)
-
-        message(`${label} purged`, 'chore', timeLabel);
-    }
+    return postcss(plugins);
 }

build/tasks/svgs.js

@@ -1,36 +1,20 @@
-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 as resolveTemplate } from '../helpers/template.js';
-import { merge } from '../utils/index.js';
-import {
-    basename,
-    dirname,
-    extname,
-    resolve,
-} from 'node:path';
-import commonPath from 'common-path';
+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 { basename } from 'node:path';
 import mixer from 'svg-mixer';
-import slugify from 'url-slug';
-
-const basePath = loconfig?.paths?.svgs?.src
-    ? resolve(loconfig.paths.svgs.src)
-    : null;
 
 /**
- * @const {object} defaultMixerOptions - The default shared Mixer options.
+ * @const {object} defaultMixerOptions     - The default shared Mixer options.
+ * @const {object} developmentMixerOptions - The predefined Mixer options for development.
+ * @const {object} productionMixerOptions  - The predefined Mixer options for production.
  */
 export const defaultMixerOptions = {
     spriteConfig: {
         usages: false,
     },
 };
-
-/**
- * @const {object} developmentMixerOptions - The predefined Mixer options for development.
- * @const {object} productionMixerOptions  - The predefined Mixer options for production.
- */
 export const developmentMixerOptions = Object.assign({}, defaultMixerOptions);
 export const productionMixerOptions  = Object.assign({}, defaultMixerOptions);
 
@@ -60,19 +44,10 @@ export default async function compileSVGs(mixerOptions = null) {
         mixerOptions !== developmentMixerOptions &&
         mixerOptions !== productionMixerOptions
     ) {
-        mixerOptions = merge({}, defaultMixerOptions, mixerOptions);
+        mixerOptions = Object.assign({}, 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 ({
+    loconfig.tasks.svgs.forEach(async ({
         includes,
         outfile,
         label = null
@@ -85,56 +60,10 @@ export default async function compileSVGs(mixerOptions = null) {
         console.time(timeLabel);
 
         try {
-            if (!Array.isArray(includes)) {
-                includes = [ includes ];
-            }
+            includes = resolve(includes);
+            outfile  = resolve(outfile);
 
-            includes = resolveTemplate(includes);
-            outfile  = resolveTemplate(outfile);
-
-            if (supportsGlob && basePath) {
-                includes = await glob(includes);
-                includes = [ ...new Set(includes) ];
-
-                const common = commonPath(includes);
-                if (common.commonDir) {
-                    common.commonDir = resolve(common.commonDir);
-                }
-
-                /**
-                 * Generates the `<symbol id>` attribute and prefix any
-                 * SVG files in subdirectories according to the paths
-                 * common base path.
-                 *
-                 * Example for SVG source path `./assets/images/sprite`:
-                 *
-                 * | Path                                 | ID        |
-                 * | ------------------------------------ | --------- |
-                 * | `./assets/images/sprite/foo.svg`     | `foo`     |
-                 * | `./assets/images/sprite/baz/qux.svg` | `baz-qux` |
-                 *
-                 * @param  {string} path       - The absolute path to the file.
-                 * @param  {string} [query=''] - A query string.
-                 * @return {string} The symbol ID.
-                 */
-                mixerOptions.generateSymbolId = (path, query = '') => {
-                    let dirName = dirname(path)
-                        .replace(common.commonDir ?? basePath, '')
-                        .replace(/^\/|\/$/, '')
-                        .replace('/', '-');
-                    if (dirName) {
-                        dirName += '-';
-                    }
-
-                    const fileName = basename(path, extname(path));
-                    const decodedQuery = decodeURIComponent(decodeURIComponent(query));
-                    return `${dirName}${fileName}${slugify(decodedQuery)}`;
-                };
-            }
-
-            const result = await mixer(includes, {
-                ...mixerOptions,
-            });
+            const result = await mixer(includes, mixerOptions);
 
             await result.write(outfile);
 

build/tasks/versions.js

@@ -1,441 +0,0 @@
-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 {
-    createReadStream,
-    createWriteStream,
-} from 'node:fs';
-import {
-    mkdir,
-    rename,
-    rm,
-    readFile,
-    writeFile,
-} from 'node:fs/promises';
-import {
-    basename,
-    dirname,
-} from 'node:path';
-import readline from 'node:readline';
-
-export const REGEXP_SEMVER = /^(?<major>0|[1-9]\d*)\.(?<minor>0|[1-9]\d*)\.(?<patch>0|[1-9]\d*)(?:-(?<prerelease>(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*)(?:\.(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*))*))?(?:\+(?<buildmetadata>[0-9a-zA-Z-]+(?:\.[0-9a-zA-Z-]+)*))?$/;
-
-/**
- * @typedef  {object} VersionOptions
- * @property {string|number|null} prettyPrint   - A string or number to insert
- *     white space into the output JSON string for readability purposes.
- * @property {string}             versionFormat - The version number format.
- * @property {string|RegExp}      versionKey    - Either:
- *     - A string representing the JSON field name assign the version number to.
- *
- *       Explicit:
- *
- *       ```json
- *       "key": "json:version"
- *       ```
- *
- *       Implicit:
- *
- *       ```json
- *       "key": "version"
- *       ```
- *
- *     - A `RegExp` object or regular expression string prefixed with `regexp:`.
- *
- *       ```json
- *       "key": "regexp:(?<=^const ASSETS_VERSION = ')(?<version>\\d+)(?=';$)"
- *       ```
- *
- *       ```js
- *       key: new RegExp('(?<=^const ASSETS_VERSION = ')(?<version>\\d+)(?=';$)')
- *       ```
- *
- *       ```js
- *       key: /(?<=^const ASSETS_VERSION = ')(?<version>\d+)(?=';$)/
- *       ```
- */
-
-/**
- * @const {VersionOptions} defaultVersionOptions     - The default shared version options.
- * @const {VersionOptions} developmentVersionOptions - The predefined version options for development.
- * @const {VersionOptions} productionVersionOptions  - The predefined version options for production.
- */
-export const defaultVersionOptions = {
-    prettyPrint:   4,
-    versionFormat: 'timestamp',
-    versionKey:    'version',
-};
-export const developmentVersionOptions = Object.assign({}, defaultVersionOptions);
-export const productionVersionOptions  = Object.assign({}, defaultVersionOptions);
-
-/**
- * @const {object} developmentVersionFilesArgs - The predefined `bumpVersion()` options for development.
- * @const {object} productionVersionFilesArgs  - The predefined `bumpVersion()` options for production.
- */
-export const developmentVersionFilesArgs = [
-    developmentVersionOptions,
-];
-export const productionVersionFilesArgs  = [
-    productionVersionOptions,
-];
-
-/**
- * Bumps version numbers in file.
- *
- * @async
- * @param  {object} [versionOptions=null] - Customize the version options.
- *     If `null`, default production options are used.
- * @return {Promise}
- */
-export default async function bumpVersions(versionOptions = null) {
-    if (versionOptions == null) {
-        versionOptions = productionVersionOptions;
-    } else if (
-        versionOptions !== developmentVersionOptions &&
-        versionOptions !== productionVersionOptions
-    ) {
-        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,
-        ...options
-    }) => {
-        if (!label) {
-            label = basename(outfile || 'undefined');
-        }
-
-        options.pretty = (options.pretty ?? versionOptions.prettyPrint);
-        options.format = (options.format ?? versionOptions.versionFormat);
-        options.key    = (options.key ?? versionOptions.versionKey);
-
-        if (queue.has(outfile)) {
-            queue.get(outfile).then(() => handleBumpVersion(outfile, label, options));
-        } else {
-            queue.set(outfile, handleBumpVersion(outfile, label, options));
-        }
-    });
-};
-
-/**
- * Creates a formatted version number or string.
- *
- * @param  {string}  format     - The version format.
- * @param  {?string} [oldValue] - The old version value.
- * @return {string|number}
- * @throws TypeError If the format or value are invalid.
- */
-function createVersionNumber(format, oldValue = null) {
-    let [ type, modifier ] = format.split(':', 2);
-
-    switch (type) {
-        case 'hex':
-        case 'hexadecimal':
-            try {
-                modifier = Number.parseInt(modifier);
-
-                if (Number.isNaN(modifier)) {
-                    modifier = 6;
-                }
-
-                return randomBytes(modifier).toString('hex');
-            } catch (err) {
-                throw new TypeError(
-                    `${err.message} for \'format\' type "hexadecimal"`,
-                    { cause: err }
-                );
-            }
-
-        case 'inc':
-        case 'increment':
-            try {
-                if (modifier === 'semver') {
-                    return incrementSemVer(oldValue, [ 'buildmetadata', 'patch' ]);
-                }
-
-                return incrementNumber(oldValue, modifier);
-            } catch (err) {
-                throw new TypeError(
-                    `${err.message} for \'format\' type "increment"`,
-                    { cause: err }
-                );
-            }
-
-        case 'regex':
-        case 'regexp':
-            try {
-                return new RegExp(modifier);
-            } catch (err) {
-                throw new TypeError(
-                    `${err.message} for \'format\' type "regexp"`,
-                    { cause: err }
-                );
-            }
-
-        case 'timestamp':
-            return Date.now().valueOf();
-    }
-
-    throw new TypeError(
-        'Expected \'format\' to be either "timestamp", "increment", or "hexadecimal"'
-    );
-}
-
-/**
- * @async
- * @param  {string} outfile
- * @param  {string} label
- * @param  {object} options
- * @return {Promise}
- */
-async function handleBumpVersion(outfile, label, options) {
-    const timeLabel = `${label} bumped in`;
-    console.time(timeLabel);
-
-    try {
-        options.key = parseVersionKey(options.key);
-
-        if (options.key instanceof RegExp) {
-            await handleBumpVersionWithRegExp(outfile, label, options);
-        } else {
-            await handleBumpVersionInJson(outfile, label, options);
-        }
-
-        message(`${label} bumped`, 'success', timeLabel);
-    } catch (err) {
-        message(`Error bumping ${label}`, 'error');
-        message(err);
-
-        notification({
-            title:   `${label} bumping failed 🚨`,
-            message: `${err.name}: ${err.message}`
-        });
-    }
-}
-
-/**
- * Changes the version number for the provided JSON key in file.
- *
- * @async
- * @param  {string} outfile
- * @param  {string} label
- * @param  {object} options
- * @param  {string} options.key
- * @return {Promise}
- */
-async function handleBumpVersionInJson(outfile, label, options) {
-    outfile = resolve(outfile);
-
-    let json;
-
-    try {
-        json = JSON.parse(await readFile(outfile, { encoding: 'utf8' }));
-    } catch (err) {
-        json = {};
-
-        message(`${label} is a new file`, 'notice');
-
-        await mkdir(dirname(outfile), { recursive: true });
-    }
-
-    json[options.key] = createVersionNumber(options.format, json?.[options.key]);
-
-    return await writeFile(
-        outfile,
-        JSON.stringify(json, null, options.pretty),
-        { encoding: 'utf8' }
-    );
-}
-
-/**
- * Changes the version number for the provided RegExp in file.
- *
- * @async
- * @param  {string} outfile
- * @param  {string} label
- * @param  {object} options
- * @param  {RegExp} options.key
- * @return {Promise}
- */
-async function handleBumpVersionWithRegExp(outfile, label, options) {
-    outfile = resolve(outfile);
-
-    const bckfile = `${outfile}~`;
-
-    await rename(outfile, bckfile);
-
-    try {
-        const rl = readline.createInterface({
-            input: createReadStream(bckfile),
-        });
-
-        let newVersion = null;
-
-        const writeStream = createWriteStream(outfile, { encoding: 'utf8' });
-
-        rl.on('line', (line) => {
-            const found = line.match(options.key);
-
-            if (found) {
-                const groups      = (found.groups ?? {});
-                const oldVersion  = (groups.build ?? groups.version ?? found[1] ?? found[0]);
-                const newVersion  = createVersionNumber(options.format, oldVersion);
-                const replacement = found[0].replace(oldVersion, newVersion);
-
-                line = line.replace(found[0], replacement);
-            }
-
-            writeStream.write(line + "\n");
-        });
-
-        await events.once(rl, 'close');
-
-        await rm(bckfile);
-    } catch (err) {
-        await rm(outfile, { force: true });
-
-        await rename(bckfile, outfile);
-
-        throw err;
-    }
-}
-
-/**
- * Increments the given integer.
- *
- * @param  {string|int} value         - The number to increment.
- * @param  {string|int} [increment=1] - The amount to increment by.
- * @return {int}
- * @throws TypeError If the version number is invalid.
- */
-function incrementNumber(value, increment = 1) {
-    const version = Number.parseInt(value);
-    if (Number.isNaN(version)) {
-        throw new TypeError(
-            `Expected an integer version number, received [${value}]`
-        );
-    }
-
-    increment = Number.parseInt(increment);
-    if (Number.isNaN(increment)) {
-        throw new TypeError(
-            'Expected an integer increment number'
-        );
-    }
-
-    return (version + increment);
-}
-
-/**
- * Increments the given SemVer version number.
- *
- * @param  {string}          value     - The version to mutate.
- * @param  {string|string[]} [target]  - The segment to increment, one of:
- *     'major', 'minor', 'patch', ~~'prerelease'~~, 'buildmetadata'.
- * @param  {string|int}      [increment=1] - The amount to increment by.
- * @return {string}
- * @throws TypeError If the version or target are invalid.
- */
-function incrementSemVer(value, target = 'patch', increment = 1) {
-    const found = value.match(REGEXP_SEMVER);
-    if (!found) {
-        throw new TypeError(
-            `Expected a SemVer version number, received [${value}]`
-        );
-    }
-
-    if (Array.isArray(target)) {
-        for (const group of target) {
-            if (found.groups[group] != null) {
-                target = group;
-                break;
-            }
-        }
-    }
-
-    if (!target || !found.groups[target]) {
-        throw new TypeError(
-            `Expected a supported SemVer segment, received [${target}]`
-        );
-    }
-
-    const segments = {
-        'major':         '',
-        'minor':         '.',
-        'patch':         '.',
-        'prerelease':    '-',
-        'buildmetadata': '+',
-    };
-
-    let replacement = '';
-
-    for (const [ segment, delimiter ] of Object.entries(segments)) {
-        if (found.groups?.[segment] != null) {
-            const newVersion = (segment === target)
-                ? incrementNumber(found.groups[segment], increment)
-                : found.groups[segment];
-
-            replacement += `${delimiter}${newVersion}`;
-        }
-    }
-
-    return value.replace(found[0], replacement);
-}
-
-/**
- * Parses the version key.
- *
- * @param  {*} key - The version key.
- * @return {string|RegExp}
- */
-function parseVersionKey(key) {
-    if (key instanceof RegExp) {
-        return key;
-    }
-
-    if (typeof key !== 'string') {
-        throw new TypeError(
-            'Expected \'key\' to be either a string or a RegExp'
-        );
-    }
-
-    const delimiter = key.indexOf(':');
-
-    if (delimiter === -1) {
-        // Assumes its a JSON key
-        return key;
-    }
-
-    const type  = key.slice(0, delimiter);
-    const value = key.slice(delimiter + 1);
-
-    switch (type) {
-        case 'json':
-            return value;
-
-        case 'regex':
-        case 'regexp':
-            return new RegExp(value);
-    }
-
-    throw new TypeError(
-        'Expected \'key\' type to be either "json" or "regexp"'
-    );
-}

build/utils/config.js

@@ -0,0 +1,64 @@
+/**
+ * @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');
+}

build/utils/glob.js

@@ -0,0 +1,95 @@
+/**
+ * @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);
+        });
+    };
+}

build/utils/index.js

@@ -1,115 +0,0 @@
-/**
- * @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,
-};

build/utils/message.js

@@ -11,16 +11,12 @@ import kleur from 'kleur';
  * @param {string} [type]    - The type of message.
  * @param {string} [timerID] - The console time label to output.
  */
-function message(text, type, timerID) {
+export default function message(text, type, timerID) {
     switch (type) {
         case 'success':
             console.log('✅ ', kleur.bgGreen().black(text));
             break;
 
-        case 'chore':
-            console.log('🧹 ', kleur.bgGreen().black(text));
-            break;
-
         case 'notice':
             console.log('ℹ️  ', kleur.bgBlue().black(text));
             break;
@@ -52,10 +48,4 @@ function message(text, type, timerID) {
     }
 
     console.log('');
-}
-
-export default message;
-
-export {
-    message,
 };

build/utils/notification.js

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

build/utils/postcss.js

@@ -0,0 +1,27 @@
+/**
+ * @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
+};

build/utils/template.js

@@ -3,10 +3,6 @@
  */
 
 import loconfig from './config.js';
-import {
-    escapeRegExp,
-    flatten
-} from '../utils/index.js';
 
 const templateData = flatten({
     paths: loconfig.paths
@@ -26,7 +22,7 @@ const templateData = flatten({
  * @param  {object} [data] - An object in the form `{ 'from': 'to', … }`.
  * @return {*} Returns the transformed value.
  */
-function resolve(input, data = templateData) {
+export default function resolve(input, data = templateData) {
     switch (typeof input) {
         case 'string': {
             return resolveValue(input, data);
@@ -60,7 +56,7 @@ function resolve(input, data = templateData) {
  * @param  {object} [data] - An object in the form `{ 'from': 'to', … }`.
  * @return {string} Returns the translated string.
  */
-function resolveValue(input, data = templateData) {
+export function resolveValue(input, data = templateData) {
     const tags = [];
 
     if (data !== templateData) {
@@ -97,9 +93,55 @@ function resolveValue(input, data = templateData) {
     });
 }
 
-export default resolve;
+/**
+ * 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 {
-    resolve,
-    resolveValue,
-};
+        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, '\\$&');
+}

build/watch.js

@@ -2,11 +2,10 @@ 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 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 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 browserSync from 'browser-sync';
 import { join } from 'node:path';
 
@@ -70,18 +69,16 @@ function configureServer(server, { paths, tasks }) {
     });
 
     // Watch source concats
-    if (tasks.concats?.length) {
-        server.watch(
-            resolve(
-                tasks.concats.reduce(
-                    (patterns, { includes }) => patterns.concat(includes),
-                    []
-                )
+    server.watch(
+        resolve(
+            tasks.concats.reduce(
+                (patterns, { includes }) => patterns.concat(includes),
+                []
             )
-        ).on('change', () => {
-            concatFiles(...developmentConcatFilesArgs);
-        });
-    }
+        )
+    ).on('change', () => {
+        concatFiles(...developmentConcatFilesArgs);
+    });
 
     // Watch source styles
     server.watch(
@@ -116,8 +113,7 @@ function createServerOptions({
 }) {
     const config = {
         open: false,
-        notify: false,
-        ghostMode: false
+        notify: false
     };
 
     // Resolve the URL for the BrowserSync server

docs/development.md

@@ -15,7 +15,6 @@
   * [`scripts`](#scripts)
   * [`styles`](#styles)
   * [`svgs`](#svgs)
-  * [`versions`](#versions)
 
 ---
 
@@ -29,9 +28,7 @@ Learn more about the boilerplate's [tasks](#tasks) below.
 Make sure you have the following installed:
 
 * [Node] — at least 14.17, 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.
+* [NPM] — at least 6.0, the latest LTS is recommended.
 
 ```sh
 # Switch to recommended Node version from .nvmrc
@@ -265,8 +262,8 @@ See [`scripts.js`](../build/tasks/scripts.js) for details.
 
 ### `styles`
 
-A wrapper around [sass] (with optional support for [Autoprefixer]
-via [PostCSS]) for compiling and minifying Sass into CSS.
+A wrapper around [node-sass] (and optionally [Autoprefixer] via [PostCSS])
+for compiling and minifying Sass into CSS.
 
 By default, [PostCSS] and [Autoprefixer] are installed with the boilerplate.
 
@@ -301,9 +298,6 @@ Example:
 
 See [`styles.js`](../build/tasks/styles.js) for details.
 
-The task also supports [PurgeCSS] to remove unused CSS.
-See the [documentation on our Grid System](grid.md#build-tasks) for details.
-
 ### `svgs`
 
 A wrapper around [SVG Mixer] for transforming and minifying SVG files
@@ -334,86 +328,6 @@ Example:
 
 See [`svgs.js`](../build/tasks/svgs.js) for details.
 
-### `versions`
-
-A task to create and update values for use in versioning assets.
-
-Can generate a hexadecimal value (using random bytes), use the current timestamp,
-or increment a number.
-
-Example:
-
-```json
-{
-    "versions": [
-        {
-            "format": "timestamp",
-            "key": "now",
-            "outfile": "./assets.json"
-        },
-        {
-            "format": "hex:8",
-            "key": "hex",
-            "outfile": "./assets.json"
-        },
-        {
-            "format": "inc:semver",
-            "key": "inc",
-            "outfile": "./assets.json"
-        }
-    ]
-}
-```
-
-```json
-{
-    "now": 1665071717350,
-    "hex": "6ef54181c4ba",
-    "hex": "1.0.2"
-}
-```
-
-The task supports replacing the value of a data key in a JSON file or replacing
-a string in a file using a [regular expression](RegExp).
-
-* Explicit JSON field name:
-    ```json
-    {
-        "key": "json:version"
-    }
-    ```
-* Implicit JSON field name:
-    ```json
-    {
-        "key": "version"
-    }
-    ```
-
-The regular expression can be a `RegExp` object or a pattern prefixed with `regexp:`.
-
-* ```json
-  {
-      "key": "regexp:(?<=^const ASSETS_VERSION = ')(?<build>\\d+)(?=';$)"
-  }
-  ```
-
-* ```js
-  {
-      key: new RegExp('(?<=^const ASSETS_VERSION = ')(?<version>\\d+)(?=';$)')
-  }
-  ```
-* ```js
-  {
-      key: /^ \* Version: +(?:.+?)\+(.+?)$/
-  }
-  ```
-
-The regular expression pattern will match the first occurrence and replace
-the first match in the following order: `build` (named capture), `version`
-(named capture), `1` (first capture), or `0` (whole match).
-
-See [`versions.js`](../build/tasks/versions.js) for details.
-
 [Autoprefixer]: https://npmjs.com/package/autoprefixer
 [BrowserSync]:  https://npmjs.com/package/browser-sync
 [concat]:       https://npmjs.com/package/concat
@@ -422,11 +336,9 @@ 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/
-[sass]:         https://npmjs.com/package/sass
+[node-sass]:    https://npmjs.com/package/node-sass
 [NPM]:          https://npmjs.com/
 [NVM]:          https://github.com/nvm-sh/nvm
 [PostCSS]:      https://npmjs.com/package/postcss
-[PurgeCSS]:     https://purgecss.com/
-[RegExp]:       https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp
 [SVG Mixer]:    https://npmjs.com/package/svg-mixer
 [tiny-glob]:    https://npmjs.com/package/tiny-glob

docs/grid.md

@@ -1,109 +0,0 @@
-# Grid system
-
-* [Architectures](#architecture)
-  * [Build tasks](#build-tasks)
-    * [Configuration](#configuration)
-* [Usage](#usage)
-  * [Example](#example)
-
-## Architecture
-
-The boilerplate's grid system is meant to be simple and easy to use. The goal is to create a light, flexible, and reusable way to build layouts.
-The following styles are needed to work properly:
-
-* [`o-grid`](../assets/styles/objects/_grid.scss) — Object file where the default grid styles are set such as column numbers, modifiers, and options.
-* [`u-grid-columns`](../assets/styles/utilities/_grid-column.scss) — Utility file that generates the styles for every possible column based on an array of media queries and column numbers.
-
-### Build tasks
-
-The columns generated by [`u-grid-columns`](../assets/styles/utilities/_grid-column.scss) adds a lot of styles to the compiled CSS file. To mitigate that, [PurgeCSS] is integrated into the `styles` build task to purge unused CSS.
-
-#### Configuration
-
-Depending on your project, you will need to specify all the files that include CSS classes from the grid system. These files will be scanned by [PurgeCSS] to your compiled CSS files.
-
-Example of a Charcoal project:
-
-```jsonc
-"purgeCSS": {
-    "content": [
-        "./views/app/template/**/*.mustache",
-        "./src/App/Template/*.php",
-        "./assets/scripts/**/*" // use case: `el.classList.add('u-gc-1/2')`
-    ]
-}
-```
-
-## Usage
-
-The first step is to set intial SCSS values in the following files :
-
-- [`settings/_config.scss`](../assets/styles/settings/_config.scss)
-
-    ```scss
-    // Grid
-    // ==========================================================================
-    $base-column-nb: 12;
-    $base-column-gap: $unit-small;
-    ```
-
-    You can create multiple column layouts depending on media queries.
-
-- [`objects/_grid.scss`](../assets/styles/objects/_grid.scss)
-
-    ```scss
-    .o-grid {
-        display: grid;
-        width: 100%;
-        margin: 0;
-        padding: 0;
-        list-style: none;
-
-        // ==========================================================================
-        // Cols
-        // ==========================================================================
-        &.-col-#{$base-column-nb} {
-            grid-template-columns: repeat(#{$base-column-nb}, 1fr);
-        }
-
-        &.-col-4 {
-            grid-template-columns: repeat(4, 1fr);
-        }
-
-        &.-col-#{$base-column-nb}\@from-md {
-            @media (min-width: $from-md) {
-                grid-template-columns: repeat(#{$base-column-nb}, 1fr);
-            }
-        }
-        // …
-    ```
-
-### Example
-
-The following layout has 4 columns at `>=999px` and 12 columns at `<1000px`.
-
-```html
-<div class="o-container">
-    <h1 class="c-heading -h1">Hello</h1>
-
-    <div class="o-grid -col-4 -col-12@from-medium -gutters">
-        <div class="o-grid_item u-gc-1/8@from-medium">
-            <h2 class="c-heading -h2">This grid has 4 columns and 12 columns from `medium` MQ</h2>
-        </div>
-
-        <div class="o-grid_item u-gc-1/5@from-medium">
-            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita provident distinctio deleniti eaque cumque doloremque aut quo dicta porro commodi, temporibus totam dolor autem tempore quasi ullam sed suscipit vero?</p>
-        </div>
-
-        <div class="o-grid_item u-gc-5/9@from-medium">
-            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita provident distinctio deleniti eaque cumque doloremque aut quo dicta porro commodi, temporibus totam dolor autem tempore quasi ullam sed suscipit vero?</p>
-        </div>
-
-        <div class="o-grid_item u-gc-9/13@from-medium">
-            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita provident distinctio deleniti eaque cumque doloremque aut quo dicta porro commodi, temporibus totam dolor autem tempore quasi ullam sed suscipit vero?</p>
-        </div>
-    </div>
-</div>
-```
-
-[PurgeCSS]: https://purgecss.com/

docs/technologies.md

@@ -80,10 +80,10 @@ Learn about [namespacing](https://csswizardry.com/2015/03/more-transparent-ui-co
 }
 
 .c-block_heading {
-    @media (max-width: $to-md) {
+    @media (max-width: $to-medium) {
         .c-block.-large & {
             margin-bottom: rem(40px);
-        }
+        } 
     }
 }
 ```
@@ -181,7 +181,10 @@ detection and smooth scrolling with parallax.
 ```js
 import LocomotiveScroll from 'locomotive-scroll';
 
-this.scroll = new LocomotiveScroll({})
+this.scroll = new LocomotiveScroll({
+    el: this.el,
+    smooth: true
+});
 ````
 
 Learn more about [Locomotive Scroll][locomotive-scroll].

loconfig.json

@@ -15,11 +15,11 @@
             "dest": "./www/assets/scripts"
         },
         "svgs": {
-            "src": "./assets/svgs",
+            "src": "./assets/images/sprite",
             "dest": "./www/assets/images"
         },
         "views": {
-            "src": "./www/"
+            "src": "./views/boilerplate/template"
         }
     },
     "tasks": {
@@ -56,17 +56,6 @@
                 ],
                 "outfile": "{% paths.svgs.dest %}/sprite.svg"
             }
-        ],
-        "purgeCSS": {
-            "content": [
-                "./www/**/*.html",
-                "./assets/scripts/**/*"
-            ]
-        },
-        "versions": [
-            {
-                "outfile": "./assets.json"
-            }
         ]
     }
 }

package.json

@@ -6,42 +6,30 @@
     "author": "Locomotive <info@locomotive.ca>",
     "type": "module",
     "engines": {
-        "node": ">=20",
-        "npm": ">=10"
+        "node": ">=14.17",
+        "npm": ">=6.0"
     },
     "scripts": {
-        "start": "node --no-warnings build/watch.js",
-        "build": "node --no-warnings build/build.js"
+        "start": "node --experimental-json-modules --no-warnings build/watch.js",
+        "build": "node --experimental-json-modules --no-warnings build/build.js"
     },
     "dependencies": {
-        "locomotive-scroll": "^5.0.0-beta.21",
+        "locomotive-scroll": "^4.1.4",
         "modujs": "^1.4.2",
-        "modularload": "^1.2.6"
+        "modularload": "^1.2.6",
+        "normalize.css": "^8.0.1",
+        "svg4everybody": "^2.1.9"
     },
     "devDependencies": {
-        "autoprefixer": "^10.4.20",
-        "browser-sync": "^3.0.2",
-        "common-path": "^1.0.1",
+        "autoprefixer": "^10.4.4",
+        "browser-sync": "^2.27.9",
         "concat": "^1.0.3",
-        "esbuild": "^0.24.2",
-        "kleur": "^4.1.5",
+        "esbuild": "^0.14.27",
+        "kleur": "^4.1.4",
         "node-notifier": "^10.0.1",
-        "postcss": "^8.4.49",
-        "purgecss": "^7.0.2",
-        "sass": "^1.79.5",
-        "svg-mixer": "^2.4.0",
+        "node-sass": "^7.0.1",
+        "postcss": "^8.4.12",
+        "svg-mixer": "^2.3.14",
         "tiny-glob": "^0.2.9"
-    },
-    "overrides": {
-        "browser-sync": {
-            "ua-parser-js": "^1.0.33"
-        },
-        "svg-mixer": {
-            "micromatch": "^4.0.8",
-            "postcss": "^8.4.49"
-        },
-        "svg-mixer-utils": {
-            "anymatch": "^3.1.3"
-        }
     }
 }

www/assets/styles/critical.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"critical.css"}

www/form.html

@@ -18,19 +18,18 @@
     </head>
     <body data-module-load>
         <div data-load-container>
-            <div data-module-scroll="main">
-                <header>
+            <div class="o-scroll" data-module-scroll="main">
+                <header data-scroll-section>
                     <a href="/"><h1>Locomotive Boilerplate</h1></a>
                     <nav>
                         <ul>
                             <li><a href="images.html">Images</a></li>
                             <li><a href="form.html" data-load="customTransition">Form</a></li>
-                            <li><a href="grid.html">Grid</a></li>
                         </ul>
                     </nav>
                 </header>
 
-                <main>
+                <main data-scroll-section>
                     <div class="o-container">
                         <h1 class="c-heading -h1">Page</h1>
 
@@ -90,12 +89,15 @@
                     </div>
                 </main>
 
-                <footer>
+                <footer data-scroll-section>
                     <p>Made with <a href="https://github.com/locomotivemtl/locomotive-boilerplate" title="Locomotive Boilerplate" target="_blank" rel="noopener">🚂</a></p>
                 </footer>
             </div>
         </div>
 
+        <script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js" crossorigin="anonymous"></script>
+        <script nomodule src="https://polyfill.io/v3/polyfill.min.js?features=Element.prototype.remove%2CElement.prototype.append%2Cfetch%2CCustomEvent%2CElement.prototype.matches%2CNodeList.prototype.forEach%2CAbortController" crossorigin="anonymous"></script>
+
         <script src="assets/scripts/vendors.js" defer></script>
         <script src="assets/scripts/app.js" defer></script>
     </body>

www/grid.html

@@ -1,90 +0,0 @@
-<!doctype html>
-<html class="is-loading" lang="en" data-page="grid">
-<head>
-    <meta charset="utf-8">
-    <title>Locomotive Boilerplate</title>
-    <meta name="description" content="">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-
-    <meta name="theme-color" content="#ffffff">
-    <meta name="msapplication-TileColor" content="#ffffff">
-    <link rel="manifest" href="site.webmanifest">
-    <link rel="apple-touch-icon" sizes="180x180" href="assets/images/favicons/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicons/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicons/favicon-16x16.png">
-    <link rel="mask-icon" href="assets/images/favicons/safari-pinned-tab.svg" color="#000000">
-    <!-- For a dark mode managment and svg favicon add this in your favicon.svg -->
-    <!--
-            <style>
-                path {
-                    fill: #000;
-                }
-                @media (prefers-color-scheme: dark) {
-                    path {
-                        fill: #fff;
-                    }
-                }
-            </style>
-        -->
-    <!-- <link rel="icon" href="assets/images/favicons/favicon.svg"> -->
-
-    <link id="main-css" rel="stylesheet" href="assets/styles/main.css" media="print"
-        onload="this.media='all'; this.onload=null; this.isLoaded=true">
-</head>
-
-<body data-module-load>
-    <div data-load-container>
-        <div data-module-scroll="main">
-            <header>
-                <a href="/">
-                    <h1>Locomotive Boilerplate</h1>
-                </a>
-                <nav>
-                    <ul>
-                        <li><a href="images.html">Images</a></li>
-                        <li><a href="form.html" data-load="customTransition">Form</a></li>
-                        <li><a href="grid.html">Grid</a></li>
-                    </ul>
-                </nav>
-            </header>
-
-            <main>
-                <div class="o-container">
-                    <h1 class="c-heading -h1">Hello</h1>
-
-                    <div class="o-grid -col-4 -col-12@from-medium -gutters">
-                        <div class="o-grid_item u-gc-1/8@from-medium" style="background-color: gray;">
-                            <h2 class="c-heading -h2">This grid has 4 columns and 12 columns from `medium` MQ</h2>
-                        </div>
-
-                        <div class="o-grid_item u-gc-1/5@from-medium" style="background-color: yellow;">
-                            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita provident distinctio deleniti eaque cumque doloremque aut quo dicta porro commodi, temporibus totam dolor autem tempore quasi ullam sed suscipit vero?</p>
-                        </div>
-
-                        <div class="o-grid_item u-gc-5/9@from-medium" style="background-color: red;">
-                            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita provident distinctio deleniti eaque cumque doloremque aut quo dicta porro commodi, temporibus totam dolor autem tempore quasi ullam sed suscipit vero?</p>
-                        </div>
-
-                        <div class="o-grid_item u-gc-9/13@from-medium" style="background-color: blue;">
-                            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita provident distinctio deleniti eaque cumque doloremque aut quo dicta porro commodi, temporibus totam dolor autem tempore quasi ullam sed suscipit vero?</p>
-                        </div>
-
-                        <div class="o-grid_item u-gc-1/3 u-gc-5/13@from-medium" style="background-color: pink;">
-                            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita provident distinctio deleniti eaque cumque doloremque aut quo dicta porro commodi, temporibus totam dolor autem tempore quasi ullam sed suscipit vero?</p>
-                        </div>
-                    </div>
-                </div>
-            </main>
-
-            <footer>
-                <p>Made with <a href="https://github.com/locomotivemtl/locomotive-boilerplate"
-                        title="Locomotive Boilerplate" target="_blank" rel="noopener">🚂</a></p>
-            </footer>
-        </div>
-    </div>
-
-    <script src="assets/scripts/vendors.js" defer></script>
-    <script src="assets/scripts/app.js" defer></script>
-</body>
-
-</html>

www/images.html

@@ -18,19 +18,18 @@
     </head>
     <body data-module-load>
         <div data-load-container>
-            <div data-module-scroll="main">
-                <header>
+            <div class="o-scroll" data-module-scroll="main">
+                <header data-scroll-section>
                     <a href="/"><h1>Locomotive Boilerplate</h1></a>
                     <nav>
                         <ul>
                             <li><a href="images.html">Images</a></li>
                             <li><a href="form.html" data-load="customTransition">Form</a></li>
-                            <li><a href="grid.html">Grid</a></li>
                         </ul>
                     </nav>
                 </header>
 
-                <main>
+                <main data-scroll-section>
                     <div class="o-container">
                         <h1 class="c-heading -h1">Images</h1>
 
@@ -40,8 +39,8 @@
                             <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 class="o-ratio u-4:3"><img data-load-src="http://picsum.photos/640/480?v=1" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></div>
+                                <div class="o-ratio u-4:3"><img data-load-src="http://picsum.photos/640/480?v=2" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></div>
                             </div>
 
                             <h4 class="c-heading -h3">Using o-ratio & background-image</h3>
@@ -59,30 +58,30 @@
 
                             <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==" />
+                                    <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>
                                 <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==" />
+                                    <img data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/640/480?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==" />
+                                    <img data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/640/480?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==" />
+                                    <img data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/640/480?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==" />
+                                    <img data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/640/480?v=5" 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 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 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/640/480?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/640/480?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/640/480?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/640/480?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/640/480?v=5"></div>
                             </div>
 
                             <h4 class="c-heading -h3">Using SVG viewport for ratio</h3>
@@ -116,12 +115,15 @@
                     </div>
                 </main>
 
-                 <footer>
+                 <footer data-scroll-section>
                     <p>Made with <a href="https://github.com/locomotivemtl/locomotive-boilerplate" title="Locomotive Boilerplate" target="_blank" rel="noopener">🚂</a></p>
                 </footer>
             </div>
         </div>
 
+        <script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js" crossorigin="anonymous"></script>
+        <script nomodule src="https://polyfill.io/v3/polyfill.min.js?features=Element.prototype.remove%2CElement.prototype.append%2Cfetch%2CCustomEvent%2CElement.prototype.matches%2CNodeList.prototype.forEach%2CAbortController" crossorigin="anonymous"></script>
+
         <script src="assets/scripts/vendors.js" defer></script>
         <script src="assets/scripts/app.js" defer></script>
     </body>

www/index.html

@@ -29,21 +29,14 @@
         -->
     <!-- <link rel="icon" href="assets/images/favicons/favicon.svg"> -->
 
-    <!-- Preload Fonts -->
-    <link rel="preload" href="assets/fonts/SourceSans3-Bold.woff2" as="font" type="font/woff2" crossorigin>
-    <link rel="preload" href="assets/fonts/SourceSans3-BoldIt.woff2" as="font" type="font/woff2" crossorigin>
-    <link rel="preload" href="assets/fonts/SourceSans3-Regular.woff2" as="font" type="font/woff2" crossorigin>
-    <link rel="preload" href="assets/fonts/SourceSans3-RegularIt.woff2" as="font" type="font/woff2" crossorigin>
-
     <link id="main-css" rel="stylesheet" href="assets/styles/main.css" media="print"
         onload="this.media='all'; this.onload=null; this.isLoaded=true">
 </head>
 
 <body data-module-load>
-
     <div data-load-container>
-        <div data-module-scroll="main">
-            <header>
+        <div class="o-scroll" data-module-scroll="main">
+            <header data-scroll-section>
                 <a href="/">
                     <h1>Locomotive Boilerplate</h1>
                 </a>
@@ -51,24 +44,29 @@
                     <ul>
                         <li><a href="images.html">Images</a></li>
                         <li><a href="form.html" data-load="customTransition">Form</a></li>
-                        <li><a href="grid.html">Grid</a></li>
                     </ul>
                 </nav>
             </header>
 
-            <main data-module-example>
+            <main data-scroll-section>
                 <div class="o-container">
                     <h1 class="c-heading -h1">Hello</h1>
                 </div>
             </main>
 
-            <footer>
+            <footer data-scroll-section>
                 <p>Made with <a href="https://github.com/locomotivemtl/locomotive-boilerplate"
                         title="Locomotive Boilerplate" target="_blank" rel="noopener">🚂</a></p>
             </footer>
         </div>
     </div>
 
+    <script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js"
+        crossorigin="anonymous"></script>
+    <script nomodule
+        src="https://polyfill.io/v3/polyfill.min.js?features=Element.prototype.remove%2CElement.prototype.append%2Cfetch%2CCustomEvent%2CElement.prototype.matches%2CNodeList.prototype.forEach%2CAbortController"
+        crossorigin="anonymous"></script>
+
     <script src="assets/scripts/vendors.js" defer></script>
     <script src="assets/scripts/app.js" defer></script>
 </body>