From 0439b165cfe750118fd9419637e903b9b8626d11 Mon Sep 17 00:00:00 2001
From: Deven Caron <devencaron@gmail.com>
Date: Mon, 11 Apr 2022 15:18:11 -0400
Subject: [PATCH] Apply suggestions from code review

Co-authored-by: Chauncey McAskill <chauncey@mcaskill.ca>
---
 README.md     |  2 +-
 docs/grid.md  | 77 ++++++++++++++++++++++++++-------------------------
 loconfig.json |  2 --
 www/grid.html |  1 -
 4 files changed, 40 insertions(+), 42 deletions(-)

diff --git a/README.md b/README.md
index 48ae114..b496f78 100644
--- a/README.md
+++ b/README.md
@@ -15,7 +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.
+* Uses a custom [grid system](docs/grid.md) for layout creation.
 
 Learn more about [languages and technologies](docs/technologies.md).
 
diff --git a/docs/grid.md b/docs/grid.md
index f65ca03..c8ac8b1 100644
--- a/docs/grid.md
+++ b/docs/grid.md
@@ -27,63 +27,64 @@ The generation of columns adds a lot of styles in the css output file. To solve
 
 Depending on your project, you will need to specify all the files that will include the Grid System classes. These files will be parsed by [PurgeCSS] and then a "cleaned" css file will be generated. The styles should also compile everytime the following listed files are changed.
 
-```json
-// Charcoal project example
+Example of a Charcoal project:
+
+```jsonc
 "purgeCSS": {
     "content": [
-        "./www/**/*.html", 
         "./views/app/template/**/*.mustache",
         "./src/App/Template/*.php",
-        "./assets/scripts/**/*" // use case: el.classList.add('u-gc-1/2')
+        "./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 :
 
-- [`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
-
-- [`grid.scss`](../assets/styles/objects/_grid.scss)
-```scss
-.o-grid {
-    display: grid;
-    width: 100%;
-    margin: 0;
-    padding: 0;
-    list-style: none;
+- [`settings/_config.scss`](../assets/styles/settings/_config.scss)
 
+    ```scss
+    // Grid
     // ==========================================================================
-    // Cols
-    // ==========================================================================
-    &.-col-#{$base-column-nb} {
-        grid-template-columns: repeat(#{$base-column-nb}, 1fr);
-    }
+    $base-column-nb: 12;
+    $base-column-gap: $unit-small;
+    ```
 
-    &.-col-4 {
-        grid-template-columns: repeat(4, 1fr);
-    }
+    You can create multiple column layouts depending on media queries.
 
-    &.-col-#{$base-column-nb}\@from-medium {
-        @media (min-width: $from-medium) {
+- [`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
 
-Here is an example of a layout that has 4 columns `>=999px` and 12 columns `<1000px`
+The following layout has 4 columns at `>=999px` and 12 columns at `<1000px`.
 
 ```html
 <div class="o-container">
@@ -109,4 +110,4 @@ Here is an example of a layout that has 4 columns `>=999px` and 12 columns `<100
 </div>
 ```
 
-[purgecss]:      https://purgecss.com/
+[PurgeCSS]: https://purgecss.com/
diff --git a/loconfig.json b/loconfig.json
index 0bfd537..7dc9107 100755
--- a/loconfig.json
+++ b/loconfig.json
@@ -60,8 +60,6 @@
         "purgeCSS": {
             "content": [
                 "./www/**/*.html",
-                "./views/app/template/**/*.mustache",
-                "./src/App/Template/*.php",
                 "./assets/scripts/**/*"
             ]
         }
diff --git a/www/grid.html b/www/grid.html
index df59009..8652051 100644
--- a/www/grid.html
+++ b/www/grid.html
@@ -1,6 +1,5 @@
 <!doctype html>
 <html class="is-loading" lang="en" data-page="grid">
-
 <head>
     <meta charset="utf-8">
     <title>Locomotive Boilerplate</title>