Use 11ty config to try swup fragments in a more realistic setup

Use 11ty w/ twig setup instead of hardcoded HTML files
Add swup & swup fragment plugin to test its implementation w/ the boilerplate
2026-01-15 00:55:08 +08:00 · 2024-01-18 18:06:53 -05:00 · 2024-01-18 17:17:11 -05:00 · 2024-01-18 11:42:17 -05:00 · 2024-01-16 15:07:09 -05:00 · 2024-01-05 15:24:22 -05:00
57 changed files with 6749 additions and 1355 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -3,4 +3,5 @@ node_modules
 Thumbs.db
 loconfig.*.json
 !loconfig.example.json
-.prettierrc
+.prettierrc
+www/**/*.html
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-v17.9
+v20.10
--- a/assets.json
+++ b/assets.json
@@ -1,3 +1,3 @@
 {
-    "version": 1690813628192
+    "version": 1705619201399
 }
--- a/assets/scripts/app.js
+++ b/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();
--- a/assets/scripts/config.js
+++ b/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
--- a/assets/scripts/modules.js
+++ b/assets/scripts/modules.js
@@ -1,3 +1,4 @@
-export {default as Example} from './modules/Example';
+// export {default as Example} from './modules/Example';
+export {default as Dialog} from './modules/Dialog';
 export {default as Load} from './modules/Load';
 export {default as Scroll} from './modules/Scroll';
--- a/assets/scripts/modules/Dialog.js
+++ b/assets/scripts/modules/Dialog.js
@@ -0,0 +1,36 @@
+import { module } from 'modujs';
+
+export default class extends module {
+    constructor(m) {
+        super(m);
+
+        this.$closeBtn = this.$('close')[0]
+    }
+
+    init() {
+        // Prevent ESC to close dialog
+        this.onKeyDown = this.onKeyDown.bind(this)
+    }
+
+    onKeyDown(e) {
+        if(e.key === 'Escape') {
+            console.log('ESCAPE');
+            e.preventDefault()
+            this.$closeBtn.click();
+        }
+    }
+
+    populate(container) {
+        this.el.appendChild(container)
+    }
+
+    show() {
+        this.el.showModal();
+        window.addEventListener('keydown', this.onKeyDown);
+    }
+
+    close() {
+        window.removeEventListener('keydown', this.onKeyDown);
+        this.el.close();
+    }
+}
--- a/assets/scripts/modules/Load.js
+++ b/assets/scripts/modules/Load.js
@@ -1,5 +1,6 @@
 import { module } from 'modujs';
-import modularLoad from 'modularload';
+import Swup from 'swup';
+import SwupFragmentPlugin from '@swup/fragment-plugin';

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

    init() {
-        const load = new modularLoad({
-            enterDelay: 0,
-            transitions: {
-                customTransition: {}
+        const load = new Swup({
+            containers: ['[data-load-container]'],
+            // cache: false,
+            plugins: [
+                new SwupFragmentPlugin({
+                    rules: [
+                        {
+                            from: ['/projects/:page?'],
+                            to: ['/projects/:page?'],
+                            containers: ['#paginated']
+                        },
+                        {
+                            from: ['/projects/:page?'],
+                            to: ['/project/:slug'],
+                            containers: ['#modal'],
+                            name: 'open-modal'
+                        },
+                        {
+                            from: ['/project/:slug'],
+                            to: ['/project/:slug'],
+                            containers: ['#modal'],
+                            name: 'modal-update'
+                        },
+                        {
+                            from: ['/project/:slug'],
+                            to: ['/projects/:page?'],
+                            containers: ['#modal', '#paginated'],
+                            name: 'close-modal'
+                        },
+                    ]
+                })
+            ]
+        });
+
+        load.hooks.before('content:replace', async (visit) => {
+            console.log('before content replace:', visit);
+
+            for(let container of visit.containers) {
+                const oldContainer = this.el.querySelector(container)
+                console.log('old container: ', oldContainer)
+                this.call('destroy', oldContainer, 'app');
            }
        });

-        load.on('loaded', (transition, oldContainer, newContainer) => {
-            this.call('destroy', oldContainer, 'app');
-            this.call('update', newContainer, 'app');
+        load.hooks.on('content:replace', (visit) => {
+            console.log('On content replace:', visit);
+
+            if(visit.fragmentVisit) {
+                if(visit.fragmentVisit.name == 'open-modal') {
+                    this.call('populate', document.getElementById('modal'), 'Dialog');
+                    this.call('show', null, 'Dialog')
+                } else if(visit.fragmentVisit.name == 'close-modal') {
+                    this.call('close', null, 'Dialog')
+                }
+            }
+
+            for(let container of visit.containers) {
+                const newContainer = this.el.querySelector(container)
+                console.log('new container: ', newContainer)
+                newContainer.classList.add('transition-fade')
+                this.call('update', newContainer, 'app');
+            }
        });
+
+        console.log(this, load);
    }
 }
--- a/assets/scripts/utils/maths.js
+++ b/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))


 /**
--- a/assets/styles/components/_scrollbar.scss
+++ b/assets/styles/components/_scrollbar.scss
@@ -0,0 +1,38 @@
+// ==========================================================================
+// Components / Scrollbar
+// ==========================================================================
+
+.c-scrollbar {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 11px;
+    height: 100vh;
+    transform-origin: center right;
+    transition: transform t(normal), opacity t(normal);
+    opacity: 0;
+
+    &:hover {
+        transform: scaleX(1.45);
+    }
+
+    &:hover, .has-scroll-scrolling &, .has-scroll-dragging & {
+        opacity: 1;
+    }
+}
+
+.c-scrollbar_thumb {
+    position: absolute;
+    top: 0;
+    right: 0;
+    background-color: color(darkest);
+    opacity: 0.5;
+    width: 7px;
+    border-radius: 10px;
+    margin: 2px;
+    cursor: grab;
+
+    .has-scroll-dragging & {
+        cursor: grabbing;
+    }
+}
--- a/assets/styles/elements/_document.scss
+++ b/assets/styles/elements/_document.scss
@@ -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.
@@ -69,3 +69,27 @@ a {
        color: $color-link-hover;
    }
 }
+
+/* Define a transition duration during page visits */
+html.is-changing .transition-fade {
+    transition: opacity 0.1s;
+    opacity: 1;
+}
+/* Define the styles for the unloaded pages */
+html.is-animating .transition-fade {
+    opacity: 0;
+}
+
+#paginated.is-changing {
+    transition: opacity 250ms;
+}
+#paginated.is-animating {
+    opacity: 0;
+}
+
+#modal.is-changing {
+    transition: opacity 100ms;
+}
+#modal.is-animating {
+    opacity: 0;
+}
--- a/assets/styles/main.scss
+++ b/assets/styles/main.scss
@@ -10,7 +10,6 @@
@import "tools/maths";
@import "tools/functions";
@import "tools/mixins";
-@import "tools/fonts";
 // @import "tools/layout";
 // @import "tools/widths";
 // @import "tools/family";
@@ -18,8 +17,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";

@@ -67,5 +71,5 @@
 // @import "utilities/align";
 // @import "utilities/helpers";
 // @import "utilities/states";
-// @import "utilities/spacing";
+@import "utilities/spacing";
 // @import "utilities/print";
--- a/assets/styles/settings/_config.breakpoints.scss
+++ b/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;
--- a/assets/styles/settings/_config.colors.scss
+++ b/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);
--- a/assets/styles/settings/_config.eases.scss
+++ b/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);
+}
--- a/assets/styles/settings/_config.fonts.scss
+++ b/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.
--- a/assets/styles/settings/_config.scss
+++ b/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
-);
--- a/assets/styles/settings/_config.spacers.scss
+++ b/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});
+}
--- a/assets/styles/settings/_config.timings.scss
+++ b/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);
+}
--- a/assets/styles/settings/_config.variables.scss
+++ b/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
--- a/assets/styles/settings/_config.zindexes.scss
+++ b/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;
+}
--- a/assets/styles/tools/_functions.scss
+++ b/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);
-}
--- a/assets/styles/tools/_mixins.scss
+++ b/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;
+            }
+        }
+    }
+}
--- a/assets/styles/utilities/_grid-column.scss
+++ b/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};
                }
            }
        }
--- a/assets/styles/utilities/_spacing.scss
+++ b/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;
+                        }
+                    }
                }
            }
        }
--- a/build/build.js
+++ b/build/build.js
@@ -1,9 +1,11 @@
+import buildEleventy from './tasks/eleventy.js';
 import concatFiles from './tasks/concats.js';
 import compileScripts from './tasks/scripts.js';
 import compileStyles from './tasks/styles.js';
 import compileSVGs from './tasks/svgs.js';
 import bumpVersions from './tasks/versions.js';

+buildEleventy();
 concatFiles();
 compileScripts();
 compileStyles();
--- a/build/tasks/concats.js
+++ b/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
--- a/build/tasks/eleventy.js
+++ b/build/tasks/eleventy.js
@@ -0,0 +1,50 @@
+import message from '../helpers/message.js';
+import { merge } from '../utils/index.js';
+import Eleventy from "@11ty/eleventy";
+
+export const defaultEleventyOptions = {
+    production: true
+}
+
+export const developmentEleventyOptions = {
+    production: false
+}
+
+export const productionEleventyOptions = {
+    production: true
+}
+
+let elev;
+export default async function buildEleventy(eleventyOptions = null) {
+    if (eleventyOptions == null) {
+        eleventyOptions = productionEleventyOptions;
+    } else if (
+        eleventyOptions !== developmentEleventyOptions &&
+        eleventyOptions !== productionEleventyOptions
+    ) {
+        eleventyOptions = merge({}, defaultEleventyOptions, eleventyOptions);
+    }
+
+    const { production } = eleventyOptions;
+    const timeLabel = `11ty compiled in`;
+    console.time(timeLabel);
+
+    try {
+
+        if(!elev) {
+            elev = new Eleventy();
+
+            if(!production) {
+                await elev.watch();
+            }
+        }
+
+        // Disable caching to ensure a fresh build each time
+        await elev.write();
+
+        message(`11ty compiled`, 'success', timeLabel);
+    } catch(err) {
+        console.error(err)
+        message(err, 'error', timeLabel);
+    }
+}
--- a/build/tasks/scripts.js
+++ b/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 = '',
--- a/build/tasks/styles.js
+++ b/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);
@@ -60,10 +60,12 @@ export const productionPostCSSOptions  = Object.assign({}, defaultPostCSSOptions
 export const developmentStylesArgs = [
    developmentSassOptions,
    developmentPostCSSOptions,
+    false
 ];
 export const productionStylesArgs  = [
    productionSassOptions,
    productionPostCSSOptions,
+    true
 ];

 /**
@@ -80,7 +82,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 +113,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 +162,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 +218,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) {
--- a/build/tasks/svgs.js
+++ b/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
--- a/build/tasks/versions.js
+++ b/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.
 *
--- a/build/watch.js
+++ b/build/watch.js
@@ -2,6 +2,7 @@ import concatFiles, { developmentConcatFilesArgs } from './tasks/concats.js';
 import compileScripts, { developmentScriptsArgs } from './tasks/scripts.js';
 import compileStyles, { developmentStylesArgs } from './tasks/styles.js' ;
 import compileSVGs, { developmentSVGsArgs } from './tasks/svgs.js';
+import buildEleventy, { developmentEleventyOptions } from './tasks/eleventy.js';
 import loconfig from './helpers/config.js';
 import message from './helpers/message.js';
 import notification from './helpers/notification.js';
@@ -19,6 +20,7 @@ concatFiles(...developmentConcatFilesArgs);
 compileScripts(...developmentScriptsArgs);
 compileStyles(...developmentStylesArgs);
 compileSVGs(...developmentSVGsArgs);
+await buildEleventy(developmentEleventyOptions);

 // Create a new BrowserSync instance
 const server = browserSync.create();
@@ -53,10 +55,7 @@ function configureServer(server, { paths, tasks }) {
    // Reload on any changes to views or processed files
    server.watch(
        [
-            ...views,
-            join(paths.scripts.dest, '*.js'),
-            join(paths.styles.dest, '*.css'),
-            join(paths.svgs.dest, '*.svg'),
+            join(paths.dest, '**/*')
        ]
    ).on('change', server.reload);

@@ -70,16 +69,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(
--- a/data/metadata.json
+++ b/data/metadata.json
@@ -0,0 +1,4 @@
+{
+    "title": "Locomotive Boilerplate",
+    "description": "Front-end boilerplate for projects by Locomotive."
+}
--- a/data/projects.json
+++ b/data/projects.json
@@ -0,0 +1,34 @@
+[
+    {
+        "title": "Lusail Stadium",
+        "desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Scelerisque viverra mauris in aliquam sem fringilla ut morbi tincidunt. In dictum non consectetur a erat nam at lectus urna. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue."
+    },
+    {
+        "title": "Tottenham Hotspur Stadium",
+        "desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing. Eget mi proin sed libero enim sed. Tincidunt id aliquet risus feugiat in ante metus."
+    },
+    {
+        "title": "Narendra Modi Stadium",
+        "desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae tempus quam pellentesque nec nam aliquam. Velit laoreet id donec ultrices tincidunt. Tincidunt lobortis feugiat vivamus at augue eget arcu."
+    },
+    {
+        "title": "Texas A&M Kyle Field",
+        "desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Adipiscing diam donec adipiscing tristique risus nec feugiat in fermentum. Integer malesuada nunc vel risus commodo viverra maecenas accumsan. Dui faucibus in ornare quam viverra orci sagittis."
+    },
+    {
+        "title": "The Cathedral — A New Icon for Milan",
+        "desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Scelerisque viverra mauris in aliquam sem fringilla ut morbi tincidunt. In dictum non consectetur a erat nam at lectus urna. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue."
+    },
+    {
+        "title": "Allianz Field",
+        "desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing. Eget mi proin sed libero enim sed. Tincidunt id aliquet risus feugiat in ante metus."
+    },
+    {
+        "title": "TQL Stadium",
+        "desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae tempus quam pellentesque nec nam aliquam. Velit laoreet id donec ultrices tincidunt. Tincidunt lobortis feugiat vivamus at augue eget arcu."
+    },
+    {
+        "title": "Groupama Stadium and Training Centre",
+        "desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Adipiscing diam donec adipiscing tristique risus nec feugiat in fermentum. Integer malesuada nunc vel risus commodo viverra maecenas accumsan. Dui faucibus in ornare quam viverra orci sagittis."
+    }
+]
--- a/docs/development.md
+++ b/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"
 }
 ```

--- a/eleventy.config.cjs
+++ b/eleventy.config.cjs
@@ -0,0 +1,71 @@
+// Import required modules
+const twig = require("twig");
+const fs = require('fs')
+const eleventyPluginTwig = require("@factorial/eleventy-plugin-twig");
+
+// Export Eleventy configuration
+module.exports = function(eleventyConfig) {
+    // Function to generate a version identifier
+    function generateVersion() {
+        // You can use a timestamp, a hash of asset files, or any other method you prefer
+        return Date.now();
+    }
+
+    eleventyConfig.setServerOptions({
+        enabled: false,
+    });
+
+    eleventyConfig.addWatchTarget("views/**/*");
+
+    // Use twig
+    eleventyConfig.addPlugin(eleventyPluginTwig, {
+        twig: {
+            namespaces: {
+                layouts: "views/layouts",
+                partials: "views/partials",
+                snippets: "views/snippets"
+            }
+        },
+        dir: {
+            input: 'views/templates',
+            output: 'www'
+        }
+    });
+
+    twig.extendFilter("log", function(value) {
+        return '<pre>'+JSON.stringify(value)+'</pre>';
+    });
+
+    twig.extendFilter("slug", function(str) {
+        return str
+            .toLowerCase() // Convert the string to lowercase
+            .replace(/\s+/g, '-') // Replace spaces with dashes
+            .replace(/[^\w-]/g, '') // Remove non-word characters
+            .replace(/--+/g, '-') // Replace consecutive dashes with a single dash
+            .trim(); // Trim any leading or trailing dashes
+    })
+
+    // // Add a filter to append the version to asset URLs
+    twig.extendFilter('version', function(url) {
+        const version = generateVersion();
+        return `${url}?v=${version}`;
+    });
+
+    twig.extendFunction("critical_css", function() {
+        try {
+            return fs.readFileSync('./www/assets/styles/critical.css', 'utf-8')
+        } catch(error) {
+            return '';
+        }
+    });
+
+    // Configure and return Eleventy settings
+    return {
+        templateFormats: ['twig'],
+        dir: {
+            input: 'views/templates',
+            output: 'www',
+            data: '../../data'
+        }
+    };
+};
--- a/loconfig.json
+++ b/loconfig.json
@@ -19,7 +19,10 @@
            "dest": "./www/assets/images"
        },
        "views": {
-            "src": "./www/"
+            "src": "./views/"
+        },
+        "data": {
+            "src": "./data/"
        }
    },
    "tasks": {
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
    "author": "Locomotive <info@locomotive.ca>",
    "type": "module",
    "engines": {
-        "node": ">=17.9",
+        "node": ">=20.1",
        "npm": ">=8.0"
    },
    "scripts": {
@@ -14,24 +14,29 @@
        "build": "node --experimental-json-modules --no-warnings build/build.js"
    },
    "dependencies": {
-        "locomotive-scroll": "^5.0.0-beta.8",
+        "@swup/fragment-plugin": "^0.3.7",
+        "locomotive-scroll": "^5.0.0-beta.9",
        "modujs": "^1.4.2",
        "modularload": "^1.2.6",
        "normalize.css": "^8.0.1",
-        "svg4everybody": "^2.1.9"
+        "svg4everybody": "^2.1.9",
+        "swup": "^4.5.1"
    },
    "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",
        "purgecss": "^5.0.0",
-        "sass": "^1.57.1",
+        "sass": "^1.69.5",
        "svg-mixer": "~2.3.14",
-        "tiny-glob": "^0.2.9"
+        "tiny-glob": "^0.2.9",
+        "@11ty/eleventy": "^2.0.1",
+        "@factorial/eleventy-plugin-twig": "^0.1.2",
+        "twig": "^1.16.0"
    },
    "overrides": {
        "browser-sync": {
--- a/views/layouts/base.twig
+++ b/views/layouts/base.twig
@@ -0,0 +1,48 @@
+<!doctype html>
+<html class="is-loading" lang="en" data-page="images">
+    <head>
+        <meta charset="utf-8">
+
+        <base href="/">
+
+        <title>{% if title %}{{ title }} | {% endif %}{{ metadata.title }}</title>
+        <meta name="description" content="{% if description %}{{description}}{% else %}{{ metadata.description }}{% endif %}">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <meta name="theme-color" content="#ffffff">
+        <meta name="msapplication-TileColor" content="#ffffff">
+        <link rel="manifest" href="site.webmanifest">
+        <link rel="apple-touch-icon" sizes="180x180" href="assets/images/favicons/apple-touch-icon.png">
+        <link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicons/favicon-32x32.png">
+        <link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicons/favicon-16x16.png">
+        <link rel="mask-icon" href="assets/images/favicons/safari-pinned-tab.svg" color="#000000">
+
+        <link id="main-css" rel="stylesheet" href="assets/styles/main.css" media="print" onload="this.media='all'; this.onload=null; this.isLoaded=true">
+    </head>
+    <body data-module-load>
+        <div data-load-container>
+            {% block beforeMain %}
+                <div data-module-scroll="main">
+                    {% include "@partials/header.twig" %}
+                    {% endblock %}
+
+                        <main>
+                            {% block content %}{% endblock %}
+
+                            {% block afterContent %}
+                                {% include "@partials/footer.twig" %}
+                            {% endblock %}
+                        </main>
+
+                    {% block afterMain %}
+                </div>
+            {% endblock %}
+        </div>
+
+        <script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js" crossorigin="anonymous"></script>
+        <script nomodule src="https://polyfill.io/v3/polyfill.min.js?features=Element.prototype.remove%2CElement.prototype.append%2Cfetch%2CCustomEvent%2CElement.prototype.matches%2CNodeList.prototype.forEach%2CAbortController" crossorigin="anonymous"></script>
+
+        <script src="assets/scripts/vendors.js" defer></script>
+        <script src="assets/scripts/app.js" defer></script>
+    </body>
+</html>
--- a/views/partials/footer.twig
+++ b/views/partials/footer.twig
@@ -0,0 +1,3 @@
+<footer>
+    <p>Made with <a href="https://github.com/locomotivemtl/locomotive-boilerplate" title="Locomotive Boilerplate" target="_blank" rel="noopener">🚂</a></p>
+</footer>
--- a/views/partials/header.twig
+++ b/views/partials/header.twig
@@ -0,0 +1,15 @@
+{% set _logo_tag = page.url == '/' ? 'h1' : 'span' %}
+
+<header>
+    <a href="/">
+        <{{_logo_tag}} style="text-decoration: underline;">Locomotive Boilerplate</{{_logo_tag}}>
+    </a>
+    <nav>
+        <ul>
+            <li><a href="/images">Images</a></li>
+            <li><a href="/form" data-load="customTransition">Form</a></li>
+            <li><a href="/grid">Grid</a></li>
+            <li><a href="/projects">Projects</a></li>
+        </ul>
+    </nav>
+</header>
--- a/views/templates/form.twig
+++ b/views/templates/form.twig
@@ -0,0 +1,61 @@
+{% extends "@layouts/base.twig" %}
+
+{% block content %}
+    <div class="o-container">
+        <h1 class="c-heading -h1">Page</h1>
+
+        <div class="o-layout">
+            <div class="o-layout_item u-1/2@from-small">
+
+                <form class="c-form">
+                    <div class="c-form_item">
+                        <label class="c-form_label" for="input">Input</label>
+                        <input class="c-form_input" type="text" id="input">
+                    </div>
+                    <div class="c-form_item">
+                        <div class="o-layout -gutter">
+                            <div class="o-layout_item u-1/2">
+                                <input class="c-form_checkbox" type="checkbox" id="checkbox">
+                                <label class="c-form_checkboxLabel" for="checkbox">Checkbox</label>
+                            </div>
+                            <div class="o-layout_item u-1/2">
+                                <input class="c-form_checkbox" type="checkbox" id="checkbox2">
+                                <label class="c-form_checkboxLabel" for="checkbox2">Checkbox 2</label>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="c-form_item">
+                        <div class="o-layout -gutter">
+                            <div class="o-layout_item u-1/2">
+                                <input class="c-form_radio" type="radio" name="radio" id="radio">
+                                <label class="c-form_radioLabel" for="radio">Radio</label>
+                            </div>
+                            <div class="o-layout_item u-1/2">
+                                <input class="c-form_radio" type="radio" name="radio" id="radio2">
+                                <label class="c-form_radioLabel" for="radio2">Radio 2</label>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="c-form_item">
+                        <label class="c-form_label" for="select">Select</label>
+                        <div class="c-form_select">
+                            <select class="c-form_select_input" id="select">
+                                <option value="option">Option</option>
+                                <option value="option2">Option 2</option>
+                                <option value="option3">Option 3</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="c-form_item">
+                        <label class="c-form_label" for="textarea">Textarea</label>
+                        <textarea class="c-form_textarea" id="textarea"></textarea>
+                    </div>
+                    <button class="c-button" type="submit">
+                        Submit
+                    </button>
+                </form>
+
+            </div>
+        </div>
+    </div>
+{% endblock %}
--- a/views/templates/grid.twig
+++ b/views/templates/grid.twig
@@ -0,0 +1,29 @@
+{% extends "@layouts/base.twig" %}
+
+{% block content %}
+    <div class="o-container">
+        <h1 class="c-heading -h1">Hello</h1>
+
+        <div class="o-grid -col-4 -col-12@from-medium -gutters">
+            <div class="o-grid_item u-gc-1/8@from-medium" style="background-color: gray;">
+                <h2 class="c-heading -h2">This grid has 4 columns and 12 columns from `medium` MQ</h2>
+            </div>
+
+            <div class="o-grid_item u-gc-1/5@from-medium" style="background-color: yellow;">
+                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita provident distinctio deleniti eaque cumque doloremque aut quo dicta porro commodi, temporibus totam dolor autem tempore quasi ullam sed suscipit vero?</p>
+            </div>
+
+            <div class="o-grid_item u-gc-5/9@from-medium" style="background-color: red;">
+                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita provident distinctio deleniti eaque cumque doloremque aut quo dicta porro commodi, temporibus totam dolor autem tempore quasi ullam sed suscipit vero?</p>
+            </div>
+
+            <div class="o-grid_item u-gc-9/13@from-medium" style="background-color: blue;">
+                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita provident distinctio deleniti eaque cumque doloremque aut quo dicta porro commodi, temporibus totam dolor autem tempore quasi ullam sed suscipit vero?</p>
+            </div>
+
+            <div class="o-grid_item u-gc-1/3 u-gc-5/13@from-medium" style="background-color: pink;">
+                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita provident distinctio deleniti eaque cumque doloremque aut quo dicta porro commodi, temporibus totam dolor autem tempore quasi ullam sed suscipit vero?</p>
+            </div>
+        </div>
+    </div>
+{% endblock %}
--- a/views/templates/images.twig
+++ b/views/templates/images.twig
@@ -0,0 +1,69 @@
+{% extends "@layouts/base.twig" %}
+
+{% block content %}
+    <div class="o-container">
+        <h1 class="c-heading -h1">Images</h1>
+
+        <section>
+            <h3 class="c-heading -h3">Relative to scroll</h3>
+
+            <h4 class="c-heading -h3">Using o-ratio & img</h3>
+
+            <div style="width: 640px; max-width: 100%;">
+                <div class="o-ratio u-4:3">
+                    <img data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/800/600?v=1" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
+                </div>
+                <div class="o-ratio u-4:3">
+                    <img data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/800/600?v=2" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
+                </div>
+                <div class="o-ratio u-4:3">
+                    <img data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/800/600?v=3" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
+                </div>
+                <div class="o-ratio u-4:3">
+                    <img data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/800/600?v=4" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
+                </div>
+                <div class="o-ratio u-4:3">
+                    <img data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/800/600?v=5" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
+                </div>
+            </div>
+
+            <h4 class="c-heading -h3">Using o-ratio & background-image</h3>
+
+            <div style="width: 480px; max-width: 100%;">
+                <div style="background-size: cover; background-position: center;" class="o-ratio u-16:9" data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/1280/720?v=1"></div>
+                <div style="background-size: cover; background-position: center;" class="o-ratio u-16:9" data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/1280/720?v=2"></div>
+                <div style="background-size: cover; background-position: center;" class="o-ratio u-16:9" data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/1280/720?v=3"></div>
+                <div style="background-size: cover; background-position: center;" class="o-ratio u-16:9" data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/1280/720?v=4"></div>
+                <div style="background-size: cover; background-position: center;" class="o-ratio u-16:9" data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/1280/720?v=5"></div>
+            </div>
+
+            <h4 class="c-heading -h3">Using SVG viewport for ratio</h3>
+
+            <div style="width: 480px; max-width: 100%;">
+                <img
+                    data-scroll
+                    data-scroll-call="lazyLoad, Scroll, main"
+                    data-src="http://picsum.photos/640/480?v=6"
+                    alt=""
+                    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3C/svg%3E"
+                />
+
+                <img
+                    data-scroll
+                    data-scroll-call="lazyLoad, Scroll, main"
+                    data-src="http://picsum.photos/640/480?v=7"
+                    alt=""
+                    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3C/svg%3E"
+                />
+
+                <img
+                    data-scroll
+                    data-scroll-call="lazyLoad, Scroll, main"
+                    data-src="http://picsum.photos/640/480?v=8"
+                    alt=""
+                    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3C/svg%3E"
+                />
+            </div>
+        </section>
+    </div>
+{% endblock %}
--- a/views/templates/index.twig
+++ b/views/templates/index.twig
@@ -0,0 +1,11 @@
+---
+title: Home
+---
+
+{% extends "@layouts/base.twig" %}
+
+{% block content %}
+    <div class="o-container">
+        <h2 class="c-heading -h2">Hello world!</h2>
+    </div>
+{% endblock %}
--- a/views/templates/project.twig
+++ b/views/templates/project.twig
@@ -0,0 +1,26 @@
+---
+pagination:
+    data: projects
+    size: 1
+    alias: project
+permalink: "project/{{ project.title | slug }}/index.html"
+---
+
+{% extends "@layouts/base.twig" %}
+
+{% block content %}
+    <div class="o-container">
+        <main id="modal">
+            <h1 class="c-heading -h1">{{project.title}}</h1>
+            <p>{{project.desc}}</p>
+
+            {% if pagination.page.previous %}
+            <a style="float: left;" href="/project/{{pagination.page.previous.title | slug}}">← {{pagination.page.previous.title}}</a>
+            {% endif %}
+            {% if pagination.page.next %}
+            <a style="float: right;" href="/project/{{pagination.page.next.title | slug}}">{{pagination.page.next.title}} →</a>
+            {% endif %}
+            <div style="clear: both;"></div>
+        </main>
+    </div>
+{% endblock %}
--- a/views/templates/projects.twig
+++ b/views/templates/projects.twig
@@ -0,0 +1,42 @@
+---
+pagination:
+  data: projects
+  size: 4
+---
+
+{% extends "@layouts/base.twig" %}
+
+{% block beforeMain %}
+<dialog id="dialog" data-module-dialog>
+    <a href="/" data-swup-link-to-fragment="#paginated" style="float: right;" data-dialog="close">Close</a>
+</dialog>
+
+<div data-module-scroll="main">
+    {% include "@partials/header.twig" %}
+{% endblock %}
+
+{% block content %}
+    <div class="o-container">
+        <h1 class="c-heading -h1">Projects</h1>
+
+        <div id="paginated">
+            <ul>
+            {% for item in pagination.items %}
+                <li><a href="/project/{{item.title|slug}}">{{ item.title }}</a></li>
+            {% endfor %}
+            </ul>
+
+            <ol>
+            {% for pageEntry in pagination.pages %}
+                {% if page.url == pagination.hrefs[ loop.index0 ] %}
+                    <span aria-current="page">{{ loop.index }}</span>
+                {% else %}
+                    <a href="{{ pagination.hrefs[ loop.index0 ] }}">{{ loop.index }}</a>
+                {% endif %}
+            {% endfor %}
+            </ol>
+        </div>
+    </div>
+
+    <template id="modal"></template>
+{% endblock %}
--- a/www/assets/scripts/app.js
+++ b/www/assets/scripts/app.js
--- a/www/assets/scripts/app.js.map
+++ b/www/assets/scripts/app.js.map
--- a/www/assets/styles/main.css
+++ b/www/assets/styles/main.css
--- a/www/assets/styles/main.css.map
+++ b/www/assets/styles/main.css.map
--- a/www/form.html
+++ b/www/form.html
@@ -1,105 +0,0 @@
-<!doctype html>
-<html class="is-loading" lang="en" data-page="page">
-    <head>
-        <meta charset="utf-8">
-        <title>Form | Locomotive Boilerplate</title>
-        <meta name="description" content="">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-
-        <meta name="theme-color" content="#ffffff">
-        <meta name="msapplication-TileColor" content="#ffffff">
-        <link rel="manifest" href="site.webmanifest">
-        <link rel="apple-touch-icon" sizes="180x180" href="assets/images/favicons/apple-touch-icon.png">
-        <link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicons/favicon-32x32.png">
-        <link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicons/favicon-16x16.png">
-        <link rel="mask-icon" href="assets/images/favicons/safari-pinned-tab.svg" color="#000000">
-
-        <link id="main-css" rel="stylesheet" href="assets/styles/main.css" media="print" onload="this.media='all'; this.onload=null; this.isLoaded=true">
-    </head>
-    <body data-module-load>
-        <div data-load-container>
-            <div data-module-scroll="main">
-                <header>
-                    <a href="/"><h1>Locomotive Boilerplate</h1></a>
-                    <nav>
-                        <ul>
-                            <li><a href="images.html">Images</a></li>
-                            <li><a href="form.html" data-load="customTransition">Form</a></li>
-                            <li><a href="grid.html">Grid</a></li>
-                        </ul>
-                    </nav>
-                </header>
-
-                <main>
-                    <div class="o-container">
-                        <h1 class="c-heading -h1">Page</h1>
-
-                        <div class="o-layout">
-                            <div class="o-layout_item u-1/2@from-small">
-
-                                <form class="c-form">
-                                    <div class="c-form_item">
-                                        <label class="c-form_label" for="input">Input</label>
-                                        <input class="c-form_input" type="text" id="input">
-                                    </div>
-                                    <div class="c-form_item">
-                                        <div class="o-layout -gutter">
-                                            <div class="o-layout_item u-1/2">
-                                                <input class="c-form_checkbox" type="checkbox" id="checkbox">
-                                                <label class="c-form_checkboxLabel" for="checkbox">Checkbox</label>
-                                            </div>
-                                            <div class="o-layout_item u-1/2">
-                                                <input class="c-form_checkbox" type="checkbox" id="checkbox2">
-                                                <label class="c-form_checkboxLabel" for="checkbox2">Checkbox 2</label>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div class="c-form_item">
-                                        <div class="o-layout -gutter">
-                                            <div class="o-layout_item u-1/2">
-                                                <input class="c-form_radio" type="radio" name="radio" id="radio">
-                                                <label class="c-form_radioLabel" for="radio">Radio</label>
-                                            </div>
-                                            <div class="o-layout_item u-1/2">
-                                                <input class="c-form_radio" type="radio" name="radio" id="radio2">
-                                                <label class="c-form_radioLabel" for="radio2">Radio 2</label>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div class="c-form_item">
-                                        <label class="c-form_label" for="select">Select</label>
-                                        <div class="c-form_select">
-                                            <select class="c-form_select_input" id="select">
-                                                <option value="option">Option</option>
-                                                <option value="option2">Option 2</option>
-                                                <option value="option3">Option 3</option>
-                                            </select>
-                                        </div>
-                                    </div>
-                                    <div class="c-form_item">
-                                        <label class="c-form_label" for="textarea">Textarea</label>
-                                        <textarea class="c-form_textarea" id="textarea"></textarea>
-                                    </div>
-                                    <button class="c-button" type="submit">
-                                        Submit
-                                    </button>
-                                </form>
-
-                            </div>
-                        </div>
-                    </div>
-                </main>
-
-                <footer>
-                    <p>Made with <a href="https://github.com/locomotivemtl/locomotive-boilerplate" title="Locomotive Boilerplate" target="_blank" rel="noopener">🚂</a></p>
-                </footer>
-            </div>
-        </div>
-
-        <script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js" crossorigin="anonymous"></script>
-        <script nomodule src="https://polyfill.io/v3/polyfill.min.js?features=Element.prototype.remove%2CElement.prototype.append%2Cfetch%2CCustomEvent%2CElement.prototype.matches%2CNodeList.prototype.forEach%2CAbortController" crossorigin="anonymous"></script>
-
-        <script src="assets/scripts/vendors.js" defer></script>
-        <script src="assets/scripts/app.js" defer></script>
-    </body>
-</html>
--- a/www/grid.html
+++ b/www/grid.html
@@ -1,96 +0,0 @@
-<!doctype html>
-<html class="is-loading" lang="en" data-page="grid">
-<head>
-    <meta charset="utf-8">
-    <title>Locomotive Boilerplate</title>
-    <meta name="description" content="">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-
-    <meta name="theme-color" content="#ffffff">
-    <meta name="msapplication-TileColor" content="#ffffff">
-    <link rel="manifest" href="site.webmanifest">
-    <link rel="apple-touch-icon" sizes="180x180" href="assets/images/favicons/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicons/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicons/favicon-16x16.png">
-    <link rel="mask-icon" href="assets/images/favicons/safari-pinned-tab.svg" color="#000000">
-    <!-- For a dark mode managment and svg favicon add this in your favicon.svg -->
-    <!--
-            <style>
-                path {
-                    fill: #000;
-                }
-                @media (prefers-color-scheme: dark) {
-                    path {
-                        fill: #fff;
-                    }
-                }
-            </style>
-        -->
-    <!-- <link rel="icon" href="assets/images/favicons/favicon.svg"> -->
-
-    <link id="main-css" rel="stylesheet" href="assets/styles/main.css" media="print"
-        onload="this.media='all'; this.onload=null; this.isLoaded=true">
-</head>
-
-<body data-module-load>
-    <div data-load-container>
-        <div data-module-scroll="main">
-            <header>
-                <a href="/">
-                    <h1>Locomotive Boilerplate</h1>
-                </a>
-                <nav>
-                    <ul>
-                        <li><a href="images.html">Images</a></li>
-                        <li><a href="form.html" data-load="customTransition">Form</a></li>
-                        <li><a href="grid.html">Grid</a></li>
-                    </ul>
-                </nav>
-            </header>
-
-            <main>
-                <div class="o-container">
-                    <h1 class="c-heading -h1">Hello</h1>
-
-                    <div class="o-grid -col-4 -col-12@from-medium -gutters">
-                        <div class="o-grid_item u-gc-1/8@from-medium" style="background-color: gray;">
-                            <h2 class="c-heading -h2">This grid has 4 columns and 12 columns from `medium` MQ</h2>
-                        </div>
-
-                        <div class="o-grid_item u-gc-1/5@from-medium" style="background-color: yellow;">
-                            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita provident distinctio deleniti eaque cumque doloremque aut quo dicta porro commodi, temporibus totam dolor autem tempore quasi ullam sed suscipit vero?</p>
-                        </div>
-
-                        <div class="o-grid_item u-gc-5/9@from-medium" style="background-color: red;">
-                            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita provident distinctio deleniti eaque cumque doloremque aut quo dicta porro commodi, temporibus totam dolor autem tempore quasi ullam sed suscipit vero?</p>
-                        </div>
-
-                        <div class="o-grid_item u-gc-9/13@from-medium" style="background-color: blue;">
-                            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita provident distinctio deleniti eaque cumque doloremque aut quo dicta porro commodi, temporibus totam dolor autem tempore quasi ullam sed suscipit vero?</p>
-                        </div>
-
-                        <div class="o-grid_item u-gc-1/3 u-gc-5/13@from-medium" style="background-color: pink;">
-                            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita provident distinctio deleniti eaque cumque doloremque aut quo dicta porro commodi, temporibus totam dolor autem tempore quasi ullam sed suscipit vero?</p>
-                        </div>
-                    </div>
-                </div>
-            </main>
-
-            <footer>
-                <p>Made with <a href="https://github.com/locomotivemtl/locomotive-boilerplate"
-                        title="Locomotive Boilerplate" target="_blank" rel="noopener">🚂</a></p>
-            </footer>
-        </div>
-    </div>
-
-    <script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js"
-        crossorigin="anonymous"></script>
-    <script nomodule
-        src="https://polyfill.io/v3/polyfill.min.js?features=Element.prototype.remove%2CElement.prototype.append%2Cfetch%2CCustomEvent%2CElement.prototype.matches%2CNodeList.prototype.forEach%2CAbortController"
-        crossorigin="anonymous"></script>
-
-    <script src="assets/scripts/vendors.js" defer></script>
-    <script src="assets/scripts/app.js" defer></script>
-</body>
-
-</html>
--- a/www/images.html
+++ b/www/images.html
@@ -1,131 +0,0 @@
-<!doctype html>
-<html class="is-loading" lang="en" data-page="images">
-    <head>
-        <meta charset="utf-8">
-        <title>Images | Locomotive Boilerplate</title>
-        <meta name="description" content="">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-
-        <meta name="theme-color" content="#ffffff">
-        <meta name="msapplication-TileColor" content="#ffffff">
-        <link rel="manifest" href="site.webmanifest">
-        <link rel="apple-touch-icon" sizes="180x180" href="assets/images/favicons/apple-touch-icon.png">
-        <link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicons/favicon-32x32.png">
-        <link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicons/favicon-16x16.png">
-        <link rel="mask-icon" href="assets/images/favicons/safari-pinned-tab.svg" color="#000000">
-
-        <link id="main-css" rel="stylesheet" href="assets/styles/main.css" media="print" onload="this.media='all'; this.onload=null; this.isLoaded=true">
-    </head>
-    <body data-module-load>
-        <div data-load-container>
-            <div data-module-scroll="main">
-                <header>
-                    <a href="/"><h1>Locomotive Boilerplate</h1></a>
-                    <nav>
-                        <ul>
-                            <li><a href="images.html">Images</a></li>
-                            <li><a href="form.html" data-load="customTransition">Form</a></li>
-                            <li><a href="grid.html">Grid</a></li>
-                        </ul>
-                    </nav>
-                </header>
-
-                <main>
-                    <div class="o-container">
-                        <h1 class="c-heading -h1">Images</h1>
-
-                        <section>
-                            <h2 class="c-heading -h2">Lazy load demo</h2>
-
-                            <h3 class="c-heading -h3">Basic</h3>
-
-                            <div style="width: 640px; max-width: 100%;">
-                                <div class="o-ratio u-4:3"><img data-load-src="http://picsum.photos/800/600?v=1" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></div>
-                                <div class="o-ratio u-4:3"><img data-load-src="http://picsum.photos/800/600?v=2" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></div>
-                            </div>
-
-                            <h4 class="c-heading -h3">Using o-ratio & background-image</h3>
-
-                            <div style="width: 480px; max-width: 100%;">
-                                <div class="o-ratio u-16:9" data-load-style="background-size: cover; background-position: center; background-image: url(http://picsum.photos/640/480?v=1);"></div>
-                                <div class="o-ratio u-16:9" data-load-style="background-size: cover; background-position: center; background-image: url(http://picsum.photos/640/480?v=2);"></div>
-                            </div>
-                        </section>
-
-                        <section>
-                            <h3 class="c-heading -h3">Relative to scroll</h3>
-
-                            <h4 class="c-heading -h3">Using o-ratio & img</h3>
-
-                            <div style="width: 640px; max-width: 100%;">
-                                <div class="o-ratio u-4:3">
-                                    <img data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/800/600?v=1" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
-                                </div>
-                                <div class="o-ratio u-4:3">
-                                    <img data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/800/600?v=2" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
-                                </div>
-                                <div class="o-ratio u-4:3">
-                                    <img data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/800/600?v=3" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
-                                </div>
-                                <div class="o-ratio u-4:3">
-                                    <img data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/800/600?v=4" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
-                                </div>
-                                <div class="o-ratio u-4:3">
-                                    <img data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/800/600?v=5" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
-                                </div>
-                            </div>
-
-                            <h4 class="c-heading -h3">Using o-ratio & background-image</h3>
-
-                            <div style="width: 480px; max-width: 100%;">
-                                <div style="background-size: cover; background-position: center;" class="o-ratio u-16:9" data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/1280/720?v=1"></div>
-                                <div style="background-size: cover; background-position: center;" class="o-ratio u-16:9" data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/1280/720?v=2"></div>
-                                <div style="background-size: cover; background-position: center;" class="o-ratio u-16:9" data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/1280/720?v=3"></div>
-                                <div style="background-size: cover; background-position: center;" class="o-ratio u-16:9" data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/1280/720?v=4"></div>
-                                <div style="background-size: cover; background-position: center;" class="o-ratio u-16:9" data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/1280/720?v=5"></div>
-                            </div>
-
-                            <h4 class="c-heading -h3">Using SVG viewport for ratio</h3>
-
-                            <div style="width: 480px; max-width: 100%;">
-                                <img
-                                    data-scroll
-                                    data-scroll-call="lazyLoad, Scroll, main"
-                                    data-src="http://picsum.photos/640/480?v=6"
-                                    alt=""
-                                    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3C/svg%3E"
-                                />
-
-                                <img
-                                    data-scroll
-                                    data-scroll-call="lazyLoad, Scroll, main"
-                                    data-src="http://picsum.photos/640/480?v=7"
-                                    alt=""
-                                    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3C/svg%3E"
-                                />
-
-                                <img
-                                    data-scroll
-                                    data-scroll-call="lazyLoad, Scroll, main"
-                                    data-src="http://picsum.photos/640/480?v=8"
-                                    alt=""
-                                    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3C/svg%3E"
-                                />
-                            </div>
-                        </section>
-                    </div>
-                </main>
-
-                 <footer>
-                    <p>Made with <a href="https://github.com/locomotivemtl/locomotive-boilerplate" title="Locomotive Boilerplate" target="_blank" rel="noopener">🚂</a></p>
-                </footer>
-            </div>
-        </div>
-
-        <script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js" crossorigin="anonymous"></script>
-        <script nomodule src="https://polyfill.io/v3/polyfill.min.js?features=Element.prototype.remove%2CElement.prototype.append%2Cfetch%2CCustomEvent%2CElement.prototype.matches%2CNodeList.prototype.forEach%2CAbortController" crossorigin="anonymous"></script>
-
-        <script src="assets/scripts/vendors.js" defer></script>
-        <script src="assets/scripts/app.js" defer></script>
-    </body>
-</html>
--- a/www/index.html
+++ b/www/index.html
@@ -1,82 +0,0 @@
-<!doctype html>
-<html class="is-loading" lang="en" data-page="home">
-
-<head>
-    <meta charset="utf-8">
-    <title>Locomotive Boilerplate</title>
-    <meta name="description" content="">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-
-    <meta name="theme-color" content="#ffffff">
-    <meta name="msapplication-TileColor" content="#ffffff">
-    <link rel="manifest" href="site.webmanifest">
-    <link rel="apple-touch-icon" sizes="180x180" href="assets/images/favicons/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicons/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicons/favicon-16x16.png">
-    <link rel="mask-icon" href="assets/images/favicons/safari-pinned-tab.svg" color="#000000">
-    <!-- For a dark mode managment and svg favicon add this in your favicon.svg -->
-    <!--
-            <style>
-                path {
-                    fill: #000;
-                }
-                @media (prefers-color-scheme: dark) {
-                    path {
-                        fill: #fff;
-                    }
-                }
-            </style>
-        -->
-    <!-- <link rel="icon" href="assets/images/favicons/favicon.svg"> -->
-
-    <!-- Preload Fonts -->
-    <link rel="preload" href="assets/fonts/SourceSans3-Bold.woff2" as="font" type="font/woff2" crossorigin>
-    <link rel="preload" href="assets/fonts/SourceSans3-BoldIt.woff2" as="font" type="font/woff2" crossorigin>
-    <link rel="preload" href="assets/fonts/SourceSans3-Regular.woff2" as="font" type="font/woff2" crossorigin>
-    <link rel="preload" href="assets/fonts/SourceSans3-RegularIt.woff2" as="font" type="font/woff2" crossorigin>
-
-    <link id="main-css" rel="stylesheet" href="assets/styles/main.css" media="print"
-        onload="this.media='all'; this.onload=null; this.isLoaded=true">
-</head>
-
-<body data-module-load>
-
-    <div data-load-container>
-        <div data-module-scroll="main">
-            <header>
-                <a href="/">
-                    <h1>Locomotive Boilerplate</h1>
-                </a>
-                <nav>
-                    <ul>
-                        <li><a href="images.html">Images</a></li>
-                        <li><a href="form.html" data-load="customTransition">Form</a></li>
-                        <li><a href="grid.html">Grid</a></li>
-                    </ul>
-                </nav>
-            </header>
-
-            <main data-module-example>
-                <div class="o-container">
-                    <h1 class="c-heading -h1">Hello</h1>
-                </div>
-            </main>
-
-            <footer>
-                <p>Made with <a href="https://github.com/locomotivemtl/locomotive-boilerplate"
-                        title="Locomotive Boilerplate" target="_blank" rel="noopener">🚂</a></p>
-            </footer>
-        </div>
-    </div>
-
-    <script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js"
-        crossorigin="anonymous"></script>
-    <script nomodule
-        src="https://polyfill.io/v3/polyfill.min.js?features=Element.prototype.remove%2CElement.prototype.append%2Cfetch%2CCustomEvent%2CElement.prototype.matches%2CNodeList.prototype.forEach%2CAbortController"
-        crossorigin="anonymous"></script>
-
-    <script src="assets/scripts/vendors.js" defer></script>
-    <script src="assets/scripts/app.js" defer></script>
-</body>
-
-</html>
Author	SHA1	Message	Date
Jérémy Minié	098019ad5e	Use 11ty config to try swup fragments in a more realistic setup	2024-01-18 18:06:53 -05:00
Jérémy Minié	8cde150a3a	Use 11ty w/ twig setup instead of hardcoded HTML files	2024-01-18 17:17:11 -05:00
Jérémy Minié	d9c3bd9f92	Add swup & swup fragment plugin to test its implementation w/ the boilerplate	2024-01-18 11:42:17 -05:00
Jérémy Minié	a37c5b047a	Fix PurgeCSS safelist regex	2024-01-16 15:07:09 -05:00
Deven Caron	61b6222525	Merge pull request #163 from locomotivemtl/chore/update-node-version Update node version & bump npm packages version	2024-01-05 15:24:22 -05:00
Deven Caron	5acd27d1b0	Compile assets	2024-01-05 09:06:33 -05:00
Deven Caron	9a5a91b221	Update Node version and npm dependencies	2024-01-05 09:06:24 -05:00
Lucas	43c86c3b50	Merge pull request #160 from butterfail/greg/invlerp Fix invlerp method	2023-12-11 11:10:26 +01:00
Lucas Vallenet	0b4c82ceda	Add scss-config dedicated files	2023-12-11 11:02:54 +01:00
Lucas Vallenet	b72fdabe23	Add default z-index value	2023-12-11 11:00:21 +01:00
Lucas Vallenet	f1ebc27a69	Add aspect-ratio scss mixin	2023-12-11 10:58:24 +01:00
Grégoire Ciles	f2898c8c8e	Fix invlerp method	2023-11-29 12:27:01 +01:00
Lucas Vallenet	12d65db09f	Reverse aspect-ratio condition	2023-11-29 11:10:32 +01:00
Lucas Vallenet	657fd41f70	Update config functions: alpha parameter for colors, multiplier parameter for spacers	2023-11-21 10:03:17 +01:00
Deven Caron	65c486b910	Update locomotive-scroll to `v5.0.0-beta.9`	2023-11-15 13:55:25 -05:00
Deven Caron	3d0e4d26a2	Update sass version to `1.69.5`	2023-11-15 13:53:04 -05:00
Chauncey McAskill	df1a3a6f3c	Update sass import in styles.js	2023-09-08 17:11:27 -04:00
Lucas Vallenet	7f1b6dad2e	Fix device detection on config.js	2023-09-05 09:40:19 +02:00
Lucas Vallenet	63e46cde26	Comment updates	2023-09-05 09:34:24 +02:00
Lucas Vallenet	6564fb330a	Update eases names to match gsap / Add default vars for z-indexes, timings and eases	2023-09-05 09:31:56 +02:00
Chauncey McAskill	b5753148f1	Improve asset versioning task Add support for "increment" format to increment an integer version number with support for "increment:semver" to increment the build or patch of a SemVer version number. Usage: ```json "versions": [ { "format": "increment", "key": "version", "outfile": "assets.json" } ] ``` ```jsonc { "version": 16 // → 17 } ``` ```json "versions": [ { "format": "increment:semver", "key": "version", "outfile": "assets.json" } ] ``` ```jsonc { "version": "1.0.0" // → 1.0.1 } ``` ```jsonc { "version": "1.0.0+1" // → 1.0.0+2 } ```	2023-08-14 16:56:01 -04:00
Lucas Vallenet	7b415af8c2	Fix comments	2023-08-14 10:56:14 +02:00
Lucas Vallenet	dc0bc2042c	Create aspect-ratio SCSS mixin polyfill	2023-08-14 10:40:24 +02:00
Chauncey McAskill	e9dbb03207	Fix support for undefined tasks in watch.js Amends `596ff7a8ee`	2023-08-10 11:01:50 -04:00
Chauncey McAskill	95caf9ebb5	Replace `window.onload` with `window.addEventListener()` Since the `window` can only ever have one `onload` value, if ever a third-party script overwrites this property, the application risks never initializing. By using `addEventListener('load',…)`, the application's bootstrapping logic is queued and is more likely to be initialized.	2023-08-08 15:34:01 -04:00
Chauncey McAskill	596ff7a8ee	Fix support for undefined tasks For example, if there are no `concats` tasks defined in 'loconfig.json', avoid throwing an error.	2023-08-08 14:49:47 -04:00
Lucas Vallenet	93559a0c84	Add purgeCSS for .u-padding and .u-margin classes \| Disable purge on development	2023-07-10 15:40:56 +02:00
Lucas Vallenet	c1bcf7fb0d	Fix spacing loop	2023-06-16 10:13:10 +02:00
Lucas Vallenet	d0fcfaac86	Add config.spacers and modify spacing function to add breakpoint based spacers.	2023-06-15 17:28:29 +02:00
Lucas Vallenet	4a958c5fb5	Update grid-column loop with config.breakpoints list and media query functions. Add @to-* modifier	2023-06-15 17:28:06 +02:00
Lucas Vallenet	5e7e92c7f5	Rename z-indexes config / Update easing comment / Move font-face include to document.scss	2023-06-12 16:50:40 +02:00
Lucas Vallenet	380fbd40c3	Update comments	2023-06-12 16:21:57 +02:00
Lucas Vallenet	99801a2d8b	Add dedicated scss config files	2023-06-08 11:48:00 +02:00