Add tailwindcss (WIP)

Update node version & bump npm packages version

.nvmrc

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

assets.json

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

assets/scripts/app.js

@@ -10,7 +10,7 @@ const app = new modular({
     modules: modules,
 });
 
-window.onload = (event) => {
+window.addEventListener('load', (event) => {
     const $style = document.getElementById('main-css');
 
     if ($style) {
@@ -24,7 +24,7 @@ window.onload = (event) => {
     } else {
         console.warn('The "main-css" stylesheet not found');
     }
-};
+});
 
 function init() {
     globals();

assets/scripts/config.js

@@ -9,7 +9,7 @@
  */
 
 const NODE_ENV = process.env.NODE_ENV
-const IS_DESKTOP = typeof window.orientation === 'undefined'
+const IS_MOBILE = window.matchMedia('(any-pointer:coarse)').matches
 
 // Main environment variables
 const ENV = Object.freeze({
@@ -19,8 +19,8 @@ const ENV = Object.freeze({
     IS_DEV: NODE_ENV === 'development',
 
     // Device
-    IS_DESKTOP,
-    IS_MOBILE: !IS_DESKTOP,
+    IS_MOBILE,
+    IS_DESKTOP: !IS_MOBILE,
 })
 
 // Main CSS classes used within the project

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/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/_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 {

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,25 +51,9 @@ 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 {

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/_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,7 +3,7 @@
 // ==========================================================================
 
 // Palette
-// =============================================================================
+// ==========================================================================
 
 $colors: (
     primary:        #3297FD,
@@ -11,9 +11,37 @@ $colors: (
     darkest:        #000000,
 );
 
+// 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:           color(primary);

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,43 +11,11 @@ $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);
 
@@ -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,7 +7,6 @@
     // Grid
     --grid-columns:     4;
     --grid-gutter:      #{rem(10px)};
-    --grid-gutter-half: calc(0.5 * var(--grid-gutter));
     --grid-margin:      #{rem(10px)};
 
     // Container

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/_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()
@@ -207,21 +182,3 @@ $context: 'frontend' !default;
     $delta: math.div($max-size, $breakpoint);
     @return clamp($min-size, calc(#{strip-unit($delta)} * #{vw(100)}), $max-size);
 }
-
-// Returns color code.
-//
-// ```scss
-// .c-box {
-//     width: color(primary);
-// }
-// ```
-//
-// @param  {string} $key - The color key in $colors.
-// @return {color}
-
-@function color($key) {
-    @if not map-has-key($colors, $key) {
-        @error "Unknown '#{$key}' in $colors.";
-    }
-    @return map-get($colors, $key);
-}

assets/styles/tools/_mixins.scss

@@ -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/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>