From 060a29dbf0ca12b99ff51addbae89fae902a5be2 Mon Sep 17 00:00:00 2001
From: Tim McGinley <timwasnever@gmail.com>
Date: Mon, 26 Aug 2024 13:05:07 +0200
Subject: [PATCH] Create BoilerPlate

---
 _layouts/BoilerPlate | 206 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 206 insertions(+)
 create mode 100644 _layouts/BoilerPlate
diff --git a/_layouts/BoilerPlate b/_layouts/BoilerPlate
new file mode 100644
index 0000000..aa5eece
--- /dev/null
+++ b/_layouts/BoilerPlate
@@ -0,0 +1,206 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>Matt's CSS Boilerplate</title>
+  <meta name="description" content="A simple, modern CSS boilerplate">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <!--
+  <link rel="stylesheet" href="src/_01-tokens.css">
+  <link rel="stylesheet" href="src/_02-reset.css">
+  <link rel="stylesheet" href="src/_03-core.css">
+  <link rel="stylesheet" href="src/_04-forms.css">
+  <link rel="stylesheet" href="src/_05-layout.css">
+  <link rel="stylesheet" href="src/_06-animation.css">
+  <link rel="stylesheet" href="src/_07-components.css">
+  <link rel="stylesheet" href="src/_08-utilities.css">
+  -->
+  <link rel="stylesheet" href="index.css">
+</head>
+
+<style>
+  .local_top-header,
+  .local_footer {
+    background-color: var(--color_text--default);
+    color: var(--color_background--surface);
+    padding: var(--space_gutter);
+    text-align: center;
+  }
+
+  .local_hero {
+    background-color: var(--color_text--subtle);
+    color: white;
+  }
+
+  .local_element {
+    background-color: var(--color_background--element);
+  }
+
+  .local_chip {
+    background-color: var(--color_background--chip);
+  }
+
+  .local_accent {
+    background-color: var(--color_text--link);
+  }
+
+  .local_accent-alt {
+    background-color: var(--color_text--link-alt);
+  }
+
+  .local_divider {
+    border-bottom: 5px dotted var(--color_text--default);
+  }
+</style>
+
+<body>
+  <div>
+    <div class="layout--flow">
+      <div class="page local_section">
+        <header class="page__header">
+          <div class="container--wide local_hero">
+            <h2>Sidebar page with Containers</h2>
+          </div>
+        </header>
+        <div class="page__content layout--flow">
+          <div class="container local_element">
+            <p>Container</p>
+            <div class="container local_chip">
+              <p>Container > Container</p>
+            </div>
+            <div class="container--wide local_accent">
+              <p>Container > Container wide</p>
+            </div>
+            <div class="container--full local_accent-alt">
+              Container > Container full
+            </div>
+          </div>
+          <div class="container--wide local_element">
+            <p>Container Wide</p>
+            <div class="container local_chip">
+              <p>Container wide > container</p>
+            </div>
+            <div class="container--wide local_accent">
+              <p>Container wide > container wide</p>
+            </div>
+            <div class="container--full local_accent-alt">
+              <p>Container wide > container full</p>
+            </div>
+          </div>
+          <div class="container--full local_element">
+            <p>Container full</p>
+            <div class="container local_chip">
+              <p>Container full > container</p>
+            </div>
+            <div class="container--wide local_accent">
+              <p>Container full > container wide</p>
+            </div>
+            <div class="container--full local_accent-alt">
+              <p>Container full > container full</p>
+            </div>
+          </div>
+        </div>
+        <aside class="page__sidebar local_element">
+          <div class="container local_chip">
+            <p>This is the sidebar</p>
+          </div>
+        </aside>
+      </div>
+
+      <hr class="local_divider">
+
+      <div class="page local_section section">
+        <header class="page__header local_hero">
+          <div class="container--wide">
+            <h2>Standard page with containers</h2>
+          </div>
+        </header>
+        <div class="page__content layout--flow">
+          <div class="container local_element">
+            <p>Container</p>
+            <div class="container local_chip">
+              <p>Container > Container</p>
+            </div>
+            <div class="container--wide local_accent">
+              <p>Container > Container wide</p>
+            </div>
+            <div class="container--full local_accent-alt">
+              Container > Container full
+            </div>
+          </div>
+          <div class="container--wide local_element">
+            <p>Container Wide</p>
+            <div class="container local_chip">
+              <p>Container wide > container</p>
+            </div>
+            <div class="container--wide local_accent">
+              <p>Container wide > container wide</p>
+            </div>
+            <div class="container--full local_accent-alt">
+              <p>Container wide > container full</p>
+            </div>
+          </div>
+          <div class="container--full local_element">
+            <p>Container full</p>
+            <div class="container local_chip">
+              <p>Container full > container</p>
+            </div>
+            <div class="container--wide local_accent">
+              <p>Container full > container wide</p>
+            </div>
+            <div class="container--full local_accent-alt">
+              <p>Container full > container full</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <hr class="local_divider">
+
+      <div class="container--wide local_hero section">
+        <h2>Containers</h2>
+      </div>
+
+      <div class="container local_element">
+        <p>Container</p>
+        <div class="container local_chip">
+          <p>Container > Container</p>
+        </div>
+        <div class="container--wide local_accent">
+          <p>Container > Container wide</p>
+        </div>
+        <div class="container--full local_accent-alt">
+          Container > Container full
+        </div>
+      </div>
+      <div class="container--wide local_element">
+        <p>Container Wide</p>
+        <div class="container local_chip">
+          <p>Container wide > container</p>
+        </div>
+        <div class="container--wide local_accent">
+          <p>Container wide > container wide</p>
+        </div>
+        <div class="container--full local_accent-alt">
+          <p>Container wide > container full</p>
+        </div>
+      </div>
+      <div class="container--full local_element">
+        <p>Container full</p>
+        <div class="container local_chip">
+          <p>Container full > container</p>
+        </div>
+        <div class="container--wide local_accent">
+          <p>Container full > container wide</p>
+        </div>
+        <div class="container--full local_accent-alt">
+          <p>Container full > container full</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+
+</html>
