Use 11ty w/ twig setup instead of hardcoded HTML files

.gitignore

@@ -3,4 +3,5 @@ node_modules
 Thumbs.db
 loconfig.*.json
 !loconfig.example.json
-.prettierrc
+.prettierrc
+www/**/*.html

assets.json

@@ -1,3 +1,3 @@
 {
-    "version": 1705435510121
+    "version": 1705616220986
 }

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();

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);
+    }
+}

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.dest, '**/*')
-            join(paths.scripts.dest, '*.js'),
-            join(paths.styles.dest, '*.css'),
-            join(paths.svgs.dest, '*.svg'),
         ]
     ).on('change', server.reload);
 

data/metadata.json

@@ -0,0 +1,4 @@
+{
+    "title": "Locomotive Boilerplate",
+    "description": "Front-end boilerplate for projects by Locomotive."
+}

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."
+    }
+]

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'
+        }
+    };
+};

loconfig.json

@@ -19,7 +19,10 @@
             "dest": "./www/assets/images"
         },
         "views": {
-            "src": "./www/"
+            "src": "./views/"
+        },
+        "data": {
+            "src": "./data/"
         }
     },
     "tasks": {

package.json

@@ -31,7 +31,10 @@
         "purgecss": "^5.0.0",
         "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": {

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>

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>

views/partials/header.twig

@@ -0,0 +1,11 @@
+<header>
+    <a href="/"><h1>Locomotive Boilerplate</h1></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>

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 %}

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 %}

views/templates/images.twig

@@ -0,0 +1,89 @@
+{% extends "@layouts/base.twig" %}
+
+{% block content %}
+    <div data-module-scroll="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>
+    </div>
+{% endblock %}

views/templates/index.twig

@@ -0,0 +1,11 @@
+---
+title: Home
+---
+
+{% extends "@layouts/base.twig" %}
+
+{% block content %}
+    <div class="o-container">
+        <h1 class="c-heading -h1">Hello</h1>
+    </div>
+{% endblock %}

views/templates/project.twig

@@ -0,0 +1,16 @@
+---
+pagination:
+    data: projects
+    size: 1
+    alias: project
+permalink: "project/{{ project.title | slug }}/index.html"
+---
+
+{% extends "@layouts/base.twig" %}
+
+{% block content %}
+    <div data-module-scroll="main">
+        <h1 class="c-heading -h1">{{project.title}}</h1>
+        <p>{{project.desc}}</p>
+    </div>
+{% endblock %}

views/templates/projects.twig

@@ -0,0 +1,30 @@
+---
+pagination:
+  data: projects
+  size: 4
+---
+
+{% extends "@layouts/base.twig" %}
+
+{% block content %}
+    <div data-module-scroll="main">
+
+        <h1 class="c-heading -h1">Projects</h1>
+
+        <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>
+{% endblock %}

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>

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>

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>

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>