Merge branch 'master' into feature/es6-updates

www/assets/scripts/app.js

@@ -609,10 +609,141 @@
   // assets/scripts/modules.js
   var modules_exports = {};
   __export(modules_exports, {
+    Example: () => Example_default,
     Load: () => Load_default,
     Scroll: () => Scroll_default
   });
 
+  // assets/scripts/utils/fonts.js
+  var isFontLoadingAPIAvailable = "fonts" in document;
+  function conformsToReference(font, criterion2) {
+    for (const [key, value] of Object.entries(criterion2)) {
+      switch (key) {
+        case "family": {
+          if (trim(font[key]) !== value) {
+            return false;
+          }
+          break;
+        }
+        case "weight": {
+          if (font[key] != value) {
+            return false;
+          }
+          break;
+        }
+        default: {
+          if (font[key] !== value) {
+            return false;
+          }
+          break;
+        }
+      }
+    }
+    return true;
+  }
+  function conformsToShorthand(font, criterion2) {
+    const family = trim(font.family);
+    if (trim(family) === criterion2) {
+      return true;
+    }
+    if (criterion2.endsWith(trim(family)) && (criterion2.match(font.weight) || criterion2.match(font.style))) {
+      return true;
+    }
+    return true;
+  }
+  function findManyByReference(search) {
+    const found = [];
+    for (const font of document.fonts) {
+      if (conformsToReference(font, search)) {
+        found.push(font);
+      }
+    }
+    return found;
+  }
+  function findManyByShorthand(search) {
+    const found = [];
+    for (const font of document.fonts) {
+      if (conformsToShorthand(font, search)) {
+        found.push(font);
+      }
+    }
+    return found;
+  }
+  function getMany(queries) {
+    if (!Array.isArray(queries)) {
+      queries = [queries];
+    }
+    const found = /* @__PURE__ */ new Set();
+    queries.forEach((search) => {
+      if (search) {
+        switch (typeof search) {
+          case "string":
+            found.add(...findManyByShorthand(search));
+            return;
+          case "object":
+            found.add(...findManyByReference(search));
+            return;
+        }
+      }
+      throw new TypeError("Expected font query to be font shorthand or font reference");
+    });
+    return [...found];
+  }
+  function loadFonts(fontsToLoad, debug = false) {
+    return __async(this, null, function* () {
+      var _a;
+      if (((_a = fontsToLoad.size) != null ? _a : fontsToLoad.length) === 0) {
+        throw new TypeError("Expected at least one font");
+      }
+      return yield loadFontsWithAPI([...fontsToLoad], debug);
+    });
+  }
+  function loadFontFaceWithAPI(font) {
+    return __async(this, null, function* () {
+      return yield (font.status === "unloaded" ? font.load() : font.loaded).then((font2) => font2, (err) => font);
+    });
+  }
+  function loadFontsWithAPI(fontsToLoad, debug = false) {
+    return __async(this, null, function* () {
+      debug && console.group("[loadFonts:API]", fontsToLoad.length, "/", document.fonts.size);
+      const fontsToBeLoaded = [];
+      for (const fontToLoad of fontsToLoad) {
+        if (fontToLoad instanceof FontFace) {
+          if (!document.fonts.has(fontToLoad)) {
+            document.fonts.add(fontToLoad);
+          }
+          fontsToBeLoaded.push(loadFontFaceWithAPI(fontToLoad));
+        } else {
+          fontsToBeLoaded.push(...getMany(fontToLoad).map((font) => loadFontFaceWithAPI(font)));
+        }
+      }
+      debug && console.groupEnd();
+      return yield Promise.all(fontsToBeLoaded);
+    });
+  }
+  function trim(value) {
+    return value.replace(/['"]+/g, "");
+  }
+  function whenReady(queries) {
+    return __async(this, null, function* () {
+      const fonts = getMany(queries);
+      return yield Promise.all(fonts.map((font) => font.loaded));
+    });
+  }
+
+  // assets/scripts/modules/Example.js
+  var Example_default = class extends _default {
+    constructor(m) {
+      super(m);
+    }
+    init() {
+      whenReady(EAGER_FONTS).then((fonts) => this.onFontsLoaded(fonts));
+    }
+    onFontsLoaded(fonts) {
+      console.log("Example: Eager Fonts Loaded!", fonts);
+    }
+  };
+
   // node_modules/modularload/dist/main.esm.js
   function _classCallCheck2(instance, Constructor) {
     if (!(instance instanceof Constructor)) {
@@ -3694,12 +3825,21 @@
       console.warn('The "main-css" stylesheet not found');
     }
   };
+  var EAGER_FONTS = [
+    { family: "Source Sans", style: "normal", weight: 400 },
+    { family: "Source Sans", style: "normal", weight: 700 }
+  ];
   function init() {
     globals_default();
     app.init(app);
     html.classList.add(config_default.CSS_CLASS.LOADED);
     html.classList.add(config_default.CSS_CLASS.READY);
     html.classList.remove(config_default.CSS_CLASS.LOADING);
+    if (isFontLoadingAPIAvailable) {
+      loadFonts(EAGER_FONTS).then((eagerFonts) => {
+        html.classList.add("fonts-loaded");
+      });
+    }
   }
 })();
 /*

www/assets/styles/main.css

@@ -516,11 +516,43 @@ button:focus, button:hover,
   text-decoration: none;
 }
 
+@font-face {
+  font-display: swap;
+  font-family: Source Sans;
+  src: url("../fonts/SourceSans3-Bold.woff2") format("woff2"), url("../fonts/SourceSans3-Bold.woff") format("woff");
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-display: swap;
+  font-family: Source Sans;
+  src: url("../fonts/SourceSans3-BoldIt.woff2") format("woff2"), url("../fonts/SourceSans3-BoldIt.woff") format("woff");
+  font-weight: 700;
+  font-style: italic;
+}
+
+@font-face {
+  font-display: swap;
+  font-family: Source Sans;
+  src: url("../fonts/SourceSans3-Regular.woff2") format("woff2"), url("../fonts/SourceSans3-Regular.woff") format("woff");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-display: swap;
+  font-family: Source Sans;
+  src: url("../fonts/SourceSans3-RegularIt.woff2") format("woff2"), url("../fonts/SourceSans3-RegularIt.woff") format("woff");
+  font-weight: 400;
+  font-style: italic;
+}
+
 html {
   min-height: 100%;
   line-height: 1.5;
-  font-family: "Webfont Sans", "Helvetica Neue", Arial, sans-serif;
-  color: #222222;
+  font-family: Source, Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
+  color: #000000;
   line-height: 1.5;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -614,9 +646,8 @@ a:focus, a:hover {
 .o-container {
   margin-right: auto;
   margin-left: auto;
-  padding-right: 3.75rem;
-  padding-left: 3.75rem;
-  max-width: 132.5rem;
+  padding-right: 20px;
+  padding-left: 20px;
 }
 
 .o-ratio {
@@ -644,90 +675,182 @@ a:focus, a:hover {
   width: 100%;
 }
 
-.o-layout {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  font-size: 0;
-  margin-left: 0;
-}
-
-.o-layout.-gutter {
-  margin-left: -3.75rem;
-}
-
-.o-layout.-gutter-small {
-  margin-left: -1.875rem;
-}
-
-.o-layout.-center {
-  text-align: center;
-}
-
-.o-layout.-right {
-  text-align: right;
-}
-
-.o-layout.-reverse {
-  direction: rtl;
-}
-
-.o-layout.-reverse.-flex {
-  flex-direction: row-reverse;
-}
-
-.o-layout.-flex {
-  display: flex;
-}
-
-.o-layout.-flex.-top {
-  align-items: flex-start;
-}
-
-.o-layout.-flex.-middle {
-  align-items: center;
-}
-
-.o-layout.-flex.-bottom {
-  align-items: flex-end;
-}
-
-.o-layout.-stretch {
-  align-items: stretch;
-}
-
-.o-layout_item {
+.o-icon {
   display: inline-block;
-  width: 100%;
-  vertical-align: top;
-  font-size: 1rem;
-  padding-left: 0;
-}
-
-.o-layout.-gutter > .o-layout_item {
-  padding-left: 3.75rem;
-}
-
-.o-layout.-gutter-small > .o-layout_item {
-  padding-left: 1.875rem;
-}
-
-.o-layout.-middle > .o-layout_item {
   vertical-align: middle;
 }
 
-.o-layout.-bottom > .o-layout_item {
-  vertical-align: bottom;
+.o-icon svg {
+  --icon-height: calc(var(--icon-width) * (1 / (var(--icon-ratio))));
+  display: block;
+  width: var(--icon-width);
+  height: var(--icon-height);
+  fill: currentColor;
 }
 
-.o-layout.-center > .o-layout_item,
-.o-layout.-right > .o-layout_item,
-.o-layout.-reverse > .o-layout_item {
-  text-align: left;
+/**
+ * Usage:
+ *
+ * ```html
+ * <div class="o-grid -col-4 -col-12@from-medium -gutters">
+ *     <div class="o-grid_item u-gc-1/2 u-gc-3/9@from-medium">
+ *         <p>Hello</p>
+ *     </div>
+ *     <div class="o-grid_item u-gc-3/4 u-gc-9/13@from-medium">
+ *         <p>Hello</p>
+ *     </div>
+ * </div>
+ * ```
+ */
+.o-grid {
+  display: grid;
+  width: 100%;
 }
 
-.o-layout.-reverse > .o-layout_item {
-  direction: ltr;
+.o-grid:is(ul,
+ol) {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.o-grid.-col-12 {
+  grid-template-columns: repeat(12, 1fr);
+}
+
+.o-grid.-col-4 {
+  grid-template-columns: repeat(4, 1fr);
+}
+
+@media (min-width: 1000px) {
+  .o-grid.-col-12\@from-medium {
+    grid-template-columns: repeat(12, 1fr);
+  }
+}
+
+.o-grid.-gutters {
+  gap: 20px;
+  -moz-column-gap: 20px;
+       column-gap: 20px;
+}
+
+.o-grid.-full-height {
+  height: 100%;
+}
+
+.o-grid.-top-items {
+  align-items: start;
+}
+
+.o-grid.-right-items {
+  justify-items: end;
+}
+
+.o-grid.-bottom-items {
+  align-items: end;
+}
+
+.o-grid.-left-items {
+  justify-items: start;
+}
+
+.o-grid.-center-items {
+  align-items: center;
+  justify-items: center;
+}
+
+.o-grid.-center-items-x {
+  justify-items: center;
+}
+
+.o-grid.-center-items-y {
+  align-items: center;
+}
+
+.o-grid.-stretch-items {
+  align-items: stretch;
+  justify-items: stretch;
+}
+
+.o-grid.-top-cells {
+  align-content: start;
+}
+
+.o-grid.-right-cells {
+  justify-content: end;
+}
+
+.o-grid.-bottom-cells {
+  align-content: end;
+}
+
+.o-grid.-left-cells {
+  justify-content: start;
+}
+
+.o-grid.-center-cells {
+  align-content: center;
+  justify-content: center;
+}
+
+.o-grid.-center-cells-x {
+  justify-content: center;
+}
+
+.o-grid.-center-cells-y {
+  align-content: center;
+}
+
+.o-grid.-stretch-cells {
+  align-content: stretch;
+  justify-content: stretch;
+}
+
+.o-grid.-space-around-cells {
+  align-content: space-around;
+  justify-content: space-around;
+}
+
+.o-grid.-space-around-cells-x {
+  justify-content: space-around;
+}
+
+.o-grid.-space-around-cells-y {
+  align-content: space-around;
+}
+
+.o-grid.-space-between-cells {
+  justify-content: space-between;
+  align-content: space-between;
+}
+
+.o-grid.-space-between-cells-x {
+  justify-content: space-between;
+}
+
+.o-grid.-space-between-cells-y {
+  align-content: space-between;
+}
+
+.o-grid.-space-evenly-cells {
+  justify-content: space-evenly;
+  align-content: space-evenly;
+}
+
+.o-grid.-space-evenly-cells-x {
+  justify-content: space-evenly;
+}
+
+.o-grid.-space-evenly-cells-y {
+  align-content: space-evenly;
+}
+
+.o-grid_item {
+  grid-column: 1 / -1;
+}
+
+.o-grid_item.-align-end {
+  align-self: end;
 }
 
 .c-scrollbar {
@@ -753,7 +876,7 @@ a:focus, a:hover {
   position: absolute;
   top: 0;
   right: 0;
-  background-color: black;
+  background-color: #000000;
   opacity: 0.5;
   width: 7px;
   border-radius: 10px;
@@ -818,7 +941,7 @@ a:focus, a:hover {
 .c-form_input, .c-form_select_input, .c-form_textarea {
   padding: 0.625rem;
   border: 1px solid lightgray;
-  background-color: white;
+  background-color: #FFFFFF;
 }
 
 .c-form_input:hover, .c-form_select_input:hover, .c-form_textarea:hover {
@@ -949,68 +1072,43 @@ a:focus, a:hover {
 }
 
 /* stylelint-enable */
-.u-1\/1 {
-  width: 100% !important;
+
+.u-gc-1\/3 {
+  grid-column-start: 1;
+  grid-column-end: 3;
 }
 
-.u-1\/2 {
-  width: 50% !important;
-}
-
-.u-2\/2 {
-  width: 100% !important;
-}
-
-.u-1\/3 {
-  width: 33.33333% !important;
-}
-
-.u-2\/3 {
-  width: 66.66667% !important;
-}
-
-.u-3\/3 {
-  width: 100% !important;
-}
-
-.u-1\/4 {
-  width: 25% !important;
-}
-
-.u-2\/4 {
-  width: 50% !important;
-}
-
-.u-3\/4 {
-  width: 75% !important;
-}
-
-.u-4\/4 {
-  width: 100% !important;
-}
-
-.u-1\/5 {
-  width: 20% !important;
-}
-
-.u-2\/5 {
-  width: 40% !important;
-}
-
-.u-3\/5 {
-  width: 60% !important;
-}
-
-.u-4\/5 {
-  width: 80% !important;
-}
-
-.u-5\/5 {
-  width: 100% !important;
-}
-
-@media (min-width: 700px) {
-  .u-1\/2\@from-small {
-    width: 50%;
+@media (min-width: 1000px) {
+  .u-gc-1\/5\@from-medium {
+    grid-column-start: 1;
+    grid-column-end: 5;
+  }
+}
+
+@media (min-width: 1000px) {
+  .u-gc-1\/8\@from-medium {
+    grid-column-start: 1;
+    grid-column-end: 8;
+  }
+}
+
+@media (min-width: 1000px) {
+  .u-gc-5\/9\@from-medium {
+    grid-column-start: 5;
+    grid-column-end: 9;
+  }
+}
+
+@media (min-width: 1000px) {
+  .u-gc-5\/13\@from-medium {
+    grid-column-start: 5;
+    grid-column-end: 13;
+  }
+}
+
+@media (min-width: 1000px) {
+  .u-gc-9\/13\@from-medium {
+    grid-column-start: 9;
+    grid-column-end: 13;
   }
 }

www/form.html

@@ -25,6 +25,7 @@
                         <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>

www/grid.html

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

www/images.html

@@ -25,6 +25,7 @@
                         <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>

www/index.html

@@ -29,11 +29,20 @@
         -->
     <!-- <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>
+
+    <!-- <p aria-hidden="true" class="u-screen-reader-text" style="font-family: 'Webfont';">&nbsp;</p> -->
+
     <div data-load-container>
         <div class="o-scroll" data-module-scroll="main">
             <header data-scroll-section>
@@ -44,11 +53,12 @@
                     <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-scroll-section>
+            <main data-module-example data-scroll-section>
                 <div class="o-container">
                     <h1 class="c-heading -h1">Hello</h1>
                 </div>