Add tailwindcss (WIP)

Update node version & bump npm packages version

.nvmrc

@@ -1 +1 @@
-v17.9
+v20.10

assets.json

@@ -1,3 +1,3 @@
 {
-    "version": 1675955478084
+    "version": 1705517859211
 }

assets/scripts/app.js

@@ -1,15 +1,16 @@
 import modular from 'modujs';
 import * as modules from './modules';
 import globals from './globals';
-import { html } from './utils/environment';
-import config from './config'
+import { debounce } from './utils/tickers'
+import { $html } from './utils/dom';
+import { ENV, FONT, CUSTOM_EVENT, CSS_CLASS } from './config'
 import { isFontLoadingAPIAvailable, loadFonts } from './utils/fonts';
 
 const app = new modular({
     modules: modules,
 });
 
-window.onload = (event) => {
+window.addEventListener('load', (event) => {
     const $style = document.getElementById('main-css');
 
     if ($style) {
@@ -23,30 +24,34 @@ window.onload = (event) => {
     } else {
         console.warn('The "main-css" stylesheet not found');
     }
-};
-
-export const EAGER_FONTS = [
-    { family: 'Source Sans', style: 'normal', weight: 400 },
-    { family: 'Source Sans', style: 'normal', weight: 700 },
-];
+});
 
 function init() {
     globals();
 
     app.init(app);
 
-    html.classList.add('is-loaded');
-    html.classList.add('is-ready');
-    html.classList.remove('is-loading');
+    $html.classList.add(CSS_CLASS.LOADED);
+    $html.classList.add(CSS_CLASS.READY);
+    $html.classList.remove(CSS_CLASS.LOADING);
+
+    // Bind window resize event with default vars
+    const resizeEndEvent = new CustomEvent(CUSTOM_EVENT.RESIZE_END)
+    window.addEventListener('resize', () => {
+        $html.style.setProperty('--vw', `${document.documentElement.clientWidth * 0.01}px`)
+        debounce(() => {
+            window.dispatchEvent(resizeEndEvent)
+        }, 200, false)
+    })
 
     /**
      * Eagerly load the following fonts.
      */
     if (isFontLoadingAPIAvailable) {
-        loadFonts(EAGER_FONTS, config.IS_DEV).then((eagerFonts) => {
-            html.classList.add('fonts-loaded');
+        loadFonts(FONT.EAGER, ENV.IS_DEV).then((eagerFonts) => {
+            $html.classList.add(CSS_CLASS.FONTS_LOADED);
 
-            if (config.IS_DEV) {
+            if (ENV.IS_DEV) {
                 console.group('Eager fonts loaded!', eagerFonts.length, '/', document.fonts.size);
                 console.group('State of eager fonts:')
                 eagerFonts.forEach((font) => console.log(font.family, font.style, font.weight, font.status/*, font*/))

assets/scripts/config.js

@@ -7,18 +7,50 @@
  * > (since `process` is a Node API, not a web API).
  * > — https://esbuild.github.io/api/#platform
  */
-const env = process.env.NODE_ENV
 
-export default config = Object.freeze({
-    // Environments
-    ENV: env,
-    IS_PROD: env === 'production',
-    IS_DEV: env === 'development',
+const NODE_ENV = process.env.NODE_ENV
+const IS_MOBILE = window.matchMedia('(any-pointer:coarse)').matches
 
-    // CSS class names
-    CSS_CLASS: {
-        LOADING: 'is-loading',
-        READY: 'is-ready',
-        LOADED: 'is-loaded',
-    },
+// Main environment variables
+const ENV = Object.freeze({
+    // Node environment
+    NAME: NODE_ENV,
+    IS_PROD: NODE_ENV === 'production',
+    IS_DEV: NODE_ENV === 'development',
+
+    // Device
+    IS_MOBILE,
+    IS_DESKTOP: !IS_MOBILE,
 })
+
+// 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,10 +1,10 @@
 import svg4everybody from 'svg4everybody';
-import config from './config';
+import { ENV } from './config';
 
 // Dynamic imports for development mode only
 let gridHelper;
 (async () => {
-    if (config.IS_DEV) {
+    if (ENV.IS_DEV) {
         const gridHelperModule = await import('./utils/grid-helper');
         gridHelper = gridHelperModule?.gridHelper;
     }

assets/scripts/modules/Example.js

@@ -1,5 +1,5 @@
 import { module } from 'modujs';
-import { EAGER_FONTS } from '../app';
+import { FONT } from '../config';
 import { whenReady } from '../utils/fonts';
 
 export default class extends module {
@@ -8,7 +8,7 @@ export default class extends module {
     }
 
     init() {
-        whenReady(EAGER_FONTS).then((fonts) => this.onFontsLoaded(fonts));
+        whenReady(FONT.EAGER).then((fonts) => this.onFontsLoaded(fonts));
     }
 
     onFontsLoaded(fonts) {

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,18 +9,14 @@ export default class extends module {
 
     init() {
         this.scroll = new LocomotiveScroll({
-            el: this.el,
-            smooth: true
-        });
-
-        this.scroll.on('call', (func, way, obj, id) => {
-            // Using modularJS
-            this.call(func[0], { way, obj }, func[1], func[2]);
-        });
-
-        this.scroll.on('scroll', (args) => {
-            // console.log(args.scroll);
+            modularInstance: this,
         })
+
+        // // Force scroll to top
+        // if (history.scrollRestoration) {
+        //     history.scrollRestoration = 'manual'
+        //     window.scrollTo(0, 0)
+        // }
     }
 
     /**
@@ -41,11 +37,22 @@ export default class extends module {
      * @param {LocomotiveScroll} args - The Locomotive Scroll instance.
      */
     lazyLoad(args) {
-        lazyLoadImage(args.obj.el, null, () => {
+        lazyLoadImage(args.target, 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/dom.js

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

assets/scripts/utils/environment.js

@@ -1,9 +0,0 @@
-const APP_NAME     = 'Boilerplate';
-const DATA_API_KEY = '.data-api';
-
-const html         = document.documentElement;
-const body         = document.body;
-const isDebug      = html.hasAttribute('data-debug');
-
-
-export { APP_NAME, DATA_API_KEY, html, body, isDebug };

assets/scripts/utils/image.js

@@ -1,3 +1,5 @@
+import { CSS_CLASS } from '../config'
+
 /**
  * Get an image meta data
  *
@@ -89,14 +91,14 @@ const lazyLoadImage = async ($el, url, callback) => {
     }
 
     requestAnimationFrame(() => {
-        let lazyParent = $el.closest('.c-lazy')
+        let lazyParent = $el.closest(`.${CSS_CLASS.LAZY_CONTAINER}`)
 
         if(lazyParent) {
-            lazyParent.classList.add('-lazy-loaded')
+            lazyParent.classList.add(CSS_CLASS.LAZY_LOADED)
             lazyParent.style.backgroundImage = ''
         }
 
-        $el.classList.add('-lazy-loaded')
+        $el.classList.add(CSS_CLASS.LAZY_LOADED)
 
         callback?.()
     })

assets/scripts/utils/maths.js

@@ -28,7 +28,7 @@ const lerp = (x, y, a) => x * (1 - a) + y * a
  * @return {number} inverted lerp value
  */
 
-const invlerp = (x, y, a) => clamp((v - x)/(a - x))
+const invlerp = (x, y, a) => clamp((a - x)/(y - x))
 
 
 /**

assets/styles/components/_form.scss

@@ -27,7 +27,7 @@ $input-icon-color: 424242; // No #
 .c-form_input {
     padding: rem(10px);
     border: 1px solid lightgray;
-    background-color: $color-lightest;
+    background-color: color(lightest);
 
     &:hover {
         border-color: darkgray;
@@ -71,7 +71,7 @@ $checkbox-icon-color: $input-icon-color;
     }
 
     &::before {
-        background-color: $color-lightest;
+        background-color: color(lightest);
         border: 1px solid lightgray;
     }
 

assets/styles/components/_scrollbar.scss

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

assets/styles/elements/_document.scss

@@ -5,7 +5,7 @@
 //
 // Simple page-level setup.
 //
-// 1. Include web fonts
+// 1. Includes 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.
@@ -51,30 +51,14 @@ html {
     &.is-loading {
         cursor: wait;
     }
-
-    &.has-scroll-smooth {
-        overflow: hidden;
-        position: fixed;
-        left: 0;
-        top: 0;
-        height: 100%;
-        width: 100%;
-    }
-
-    &.has-scroll-dragging {
-        user-select: none;
-    }
 }
 
 body {
-    .has-scroll-smooth & {
-        overflow: hidden;
-    }
 }
 
 ::selection {
-    background-color: $selection-background-color;
-    color: $selection-text-color;
+    background-color: $color-selection-background;
+    color: $color-selection-text;
     text-shadow: none;
 }
 

assets/styles/main.scss

@@ -3,6 +3,10 @@
 // ==========================================================================
 @use "sass:math";
 
+@import "node_modules/tailwindcss/base";
+@import "node_modules/tailwindcss/components";
+@import "node_modules/tailwindcss/utilities";
+
 // ==========================================================================
 // Tools
 // ==========================================================================
@@ -10,7 +14,6 @@
 @import "tools/maths";
 @import "tools/functions";
 @import "tools/mixins";
-@import "tools/fonts";
 // @import "tools/layout";
 // @import "tools/widths";
 // @import "tools/family";
@@ -18,8 +21,13 @@
 // Settings
 // ==========================================================================
 
-@import "settings/config.eases";
+@import "settings/config.breakpoints";
 @import "settings/config.colors";
+@import "settings/config.eases";
+@import "settings/config.fonts";
+@import "settings/config.spacers";
+@import "settings/config.timings";
+@import "settings/config.zindexes";
 @import "settings/config";
 @import "settings/config.variables";
 
@@ -32,6 +40,10 @@
 @import "generic/form";
 @import "generic/button";
 
+// Vendors
+// ==========================================================================
+@import "node_modules/locomotive-scroll/dist/locomotive-scroll";
+
 // Elements
 // ==========================================================================
 
@@ -40,7 +52,6 @@
 // Objects
 // ==========================================================================
 
-@import "objects/scroll";
 @import "objects/container";
 @import "objects/ratio";
 @import "objects/icons";
@@ -48,14 +59,9 @@
 // @import "objects/layout";
 // @import "objects/table";
 
-// Vendors
-// ==========================================================================
-// @import "vendors/vendor";
-
 // Components
 // ==========================================================================
 
-@import "components/scrollbar";
 @import "components/heading";
 @import "components/button";
 @import "components/form";
@@ -64,7 +70,7 @@
 // ==========================================================================
 
 @import "utilities/ratio";
-@import "utilities/grid-column";
+// @import "utilities/grid-column";
 // @import "utilities/widths";
 // @import "utilities/align";
 // @import "utilities/helpers";

assets/styles/objects/_icons.scss

@@ -32,7 +32,7 @@
     vertical-align: middle;
 
     svg {
-        --icon-height: calc(var(--icon-width) * (1 / (var(--icon-ratio))));
+        --icon-height: calc(var(--icon-width) * math.div(1, (var(--icon-ratio))));
 
         display: block;
         width: var(--icon-width);

assets/styles/objects/_scroll.scss

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

assets/styles/settings/_config.breakpoints.scss

@@ -0,0 +1,95 @@
+// ==========================================================================
+// Settings / Config / Breakpoints
+// ==========================================================================
+
+// Breakpoints
+// ==========================================================================
+
+$breakpoints: (
+    "tiny":     500px,
+    "small":    700px,
+    "medium":   1000px,
+    "large":    1200px,
+    "big":      1400px,
+    "huge":     1600px,
+    "enormous": 1800px,
+    "gigantic": 2000px,
+    "colossal": 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-tiny:     map-get($breakpoints, "tiny")           !default;
+$to-tiny:       map-get($breakpoints, "tiny") - 1       !default;
+$from-small:    map-get($breakpoints, "small")          !default;
+$to-small:      map-get($breakpoints, "small") - 1      !default;
+$from-medium:   map-get($breakpoints, "medium")         !default;
+$to-medium:     map-get($breakpoints, "medium") - 1     !default;
+$from-large:    map-get($breakpoints, "large")          !default;
+$to-large:      map-get($breakpoints, "large") - 1      !default;
+$from-big:      map-get($breakpoints, "big")            !default;
+$to-big:        map-get($breakpoints, "big") - 1        !default;
+$from-huge:     map-get($breakpoints, "huge")           !default;
+$to-huge:       map-get($breakpoints, "huge") - 1       !default;
+$from-enormous: map-get($breakpoints, "enormous")       !default;
+$to-enormous:   map-get($breakpoints, "enormous") - 1   !default;
+$from-gigantic: map-get($breakpoints, "gigantic")       !default;
+$to-gigantic:   map-get($breakpoints, "gigantic") - 1   !default;
+$from-colossal: map-get($breakpoints, "colossal")       !default;
+$to-colossal:   map-get($breakpoints, "colossal") - 1   !default;

assets/styles/settings/_config.colors.scss

@@ -3,26 +3,56 @@
 // ==========================================================================
 
 // Palette
-// =============================================================================
+// ==========================================================================
 
-$color-lightest:    #FFFFFF;
-$color-darkest:     #000000;
+$colors: (
+    primary:        #3297FD,
+    lightest:       #FFFFFF,
+    darkest:        #000000,
+);
 
-// Specific
-// =============================================================================
+// Function
+// ==========================================================================
+
+// Returns color code.
+//
+// ```scss
+// .c-box {
+//     color: color(primary);
+// }
+// ```
+//
+// @param  {string} $key - The color key in $colors.
+// @param  {number} $alpha - The alpha for the color value.
+// @return {color}
+
+@function color($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
+// ==========================================================================
 
 // Link
-$color-link:        #1A0DAB;
-$color-link-focus:  #1A0DAB;
-$color-link-hover:  darken(#1A0DAB, 10%);
+$color-link:           color(primary);
+$color-link-focus:     color(primary);
+$color-link-hover:     darken(color(primary), 10%);
 
 // Selection
-$selection-text-color:          #3297FD;
-$selection-background-color:    #FFFFFF;
-
-// Social Colors
-// =============================================================================
+$color-selection-text:         color(darkest);
+$color-selection-background:   color(lightest);
 
+// Socials
 $color-facebook:    #3B5998;
 $color-instagram:   #E1306C;
 $color-youtube:     #CD201F;

assets/styles/settings/_config.eases.scss

@@ -2,47 +2,77 @@
 // Settings / Config / 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 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);
+$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 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 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-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 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),
 
-// 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);
+    // 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),
 
-// 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);
+    // 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),
 
-// 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);
+    // 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),
 
-// 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);
+    // 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),
 
-// 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);
+    // 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);
+}

assets/styles/settings/_config.fonts.scss

@@ -1,5 +1,42 @@
 // ==========================================================================
-// Tools / Font Faces
+// 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.

assets/styles/settings/_config.scss

@@ -11,45 +11,13 @@ $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: join("Source Sans", $font-fallback-sans, $separator: comma),
-);
-
-// 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),
-);
-
 // Typography
 // =============================================================================
 
 // Base
-$font-size: 16px;
+$font-size:     16px;
 $line-height:   math.div(24px, $font-size);
-$font-color:    $color-darkest;
+$font-color:    color(darkest);
 
 // Weights
 $font-weight-light:     300;
@@ -57,11 +25,10 @@ $font-weight-normal:    400;
 $font-weight-medium:    500;
 $font-weight-bold:      700;
 
-// Transitions
+// Transition defaults
 // =============================================================================
-
-$speed:     0.3s;
-$easing:    $ease-power2-out;
+$speed:     t(normal);
+$easing:    ease("power2.out");
 
 // Spacing Units
 // =============================================================================
@@ -75,34 +42,3 @@ $padding:         $unit;
 // Grid
 // ==========================================================================
 $base-column-nb: 12;
-
-// 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: (
-    "header":   200,
-    "above":    1,
-    "below":    -1
-);

assets/styles/settings/_config.spacers.scss

@@ -0,0 +1,40 @@
+// ==========================================================================
+// Settings / Config / Spacers
+// ==========================================================================
+
+// Spacers
+// ==========================================================================
+
+$spacers: (
+    'gutter':       var(--grid-gutter),
+    'xs':           #{vh(5)},
+    'sm':           #{vh(7.5)},
+    'md':           #{vh(10)},
+    'lg':           #{vh(12.5)},
+    'xl':           #{vh(15)},
+);
+
+// Function
+// ==========================================================================
+
+// Returns spacer.
+//
+// ```scss
+// .c-box {
+//     margin-top: spacer(gutter);
+// }
+// ```
+//
+// @param  {string} $key - The spacer key in $spacers.
+// @param  {number} $multiplier - The multiplier of the spacer value.
+// @return {size}
+
+@function spacer($spacer: $spacer-default, $multiplier: 1) {
+    @if not map-has-key($spacers, $spacer) {
+        @error "Unknown master spacer: #{$spacer}";
+    }
+
+    $index: map-get($spacers, $spacer);
+
+    @return calc(#{$index} * #{$multiplier});
+}

assets/styles/settings/_config.timings.scss

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

assets/styles/settings/_config.variables.scss

@@ -7,20 +7,24 @@
     // Grid
     --grid-columns:     4;
     --grid-gutter:      #{rem(10px)};
-    --grid-gutter-half: calc(0.5 * var(--grid-gutter));
     --grid-margin:      #{rem(10px)};
 
     // Container
     --container-width:  calc(100% - 2 * var(--grid-margin));
 
     // Font sizes
-    --font-size-h1:     #{rem(36px)};
+    --font-size-h1:     #{responsive-type(36px, 72px, 1400px)};
     --font-size-h2:     #{rem(28px)};
     --font-size-h3:     #{rem(24px)};
     --font-size-h4:     #{rem(20px)};
     --font-size-h5:     #{rem(18px)};
     --font-size-h6:     #{rem(16px)};
 
+    // // Colors
+    // @each $color, $value in $colors {
+    //     --color-#{"" + $color}: #{$value};
+    // }
+
     @media (min-width: $from-small) {
         --grid-columns:     #{$base-column-nb};
         --grid-gutter:      #{rem(16px)};

assets/styles/settings/_config.zindexes.scss

@@ -0,0 +1,44 @@
+// ==========================================================================
+// 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($num / 2)}) {
+    &:nth-child(#{round(math.div($num, 2))}) {
         @content;
     }
 }

assets/styles/tools/_functions.scss

@@ -48,31 +48,6 @@
     @return math.div($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($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;
-}
-
 // Converts a number to a percentage.
 //
 // @alias  percentage()
@@ -139,3 +114,71 @@
 }
 
 $context: 'frontend' !default;
+
+// Returns calculation of a percentage of the grid cell width
+// with optional inset of grid gutter.
+//
+// ```scss
+// .c-box {
+//     width: grid-space(6/12);
+//     margin-left: grid-space(1/12, 1);
+// }
+// ```
+//
+// @param  {number} $number - The percentage spacer
+// @param  {number} $inset  - The grid gutter inset
+// @return {function<number>}
+@function grid-space($percentage, $inset: 0) {
+    @return calc(#{$percentage} * (100vw - 2 * var(--grid-margin, 0px)) - (1 - #{$percentage}) * var(--grid-gutter, 0px) + #{$inset} * var(--grid-gutter, 0px));
+}
+
+// Returns calculation of a percentage of the viewport height.
+//
+// ```scss
+// .c-box {
+//     height: vh(100);
+// }
+// ```
+//
+// @param  {number} $number - The percentage number
+// @return {function<number>} in vh
+@function vh($number) {
+    @return calc(#{$number} * var(--vh, 1vh));
+}
+
+// Returns calculation of a percentage of the viewport width.
+//
+// ```scss
+// .c-box {
+//     width: vw(100);
+// }
+// ```
+//
+// @param  {number} $number - The percentage number
+// @return {function<number>} in vw
+
+@function vw($number) {
+    @return calc(#{$number} * var(--vw, 1vw));
+}
+
+// Returns clamp of calculated preferred responsive font size
+// within a font size and breakpoint range.
+//
+// ```scss
+// .c-heading.-h1 {
+//     font-size: responsive-type(30px, 60px, 1800);
+// }
+//
+// .c-heading.-h2 {
+//     font-size: responsive-type(20px, 40px, $from-big);
+// }
+// ```
+//
+// @param  {number} $min-size   - Minimum font size in pixels.
+// @param  {number} $max-size   - Maximum font size in pixels.
+// @param  {number} $breakpoint - Maximum breakpoint.
+// @return {function<number, function<number>, number>}
+@function responsive-type($min-size, $max-size, $breakpoint) {
+    $delta: math.div($max-size, $breakpoint);
+    @return clamp($min-size, calc(#{strip-unit($delta)} * #{vw(100)}), $max-size);
+}

assets/styles/tools/_maths.scss

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

assets/styles/tools/_mixins.scss

@@ -51,7 +51,7 @@
     font-size: rem($font-size) $important;
 
     @if ($line-height == "auto") {
-        line-height: ceil($font-size / $line-height) * ($line-height / $font-size) $important;
+        line-height: ceil(math.div($font-size, $line-height)) * math.div($line-height, $font-size) $important;
     }
     @else {
         @if (type-of($line-height) == number or $line-height == "inherit" or $line-height == "normal") {
@@ -193,3 +193,32 @@
     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: ($numerator / $denominator) * 100% $important;
+                width: math.div($numerator, $denominator) * 100% $important;
             }
 
             @if ($widths-offsets == true) {
@@ -66,13 +66,13 @@ $breakpoint-delimiter: \@ !default;
                 .u-push-#{$numerator}#{$fractions-delimiter}#{$denominator}#{$breakpoint} {
                     position: relative $important;
                     right: auto $important;
-                    left: ($numerator / $denominator) * 100% $important;
+                    left: math.div($numerator, $denominator) * 100% $important;
                 }
 
                 // Build a class in the format `.u-pull-5/6[@<breakpoint>]`.
                 .u-pull-#{$numerator}#{$fractions-delimiter}#{$denominator}#{$breakpoint} {
                     position: relative $important;
-                    right: ($numerator / $denominator) * 100% $important;
+                    right: math.div($numerator, $denominator) * 100% $important;
                     left: auto $important;
                 }
             }

assets/styles/utilities/_grid-column.scss

@@ -11,29 +11,31 @@
 
 $colsMax: $base-column-nb + 1;
 
-$breakpoints: (
-    "null" null,
-    "from-tiny" $from-tiny,
-    "from-small" $from-small,
-    "from-medium" $from-medium,
-    "from-large" $from-large,
-    "from-big" $from-big
-) !default;
-
 @each $breakpoint, $mediaquery in $breakpoints {
     @for $fromIndex from 1 through $colsMax {
         @for $toIndex from 1 through $colsMax {
-            @if $mediaquery == null {
+
+            // Columns without media query
+            @if $breakpoint == "tiny" {
                 .u-gc-#{$fromIndex}\/#{$toIndex} {
                     --gc-start: #{$fromIndex};
                     --gc-end: #{$toIndex};
                 }
-            } @else {
-                .u-gc-#{$fromIndex}\/#{$toIndex}\@#{$breakpoint} {
-                    @media (min-width: #{$mediaquery}) {
-                        --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/_spacing.scss

@@ -26,8 +26,8 @@ $spacing-directions: (
     '-right':      '-right',
     '-bottom':     '-bottom',
     '-left':       '-left',
-    '-horizontal': '-left' '-right',
-    '-vertical':   '-top'  '-bottom',
+    '-x':          '-left' '-right',
+    '-y':          '-top'  '-bottom',
 ) !default;
 
 $spacing-properties: (
@@ -35,19 +35,47 @@ $spacing-properties: (
     'margin':  'margin',
 ) !default;
 
-$spacing-sizes: (
-    null:     $unit,
-    '-double': $unit * 2,
-    '-small': $unit-small,
-    '-none':  0px
-) !default;
+$spacing-sizes: join($spacers, (
+    null:       var(--grid-gutter),
+    'none':    0
+));
 
-@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;
+@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};
+
+                // Spacer without media query
+                @if $breakpoint == "tiny" {
+                    #{$base-class} {
+                        @each $direction in $directions {
+                            #{$property}#{$direction}: $size !important;
+                        }
+                    }
+                }
+
+                // Spacer min-width breakpoints `@from-*`
+                #{$base-class}\@from-#{$breakpoint} {
+                    @media #{mq-min($breakpoint)} {
+                        @each $direction in $directions {
+                            #{$property}#{$direction}: $size !important;
+                        }
+                    }
+                }
+
+                // Spacer max-width breakpoints @to-*`
+                #{$base-class}\@to-#{$breakpoint} {
+                    @media #{mq-max($breakpoint)} {
+                        @each $direction in $directions {
+                            #{$property}#{$direction}: $size !important;
+                        }
+                    }
                 }
             }
         }

build/helpers/postcss.js

@@ -46,7 +46,7 @@
  * @type {Postcss|undefined}        postcss      - The discovered PostCSS function.
  * @type {AcceptedPlugin|undefined} autoprefixer - The discovered Autoprefixer function.
  */
-let postcss, autoprefixer;
+let postcss, autoprefixer, tailwindcss;
 
 try {
     postcss = await import('postcss');
@@ -54,6 +54,9 @@ try {
 
     autoprefixer = await import('autoprefixer');
     autoprefixer = autoprefixer.default;
+
+    tailwindcss = await import('tailwindcss');
+    tailwindcss = tailwindcss.default;
 } catch (err) {
     // do nothing
 }
@@ -67,6 +70,7 @@ const supportsPostCSS = (typeof postcss === 'function');
  * @type {PluginList} A list of supported plugins.
  */
 const pluginsList = [
+    tailwindcss,
     autoprefixer,
 ];
 
@@ -74,6 +78,7 @@ const pluginsList = [
  * @type {PluginMap} A map of supported plugins.
  */
 const pluginsMap = {
+    'tailwindcss': tailwindcss,
     'autoprefixer': autoprefixer,
 };
 

build/tasks/concats.js

@@ -95,7 +95,7 @@ export default async function concatFiles(globOptions = null, concatOptions = nu
      *     Defaults to the outfile name.
      * @return {Promise}
      */
-    loconfig.tasks.concats.forEach(async ({
+    loconfig.tasks.concats?.forEach(async ({
         includes,
         outfile,
         label = null

build/tasks/scripts.js

@@ -65,7 +65,7 @@ export default async function compileScripts(esBuildOptions = null) {
      * @throws {TypeError} If outdir and outfile are missing.
      * @return {Promise}
      */
-    loconfig.tasks.scripts.forEach(async ({
+    loconfig.tasks.scripts?.forEach(async ({
         includes,
         outdir = '',
         outfile = '',

build/tasks/styles.js

@@ -11,7 +11,7 @@ import { merge } from '../utils/index.js';
 import { writeFile } from 'node:fs/promises';
 import { basename } from 'node:path';
 import { promisify } from 'node:util';
-import sass from 'sass';
+import * as sass from 'sass';
 import { PurgeCSS } from 'purgecss';
 
 const sassRender = promisify(sass.render);
@@ -49,6 +49,11 @@ export const defaultPostCSSOptions = {
             sourcesContent: true,
         },
     },
+    plugins: {
+        tailwindcss: {
+            config: resolve('../../tailwind.config.js'),
+        },
+    }
 };
 export const developmentPostCSSOptions = Object.assign({}, defaultPostCSSOptions);
 export const productionPostCSSOptions  = Object.assign({}, defaultPostCSSOptions);
@@ -60,10 +65,12 @@ export const productionPostCSSOptions  = Object.assign({}, defaultPostCSSOptions
 export const developmentStylesArgs = [
     developmentSassOptions,
     developmentPostCSSOptions,
+    false
 ];
 export const productionStylesArgs  = [
     productionSassOptions,
     productionPostCSSOptions,
+    true
 ];
 
 /**
@@ -80,7 +87,7 @@ export const productionStylesArgs  = [
  *     If `false`, PostCSS processing will be ignored.
  * @return {Promise}
  */
-export default async function compileStyles(sassOptions = null, postcssOptions = null) {
+export default async function compileStyles(sassOptions = null, postcssOptions = null, purge = true) {
     if (sassOptions == null) {
         sassOptions = productionSassOptions;
     } else if (
@@ -111,7 +118,7 @@ export default async function compileStyles(sassOptions = null, postcssOptions =
      *     Defaults to the outfile name.
      * @return {Promise}
      */
-    loconfig.tasks.styles.forEach(async ({
+    loconfig.tasks.styles?.forEach(async ({
         infile,
         outfile,
         label = null
@@ -160,7 +167,7 @@ export default async function compileStyles(sassOptions = null, postcssOptions =
             try {
                 await writeFile(outfile, result.css).then(() => {
                     // Purge CSS once file exists.
-                    if (outfile) {
+                    if (outfile && purge) {
                         purgeUnusedCSS(outfile, `${label || `${filestem}.css`}`);
                     }
                 });
@@ -216,21 +223,27 @@ export default async function compileStyles(sassOptions = null, postcssOptions =
  * @return {Promise}
  */
 async function purgeUnusedCSS(outfile, label) {
+    const contentFiles = loconfig.tasks.purgeCSS?.content;
+    if (!Array.isArray(contentFiles) || !contentFiles.length) {
+        return;
+    }
+
     label = label ?? basename(outfile);
 
     const timeLabel = `${label} purged in`;
     console.time(timeLabel);
 
-    const purgeCSSContentFiles = Array.from(loconfig.tasks.purgeCSS.content);
-
     const purgeCSSResults = await (new PurgeCSS()).purge({
-        content: purgeCSSContentFiles,
+        content: contentFiles,
         css: [ outfile ],
-        rejected: true,
-        defaultExtractor: (content) => content.match(/[a-z0-9_\-\\\/\@]+/gi) || [],
+        defaultExtractor: content => content.match(/[a-z0-9_\-\\\/\@]+/gi) || [],
+        fontFaces: true,
+        keyframes: true,
         safelist: {
-            standard: [ /^((?!\bu-gc-).)*$/ ]
-        }
+            // Keep all except .u-gc-* | .u-margin-* | .u-padding-*
+            standard: [ /^(?!.*\b(u-gc-|u-margin|u-padding)).*$/ ]
+        },
+        variables: true,
     })
 
     for (let result of purgeCSSResults) {

build/tasks/svgs.js

@@ -57,7 +57,7 @@ export default async function compileSVGs(mixerOptions = null) {
      *     Defaults to the outfile name.
      * @return {Promise}
      */
-    loconfig.tasks.svgs.forEach(async ({
+    loconfig.tasks.svgs?.forEach(async ({
         includes,
         outfile,
         label = null

build/tasks/versions.js

@@ -21,6 +21,8 @@ import {
 } 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
@@ -111,7 +113,7 @@ export default async function bumpVersions(versionOptions = null) {
      * @param  {?string|number} [entry.pretty] - The white space to use to format the JSON file.
      * @return {Promise}
      */
-    loconfig.tasks.versions.forEach(({
+    loconfig.tasks.versions?.forEach(({
         outfile,
         label = null,
         ...options
@@ -135,32 +137,64 @@ export default async function bumpVersions(versionOptions = null) {
 /**
  * Creates a formatted version number or string.
  *
- * @param  {string} format - The version format.
+ * @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) {
+function createVersionNumber(format, oldValue = null) {
     let [ type, modifier ] = format.split(':', 2);
 
     switch (type) {
         case 'hex':
         case 'hexadecimal':
-            modifier = Number.parseInt(modifier);
+            try {
+                modifier = Number.parseInt(modifier);
 
-            if (Number.isNaN(modifier)) {
-                modifier = 6;
+                if (Number.isNaN(modifier)) {
+                    modifier = 6;
+                }
+
+                return randomBytes(modifier).toString('hex');
+            } catch (err) {
+                throw new TypeError(
+                    `${err.message} for \'format\' type "hexadecimal"`,
+                    { cause: err }
+                );
             }
 
-            return randomBytes(modifier).toString('hex');
+        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':
-            return new RegExp(modifier);
+        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" or "hexadecimal"'
+        'Expected \'format\' to be either "timestamp", "increment", or "hexadecimal"'
     );
 }
 
@@ -221,9 +255,7 @@ async function handleBumpVersionInJson(outfile, label, options) {
         await mkdir(dirname(outfile), { recursive: true });
     }
 
-    const version = createVersionNumber(options.format);
-
-    json[options.key] = version;
+    json[options.key] = createVersionNumber(options.format, json?.[options.key]);
 
     return await writeFile(
         outfile,
@@ -254,7 +286,7 @@ async function handleBumpVersionWithRegExp(outfile, label, options) {
             input: createReadStream(bckfile),
         });
 
-        const version = createVersionNumber(options.format);
+        let newVersion = null;
 
         const writeStream = createWriteStream(outfile, { encoding: 'utf8' });
 
@@ -262,12 +294,12 @@ async function handleBumpVersionWithRegExp(outfile, label, options) {
             const found = line.match(options.key);
 
             if (found) {
-                const groups  = (found.groups ?? {});
-                const replace = found[0].replace(
-                    (groups.build ?? groups.version ?? found[1] ?? found[0]),
-                    version
-                );
-                line = line.replace(found[0], replace);
+                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");
@@ -285,6 +317,88 @@ async function handleBumpVersionWithRegExp(outfile, label, options) {
     }
 }
 
+/**
+ * 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.
  *

build/watch.js

@@ -70,16 +70,18 @@ function configureServer(server, { paths, tasks }) {
     });
 
     // Watch source concats
-    server.watch(
-        resolve(
-            tasks.concats.reduce(
-                (patterns, { includes }) => patterns.concat(includes),
-                []
+    if (tasks.concats?.length) {
+        server.watch(
+            resolve(
+                tasks.concats.reduce(
+                    (patterns, { includes }) => patterns.concat(includes),
+                    []
+                )
             )
-        )
-    ).on('change', () => {
-        concatFiles(...developmentConcatFilesArgs);
-    });
+        ).on('change', () => {
+            concatFiles(...developmentConcatFilesArgs);
+        });
+    }
 
     // Watch source styles
     server.watch(

docs/development.md

@@ -338,8 +338,8 @@ See [`svgs.js`](../build/tasks/svgs.js) for details.
 
 A task to create and update values for use in versioning assets.
 
-Can generate a hexadecimal value (using random bytes) or
-use the current timestamp.
+Can generate a hexadecimal value (using random bytes), use the current timestamp,
+or increment a number.
 
 Example:
 
@@ -355,6 +355,11 @@ Example:
             "format": "hex:8",
             "key": "hex",
             "outfile": "./assets.json"
+        },
+        {
+            "format": "inc:semver",
+            "key": "inc",
+            "outfile": "./assets.json"
         }
     ]
 }
@@ -363,7 +368,8 @@ Example:
 ```json
 {
     "now": 1665071717350,
-    "hex": "6ef54181c4ba"
+    "hex": "6ef54181c4ba",
+    "hex": "1.0.2"
 }
 ```
 

docs/technologies.md

@@ -181,10 +181,7 @@ detection and smooth scrolling with parallax.
 ```js
 import LocomotiveScroll from 'locomotive-scroll';
 
-this.scroll = new LocomotiveScroll({
-    el: this.el,
-    smooth: true
-});
+this.scroll = new LocomotiveScroll({})
 ````
 
 Learn more about [Locomotive Scroll][locomotive-scroll].

package.json

@@ -6,15 +6,15 @@
     "author": "Locomotive <info@locomotive.ca>",
     "type": "module",
     "engines": {
-        "node": ">=17.9",
+        "node": ">=20.1",
         "npm": ">=8.0"
     },
     "scripts": {
-        "start": "node --experimental-json-modules --no-warnings build/watch.js",
+        "dev": "node --experimental-json-modules --no-warnings build/watch.js",
         "build": "node --experimental-json-modules --no-warnings build/build.js"
     },
     "dependencies": {
-        "locomotive-scroll": "^4.1.4",
+        "locomotive-scroll": "^5.0.0-beta.9",
         "modujs": "^1.4.2",
         "modularload": "^1.2.6",
         "normalize.css": "^8.0.1",
@@ -22,15 +22,17 @@
     },
     "devDependencies": {
         "autoprefixer": "^10.4.13",
-        "browser-sync": "^2.27.11",
+        "browser-sync": "^3.0.2",
         "concat": "^1.0.3",
         "esbuild": "^0.17.6",
         "kleur": "^4.1.5",
         "node-notifier": "^10.0.1",
         "postcss": "^8.4.21",
+        "postcss-import": "^16.0.0",
         "purgecss": "^5.0.0",
-        "sass": "^1.57.1",
+        "sass": "^1.69.5",
         "svg-mixer": "~2.3.14",
+        "tailwindcss": "^3.4.1",
         "tiny-glob": "^0.2.9"
     },
     "overrides": {

tailwind.config.js

@@ -0,0 +1,23 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+    prefix: 'u-',
+    content: [
+        './www/**/*.html',
+        './assets/scripts/**/*'
+    ],
+    theme: {
+        screens: {
+            'tiny':     '500px',
+            'small':    '700px',
+            'medium':   '1000px',
+            'large':    '1200px',
+            'big':      '1400px',
+            'huge':     '1600px',
+            'enormous': '1800px',
+            'gigantic': '2000px',
+            'colossal': '2400px'
+        }
+    },
+    plugins: [],
+}
+

www/form.html

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

www/grid.html

@@ -34,8 +34,8 @@
 
 <body data-module-load>
     <div data-load-container>
-        <div class="o-scroll" data-module-scroll="main">
-            <header data-scroll-section>
+        <div data-module-scroll="main">
+            <header>
                 <a href="/">
                     <h1>Locomotive Boilerplate</h1>
                 </a>
@@ -48,35 +48,35 @@
                 </nav>
             </header>
 
-            <main data-scroll-section>
+            <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 class="u-grid u-gap-5 u-grid-cols-4 medium:u-grid-cols-12">
+                        <div class="u-col-span-full medium:u-col-span-8" style="background-color: gray;">
+                            <h2 class="c-heading -h2 u-text-slate-400">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;">
+                        <div class="u-col-span-full medium:u-col-start-1 medium:u-col-span-4" 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;">
+                        <div class="u-col-span-full medium:u-col-span-4" 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;">
+                        <div class="u-col-span-full medium:u-col-span-4" 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;">
+                        <div class="u-col-span-3  medium:u-col-start-5 medium:u-col-end-13" 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 data-scroll-section>
+            <footer>
                 <p>Made with <a href="https://github.com/locomotivemtl/locomotive-boilerplate"
                         title="Locomotive Boilerplate" target="_blank" rel="noopener">🚂</a></p>
             </footer>

www/images.html

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

www/index.html

@@ -42,8 +42,8 @@
 <body data-module-load>
 
     <div data-load-container>
-        <div class="o-scroll" data-module-scroll="main">
-            <header data-scroll-section>
+        <div data-module-scroll="main">
+            <header>
                 <a href="/">
                     <h1>Locomotive Boilerplate</h1>
                 </a>
@@ -56,13 +56,13 @@
                 </nav>
             </header>
 
-            <main data-module-example data-scroll-section>
-                <div class="o-container">
-                    <h1 class="c-heading -h1">Hello</h1>
+            <main data-module-example>
+                <div class="o-container flex">
+                    <h1 class="c-heading -h1 u-text-3xl u-font-bold medium:u-underline">Hello</h1>
                 </div>
             </main>
 
-            <footer data-scroll-section>
+            <footer>
                 <p>Made with <a href="https://github.com/locomotivemtl/locomotive-boilerplate"
                         title="Locomotive Boilerplate" target="_blank" rel="noopener">🚂</a></p>
             </footer>