Merge pull request #108 from locomotivemtl/feature/grid-css

Add grid CSS layout system
2026-01-15 00:55:08 +08:00 · 2022-06-07 13:13:31 -04:00
parent de6b3d73a1 4079752fe0
commit a385f6ed11
20 changed files with 643 additions and 4742 deletions
--- a/README.md
+++ b/README.md
@@ -15,6 +15,7 @@
 * Uses [SVG Mixer] for processing SVG files and generating spritesheets.
 * Uses [ITCSS] for a sane and scalable CSS architecture.
 * Uses [Locomotive Scroll] for smooth scrolling with parallax effects.
+* Uses a custom [grid system](docs/grid.md) for layout creation.

 Learn more about [languages and technologies](docs/technologies.md).

@@ -84,6 +85,7 @@ Learn more about [development and building](docs/development.md).

 * [Development and building](docs/development.md)
 * [Languages and technologies](docs/technologies.md)
+* [Grid system](docs/grid.md)

 [BrowserSync]:       https://npmjs.com/package/browser-sync
 [ESBuild]:           https://npmjs.com/package/esbuild
--- a/assets/styles/main.scss
+++ b/assets/styles/main.scss
@@ -17,8 +17,8 @@
@import "tools/functions";
@import "tools/mixins";
@import "tools/fonts";
-@import "tools/layout";
-@import "tools/widths";
+// @import "tools/layout";
+// @import "tools/widths";
 // @import "tools/family";

 // Generic
@@ -42,7 +42,8 @@
@import "objects/container";
@import "objects/ratio";
@import "objects/icons";
-@import "objects/layout";
+@import "objects/grid";
+// @import "objects/layout";
 // @import "objects/crop";
 // @import "objects/table";

@@ -62,7 +63,8 @@
 // ==========================================================================

@import "utilities/ratio";
-@import "utilities/widths";
+@import "utilities/grid-column";
+// @import "utilities/widths";
 // @import "utilities/align";
 // @import "utilities/helpers";
 // @import "utilities/states";
--- a/assets/styles/objects/_container.scss
+++ b/assets/styles/objects/_container.scss
@@ -13,7 +13,6 @@
 .o-container {
    margin-right: auto;
    margin-left: auto;
-    padding-right: rem($padding);
-    padding-left: rem($padding);
-    max-width: rem($container-width + ($padding * 2));
+    padding-right: $base-column-gap;
+    padding-left: $base-column-gap;
 }
--- a/assets/styles/objects/_grid.scss
+++ b/assets/styles/objects/_grid.scss
@@ -0,0 +1,171 @@
+// ==========================================================================
+// Grid helper
+// ==========================================================================
+// Help: https://css-tricks.com/snippets/css/complete-guide-grid/
+//
+/**
+ * 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%;
+
+    &:is(ul, ol) {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+    // ==========================================================================
+    // Cols
+    // ==========================================================================
+    &.-col-#{$base-column-nb} {
+        grid-template-columns: repeat(#{$base-column-nb}, 1fr);
+    }
+
+    &.-col-4 {
+        grid-template-columns: repeat(4, 1fr);
+    }
+
+    &.-col-#{$base-column-nb}\@from-medium {
+        @media (min-width: $from-medium) {
+            grid-template-columns: repeat(#{$base-column-nb}, 1fr);
+        }
+    }
+
+    // ==========================================================================
+    // Gutters
+    // ==========================================================================
+
+    // Gutters rows and columns
+    &.-gutters {
+        gap: $base-column-gap;
+        column-gap: $base-column-gap;
+    }
+
+    // ==========================================================================
+    // Modifiers
+    // ==========================================================================
+    &.-full-height {
+        height: 100%;
+    }
+
+    // ==========================================================================
+    // Aligns
+    // ==========================================================================
+
+    // ==========================================================================
+    // Items inside cells
+    //
+    &.-top-items {
+        align-items: start;
+    }
+    &.-right-items {
+        justify-items: end;
+    }
+    &.-bottom-items {
+        align-items: end;
+    }
+    &.-left-items {
+        justify-items: start;
+    }
+    &.-center-items {
+        align-items: center;
+        justify-items: center;
+    }
+    &.-center-items-x {
+        justify-items: center;
+    }
+    &.-center-items-y {
+        align-items: center;
+    }
+    &.-stretch-items {
+        align-items: stretch;
+        justify-items: stretch;
+    }
+
+    // ==========================================================================
+    // Cells
+    //
+    &.-top-cells {
+        align-content: start;
+    }
+    &.-right-cells {
+        justify-content: end;
+    }
+    &.-bottom-cells {
+        align-content: end;
+    }
+    &.-left-cells {
+        justify-content: start;
+    }
+    &.-center-cells {
+        align-content: center;
+        justify-content: center;
+    }
+    &.-center-cells-x {
+        justify-content: center;
+    }
+    &.-center-cells-y {
+        align-content: center;
+    }
+    &.-stretch-cells {
+        align-content: stretch;
+        justify-content: stretch;
+    }
+    &.-space-around-cells {
+        align-content: space-around;
+        justify-content: space-around;
+    }
+    &.-space-around-cells-x {
+        justify-content: space-around;
+    }
+    &.-space-around-cells-y {
+        align-content: space-around;
+    }
+    &.-space-between-cells {
+        justify-content: space-between;
+        align-content: space-between;
+    }
+    &.-space-between-cells-x {
+        justify-content: space-between;
+    }
+    &.-space-between-cells-y {
+        align-content: space-between;
+    }
+    &.-space-evenly-cells {
+        justify-content: space-evenly;
+        align-content: space-evenly;
+    }
+    &.-space-evenly-cells-x {
+        justify-content: space-evenly;
+    }
+    &.-space-evenly-cells-y {
+        align-content: space-evenly;
+    }
+}
+
+// ==========================================================================
+// Grid item
+// ==========================================================================
+// By default, a grid item takes full width of its parent.
+//
+.o-grid_item {
+    grid-column: 1 / -1;
+
+    &.-align-end {
+        align-self: end;
+    }
+}
--- a/assets/styles/settings/_config.scss
+++ b/assets/styles/settings/_config.scss
@@ -75,16 +75,18 @@ $easing:    $ease-power2-out;

 // Spacing Units
 // =============================================================================
-
 $unit:       60px;
-$unit-small:    30px;
+$unit-small: 20px;

 // Container
-// =============================================================================
-
-$container-width:   2000px;
+// ==========================================================================
 $padding:         $unit;

+// Grid
+// ==========================================================================
+$base-column-nb: 12;
+$base-column-gap: $unit-small;
+
 // Breakpoints
 // =============================================================================

--- a/assets/styles/utilities/_grid-column.scss
+++ b/assets/styles/utilities/_grid-column.scss
@@ -0,0 +1,63 @@
+// ==========================================================================
+// Tools / Grid Columns
+// ==========================================================================
+
+//
+// Grid layout system.
+//
+// This tool generates columns for all needed media queries.
+// Unused classes will be purge by the css post-processor.
+//
+
+$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-namespace, $breakpoint in $breakpoints {
+    @for $fromIndex from 1 through $colsMax {
+        @for $toIndex from 1 through $colsMax {
+            @if $breakpoint == null {
+                .u-gc-#{$fromIndex}\/#{$toIndex} {
+                    grid-column-start: #{$fromIndex};
+                    grid-column-end: #{$toIndex};
+                }
+            } @else {
+                .u-gc-#{$fromIndex}\/#{$toIndex}\@#{$breakpoint} {
+                    @if $breakpoint-namespace == "from-tiny" {
+                        @media (min-width: $from-tiny) {
+                            grid-column-start: #{$fromIndex};
+                            grid-column-end: #{$toIndex};
+                        }
+                    } @else if $breakpoint-namespace == "from-small" {
+                        @media (min-width: $from-small) {
+                            grid-column-start: #{$fromIndex};
+                            grid-column-end: #{$toIndex};
+                        }
+                    } @else if $breakpoint-namespace == "from-medium" {
+                        @media (min-width: $from-medium) {
+                            grid-column-start: #{$fromIndex};
+                            grid-column-end: #{$toIndex};
+                        }
+                    } @else if $breakpoint-namespace == "from-large" {
+                        @media (min-width: $from-large) {
+                            grid-column-start: #{$fromIndex};
+                            grid-column-end: #{$toIndex};
+                        }
+                    } @else if $breakpoint-namespace == "from-big" {
+                        @media (min-width: $from-big) {
+                            grid-column-start: #{$fromIndex};
+                            grid-column-end: #{$toIndex};
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
--- a/build/tasks/styles.js
+++ b/build/tasks/styles.js
@@ -7,6 +7,7 @@ import { writeFile } from 'node:fs/promises';
 import { basename } from 'node:path';
 import { promisify } from 'node:util';
 import sass from 'node-sass';
+import { PurgeCSS } from 'purgecss';

 const sassRender = promisify(sass.render);

@@ -142,7 +143,12 @@ export default async function compileStyles(sassOptions = null, postcssOptions =
            }

            try {
-                await writeFile(outfile, result.css);
+                await writeFile(outfile, result.css).then(() => {
+                    // Purge CSS once file exists.
+                    if (outfile) {
+                        purgeUnusedCSS(outfile, `${label || `${filestem}.css`}`);
+                    }
+                });

                if (result.css) {
                    message(`${label || `${filestem}.css`} compiled`, 'success', timeLabel);
@@ -212,3 +218,37 @@ function createPostCSSProcessor(pluginsListOrMap, options)

    return postcss(plugins);
 }
+
+/**
+ * Purge unused styles from CSS files.
+ *
+ * @async
+ *
+ * @param  {string} outfile - The path of a css file
+ *      If missing the function stops.
+ * @param  {string} label   - The CSS file label or name.
+ * @return {Promise}
+ */
+async function purgeUnusedCSS(outfile, label) {
+    label = label ?? basename(outfile);
+    const timeLabel = `${filestem}.css purged in`;
+    console.time(timeLabel);
+
+    const purgeCSSContentFiles = Array.from(loconfig.tasks.purgeCSS.content);
+
+    const purgeCSSResults = await new PurgeCSS().purge({
+        content: purgeCSSContentFiles,
+        css: [ outfile ],
+        rejected: true,
+        defaultExtractor: content => content.match(/[a-z0-9_\-\\\/\@]+/gi) || [],
+        safelist: {
+            standard: [ /^((?!\bu-gc-).)*$/ ]
+        }
+    })
+
+    for(let result of purgeCSSResults) {
+        await writeFile(outfile, result.css)
+
+        message(`${label} purged`, 'chore', timeLabel);
+    }
+}
--- a/build/utils/message.js
+++ b/build/utils/message.js
@@ -17,6 +17,10 @@ export default function message(text, type, timerID) {
            console.log('✅ ', kleur.bgGreen().black(text));
            break;

+        case 'chore':
+            console.log('🧹 ', kleur.bgGreen().black(text));
+            break;
+
        case 'notice':
            console.log('ℹ️  ', kleur.bgBlue().black(text));
            break;
--- a/docs/grid.md
+++ b/docs/grid.md
@@ -0,0 +1,109 @@
+# Grid system
+
+* [Architectures](#architecture)
+  * [Build tasks](#build-tasks)
+    * [Configuration](#configuration)
+* [Usage](#usage)
+  * [Example](#example)
+
+## Architecture
+
+The boilerplate's grid system is meant to be simple and easy to use. The goal is to create a light, flexible, and reusable way to build layouts.
+The following styles are needed to work properly:
+
+* [`o-grid`](../assets/styles/objects/_grid.scss) — Object file where the default grid styles are set such as column numbers, modifiers, and options.
+* [`u-grid-columns`](../assets/styles/utilities/_grid-column.scss) — Utility file that generates the styles for every possible column based on an array of media queries and column numbers.
+
+### Build tasks
+
+The columns generated by [`u-grid-columns`](../assets/styles/utilities/_grid-column.scss) adds a lot of styles to the compiled CSS file. To mitigate that, [PurgeCSS] is integrated into the `styles` build task to purge unused CSS.
+
+#### Configuration
+
+Depending on your project, you will need to specify all the files that include CSS classes from the grid system. These files will be scanned by [PurgeCSS] to your compiled CSS files.
+
+Example of a Charcoal project:
+
+```jsonc
+"purgeCSS": {
+    "content": [
+        "./views/app/template/**/*.mustache",
+        "./src/App/Template/*.php",
+        "./assets/scripts/**/*" // use case: `el.classList.add('u-gc-1/2')`
+    ]
+}
+```
+
+## Usage
+
+The first step is to set intial SCSS values in the following files :
+
+- [`settings/_config.scss`](../assets/styles/settings/_config.scss)
+
+    ```scss
+    // Grid
+    // ==========================================================================
+    $base-column-nb: 12;
+    $base-column-gap: $unit-small;
+    ```
+
+    You can create multiple column layouts depending on media queries.
+
+- [`objects/_grid.scss`](../assets/styles/objects/_grid.scss)
+
+    ```scss
+    .o-grid {
+        display: grid;
+        width: 100%;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+
+        // ==========================================================================
+        // Cols
+        // ==========================================================================
+        &.-col-#{$base-column-nb} {
+            grid-template-columns: repeat(#{$base-column-nb}, 1fr);
+        }
+
+        &.-col-4 {
+            grid-template-columns: repeat(4, 1fr);
+        }
+
+        &.-col-#{$base-column-nb}\@from-medium {
+            @media (min-width: $from-medium) {
+                grid-template-columns: repeat(#{$base-column-nb}, 1fr);
+            }
+        }
+        // …
+    ```
+
+### Example
+
+The following layout has 4 columns at `>=999px` and 12 columns at `<1000px`.
+
+```html
+<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">
+            <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">
+            <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">
+            <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">
+            <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>
+```
+
+[PurgeCSS]: https://purgecss.com/
--- a/loconfig.json
+++ b/loconfig.json
@@ -19,7 +19,7 @@
            "dest": "./www/assets/images"
        },
        "views": {
-            "src": "./views/boilerplate/template"
+            "src": "./www/"
        }
    },
    "tasks": {
@@ -56,6 +56,12 @@
                ],
                "outfile": "{% paths.svgs.dest %}/sprite.svg"
            }
+        ],
+        "purgeCSS": {
+            "content": [
+                "./www/**/*.html",
+                "./assets/scripts/**/*"
            ]
        }
    }
+}
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
                "node-notifier": "^10.0.1",
                "node-sass": "^7.0.1",
                "postcss": "^8.4.12",
+                "purgecss": "^4.1.3",
                "svg-mixer": "^2.3.14",
                "tiny-glob": "^0.2.9"
            },
@@ -1406,6 +1407,18 @@
                "node": ">= 8"
            }
        },
+        "node_modules/cssesc": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+            "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+            "dev": true,
+            "bin": {
+                "cssesc": "bin/cssesc"
+            },
+            "engines": {
+                "node": ">=4"
+            }
+        },
        "node_modules/dashdash": {
            "version": "1.14.1",
            "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
@@ -4966,6 +4979,19 @@
                "url": "https://opencollective.com/postcss/"
            }
        },
+        "node_modules/postcss-selector-parser": {
+            "version": "6.0.9",
+            "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.9.tgz",
+            "integrity": "sha512-UO3SgnZOVTwu4kyLR22UQ1xZh086RyNZppb7lLAKBFK8a32ttG5i87Y/P3+2bRSjZNyJ1B7hfFNo273tKe9YxQ==",
+            "dev": true,
+            "dependencies": {
+                "cssesc": "^3.0.0",
+                "util-deprecate": "^1.0.2"
+            },
+            "engines": {
+                "node": ">=4"
+            }
+        },
        "node_modules/postcss-value-parser": {
            "version": "4.2.0",
            "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
@@ -5128,6 +5154,50 @@
                "node": ">=6"
            }
        },
+        "node_modules/purgecss": {
+            "version": "4.1.3",
+            "resolved": "https://registry.npmjs.org/purgecss/-/purgecss-4.1.3.tgz",
+            "integrity": "sha512-99cKy4s+VZoXnPxaoM23e5ABcP851nC2y2GROkkjS8eJaJtlciGavd7iYAw2V84WeBqggZ12l8ef44G99HmTaw==",
+            "dev": true,
+            "dependencies": {
+                "commander": "^8.0.0",
+                "glob": "^7.1.7",
+                "postcss": "^8.3.5",
+                "postcss-selector-parser": "^6.0.6"
+            },
+            "bin": {
+                "purgecss": "bin/purgecss.js"
+            }
+        },
+        "node_modules/purgecss/node_modules/commander": {
+            "version": "8.3.0",
+            "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+            "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+            "dev": true,
+            "engines": {
+                "node": ">= 12"
+            }
+        },
+        "node_modules/purgecss/node_modules/glob": {
+            "version": "7.2.0",
+            "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
+            "integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==",
+            "dev": true,
+            "dependencies": {
+                "fs.realpath": "^1.0.0",
+                "inflight": "^1.0.4",
+                "inherits": "2",
+                "minimatch": "^3.0.4",
+                "once": "^1.3.0",
+                "path-is-absolute": "^1.0.0"
+            },
+            "engines": {
+                "node": "*"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/isaacs"
+            }
+        },
        "node_modules/qs": {
            "version": "6.2.3",
            "resolved": "https://registry.npmjs.org/qs/-/qs-6.2.3.tgz",
@@ -8186,6 +8256,12 @@
                "which": "^2.0.1"
            }
        },
+        "cssesc": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+            "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+            "dev": true
+        },
        "dashdash": {
            "version": "1.14.1",
            "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
@@ -10899,6 +10975,16 @@
                }
            }
        },
+        "postcss-selector-parser": {
+            "version": "6.0.9",
+            "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.9.tgz",
+            "integrity": "sha512-UO3SgnZOVTwu4kyLR22UQ1xZh086RyNZppb7lLAKBFK8a32ttG5i87Y/P3+2bRSjZNyJ1B7hfFNo273tKe9YxQ==",
+            "dev": true,
+            "requires": {
+                "cssesc": "^3.0.0",
+                "util-deprecate": "^1.0.2"
+            }
+        },
        "postcss-value-parser": {
            "version": "4.2.0",
            "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
@@ -11042,6 +11128,40 @@
            "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
            "dev": true
        },
+        "purgecss": {
+            "version": "4.1.3",
+            "resolved": "https://registry.npmjs.org/purgecss/-/purgecss-4.1.3.tgz",
+            "integrity": "sha512-99cKy4s+VZoXnPxaoM23e5ABcP851nC2y2GROkkjS8eJaJtlciGavd7iYAw2V84WeBqggZ12l8ef44G99HmTaw==",
+            "dev": true,
+            "requires": {
+                "commander": "^8.0.0",
+                "glob": "^7.1.7",
+                "postcss": "^8.3.5",
+                "postcss-selector-parser": "^6.0.6"
+            },
+            "dependencies": {
+                "commander": {
+                    "version": "8.3.0",
+                    "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+                    "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+                    "dev": true
+                },
+                "glob": {
+                    "version": "7.2.0",
+                    "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
+                    "integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==",
+                    "dev": true,
+                    "requires": {
+                        "fs.realpath": "^1.0.0",
+                        "inflight": "^1.0.4",
+                        "inherits": "2",
+                        "minimatch": "^3.0.4",
+                        "once": "^1.3.0",
+                        "path-is-absolute": "^1.0.0"
+                    }
+                }
+            }
+        },
        "qs": {
            "version": "6.2.3",
            "resolved": "https://registry.npmjs.org/qs/-/qs-6.2.3.tgz",
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
        "node-notifier": "^10.0.1",
        "node-sass": "^7.0.1",
        "postcss": "^8.4.12",
+        "purgecss": "^4.1.3",
        "svg-mixer": "^2.3.14",
        "tiny-glob": "^0.2.9"
    }
--- 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
@@ -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>
--- a/www/grid.html
+++ b/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>
--- a/www/images.html
+++ b/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>
--- a/www/index.html
+++ b/www/index.html
@@ -44,6 +44,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>