From 6de32543be2ab9f8db5616d00e6f53f12f77b290 Mon Sep 17 00:00:00 2001
From: nphillips-dev <nphillips.developer@gmail.com>
Date: Tue, 13 Oct 2020 17:32:28 +0100
Subject: [PATCH 1/3] rename files and create utility file to extend core

---
 core.css => unholy-core.css | 568 ++++++++++++++++++------------------
 unholy-utility.css          |  38 +++
 2 files changed, 322 insertions(+), 284 deletions(-)
 rename core.css => unholy-core.css (95%)
 create mode 100644 unholy-utility.css

diff --git a/core.css b/unholy-core.css
similarity index 95%
rename from core.css
rename to unholy-core.css
index b76b9d5..62be731 100644
--- a/core.css
+++ b/unholy-core.css
@@ -1,284 +1,284 @@
-@import url('https://rsms.me/inter/inter.css');
- html {
-     font-family: 'Inter', sans-serif;
-}
- @supports (font-variation-settings: normal) {
-     html {
-         font-family: 'Inter var', sans-serif;
-    }
-}
-/*variables*/
- :root {
-     --unholy-background: #333 !important;
-     --unholy-font: #f2f2f2 !important;
-     --unholy-main: #d4351c !important;
-     --unholy-secondary: #cf4530 !important;
-     --unholy-border: rgba(212, 53, 28, 0.25) !important;
-}
- body {
-     background-color: var(--unholy-background);
-     color: var(--unholy-font);
-}
- .container {
-     width: 100%;
-     padding-right: 15px;
-     padding-left: 15px;
-     margin-right: auto;
-     margin-left: auto;
-}
- .row {
-     display: -ms-flexbox;
-     display: flex;
-     -ms-flex-wrap: wrap;
-     flex-wrap: wrap;
-     margin-right: -15px;
-     margin-left: -15px;
-}
- .column-single {
-     width: 4.66666666667%;
-}
- .column-quarter {
-     width: 22%;
-}
- .column-third {
-     width: 30.6666666667%;
-}
- .column-half {
-     width: 48%;
-}
- .column-threeQuarters {
-     width: 74.0%;
-}
- .column-full {
-     width: 100%;
-     margin-left: 0;
-}
- @media screen and (min-width : 320px) {
-     .container {
-         width: 90%;
-    }
-}
- @media screen and (min-width: 680px) {
-     .container {
-         width: 85%;
-    }
-}
- @media screen and (min-width : 1024px) {
-     .container {
-         width: 80%;
-    }
-}
-/* unvisited link */
- a:link {
-     color: var(--unholy-main);
-}
-/* visited link */
- a:visited {
-     color: var(--unholy-font);
-}
-/* mouse over link */
- a:hover {
-     color: var(--unholy-secondary);
-}
-/* selected link */
- a:active {
-     color: var(--unholy-secondary);
-}
- a.button{
-     display:inline-block;
-     padding:0.3em 1.2em;
-     margin:0 0.3em 0.3em 0;
-     border-radius:2em;
-     box-sizing: border-box;
-     text-decoration:none;
-     font-family:'Roboto',sans-serif;
-     font-weight:300;
-     color:var(--unholy-font);
-     background-color: var(--unholy-main);
-     text-align:center;
-     transition: all 0.2s;
-}
- a.button:hover{
-     background-color: var(--unholy-secondary);
-}
- @media all and (max-width:30em) {
-     a.button {
-         display:block;
-         margin:0.2em auto;
-    }
-}
-/*Forms*/
-/* Style inputs, select elements and textareas */
- input[type=text], select, textarea{
-     width: 100%;
-     padding: 12px;
-     border: 1px solid #ccc;
-     border-radius: 4px;
-     box-sizing: border-box;
-     resize: vertical;
-}
- option:checked {
-     box-shadow: 0 0 10px 100px var(--unholy-main) inset;
-}
-/* Style the label to display next to the inputs */
- label {
-     padding: 12px 12px 12px 0;
-     display: inline-block;
-}
-/* Style the submit button */
- input[type=submit] {
-     background-color: var(--unholy-main);
-     color: var(--unholy-font);
-     padding: 12px 20px;
-     border: none;
-     border-radius: 4px;
-     cursor: pointer;
-     float: right;
-}
-/* Floating column for labels: 25% width */
- .col-25 {
-     float: left;
-     width: 25%;
-     margin-top: 6px;
-}
-/* Floating column for inputs: 75% width */
- .col-75 {
-     float: left;
-     width: 75%;
-     margin-top: 6px;
-}
-/* Clear floats after the columns */
- .row:after {
-     content: "";
-     display: table;
-     clear: both;
-}
-/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
- @media screen and (max-width: 600px) {
-     .col-25, .col-75, input[type=submit] {
-         width: 100%;
-         margin-top: 0;
-    }
-}
-/*List*/
- .list {
-     display: -ms-flexbox;
-     display: flex;
-     -ms-flex-direction: column;
-     flex-direction: column;
-     padding-left: 0;
-     margin-bottom: 0;
-     margin-right: 0;
-}
- .list-item {
-     color: var(--unholy-font);
-     text-align: inherit;
-}
- @media screen and (min-width : 320px) {
-     .list-item {
-         margin-right: 10%;
-    }
-}
- @media screen and (min-width: 680px) {
-     .container {
-         margin-right: 5%;
-    }
-}
- .list--item-action:hover, .list-group-item-action:focus {
-     z-index: 1;
-     color: var(--unholy-font);
-     text-decoration: none;
-     background-color: var(--unholy-background);
-}
- .list-item-action:active {
-     color: var(--unholy-font);
-     background-color: var(--unholy-background);
-}
- .list-item {
-     position: relative;
-     display: block;
-     padding: 0.75rem 1.25rem;
-     margin-bottom: -1px;
-     background-color: var(--unholy-background);
-     border: 1px solid var(--unholy-border);
-}
- .list-item:first-child {
-     border-top-left-radius: 0.25rem;
-     border-top-right-radius: 0.25rem;
-}
- .list-item:last-child {
-     margin-bottom: 0;
-     border-bottom-right-radius: 0.25rem;
-     border-bottom-left-radius: 0.25rem;
-}
-/*Images*/
- .wrapper {
-     position: relative;
-     padding-top: 56.25%;
-    /* 16:9 Aspect Ratio */
-}
- img {
-     position: absolute;
-     left: 0;
-     top: 0;
-     width: 100%;
-     height: auto;
-}
-/*Cards*/
- .card {
-     position: relative;
-     margin: 1rem 1rem 1rem 0;
-     background-color: var(--unholy-background);
-     color:var(--unholy-font);
-     -webkit-transition: -webkit-box-shadow .25s;
-     transition: -webkit-box-shadow .25s;
-     transition: box-shadow .25s;
-     transition: box-shadow .25s, -webkit-box-shadow .25s;
-     box-shadow: 0 4px 8px 0 var(--unholy-main);
-     transition: 0.3s;
-     padding-left: 1em;
-     padding-right: 1em;
-}
- .card:hover {
-     box-shadow: 0 8px 16px 0 var(--unholy-main);
-}
- .card-header {
-     position: relative;
-     margin: 0.5rem 0 1rem 0;
-     background-color: var(--unholy-background);
-     color:var(--unholy-font);
-}
- .card-action {
-     text-transform: uppercase;
-}
-/*Navigation - this will not form part of the core but lets do it for now*/
-/* Add a black background color to the top navigation */
- .nav {
-     background-color: var(--unholy-background);
-     overflow: hidden;
-}
-/* Style the links inside the navigation bar */
- .nav a {
-     float: left;
-     color: var(--unholy-font);
-     text-align: center;
-     padding: 14px 16px;
-     text-decoration: none;
-     font-size: 17px;
-}
-/* Change the color of links on hover */
- .nav a:hover {
-     background-color: var(--unholy-secondary);
-     color: black;
-}
-/* Add a color to the active/current link */
- .nav a.active {
-     background-color: var(--unholy-main);
-     color: var(--unholy-font);
-}
-/*this isn't core its for highlighting on the page*/
- ::selection {
-     color: var(--unholy-font);
-    ;
-     background: var(--unholy-main);
-}
+@import url('https://rsms.me/inter/inter.css');
+ html {
+     font-family: 'Inter', sans-serif;
+}
+ @supports (font-variation-settings: normal) {
+     html {
+         font-family: 'Inter var', sans-serif;
+    }
+}
+/*variables*/
+ :root {
+     --unholy-background: #333 !important;
+     --unholy-font: #f2f2f2 !important;
+     --unholy-main: #d4351c !important;
+     --unholy-secondary: #cf4530 !important;
+     --unholy-border: rgba(212, 53, 28, 0.25) !important;
+}
+ body {
+     background-color: var(--unholy-background);
+     color: var(--unholy-font);
+}
+ .container {
+     width: 100%;
+     padding-right: 15px;
+     padding-left: 15px;
+     margin-right: auto;
+     margin-left: auto;
+}
+ .row {
+     display: -ms-flexbox;
+     display: flex;
+     -ms-flex-wrap: wrap;
+     flex-wrap: wrap;
+     margin-right: -15px;
+     margin-left: -15px;
+}
+ .column-single {
+     width: 4.66666666667%;
+}
+ .column-quarter {
+     width: 22%;
+}
+ .column-third {
+     width: 30.6666666667%;
+}
+ .column-half {
+     width: 48%;
+}
+ .column-threeQuarters {
+     width: 74.0%;
+}
+ .column-full {
+     width: 100%;
+     margin-left: 0;
+}
+ @media screen and (min-width : 320px) {
+     .container {
+         width: 90%;
+    }
+}
+ @media screen and (min-width: 680px) {
+     .container {
+         width: 85%;
+    }
+}
+ @media screen and (min-width : 1024px) {
+     .container {
+         width: 80%;
+    }
+}
+/* unvisited link */
+ a:link {
+     color: var(--unholy-main);
+}
+/* visited link */
+ a:visited {
+     color: var(--unholy-font);
+}
+/* mouse over link */
+ a:hover {
+     color: var(--unholy-secondary);
+}
+/* selected link */
+ a:active {
+     color: var(--unholy-secondary);
+}
+ a.button{
+     display:inline-block;
+     padding:0.3em 1.2em;
+     margin:0 0.3em 0.3em 0;
+     border-radius:2em;
+     box-sizing: border-box;
+     text-decoration:none;
+     font-family:'Roboto',sans-serif;
+     font-weight:300;
+     color:var(--unholy-font);
+     background-color: var(--unholy-main);
+     text-align:center;
+     transition: all 0.2s;
+}
+ a.button:hover{
+     background-color: var(--unholy-secondary);
+}
+ @media all and (max-width:30em) {
+     a.button {
+         display:block;
+         margin:0.2em auto;
+    }
+}
+/*Forms*/
+/* Style inputs, select elements and textareas */
+ input[type=text], select, textarea{
+     width: 100%;
+     padding: 12px;
+     border: 1px solid #ccc;
+     border-radius: 4px;
+     box-sizing: border-box;
+     resize: vertical;
+}
+ option:checked {
+     box-shadow: 0 0 10px 100px var(--unholy-main) inset;
+}
+/* Style the label to display next to the inputs */
+ label {
+     padding: 12px 12px 12px 0;
+     display: inline-block;
+}
+/* Style the submit button */
+ input[type=submit] {
+     background-color: var(--unholy-main);
+     color: var(--unholy-font);
+     padding: 12px 20px;
+     border: none;
+     border-radius: 4px;
+     cursor: pointer;
+     float: right;
+}
+/* Floating column for labels: 25% width */
+ .col-25 {
+     float: left;
+     width: 25%;
+     margin-top: 6px;
+}
+/* Floating column for inputs: 75% width */
+ .col-75 {
+     float: left;
+     width: 75%;
+     margin-top: 6px;
+}
+/* Clear floats after the columns */
+ .row:after {
+     content: "";
+     display: table;
+     clear: both;
+}
+/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
+ @media screen and (max-width: 600px) {
+     .col-25, .col-75, input[type=submit] {
+         width: 100%;
+         margin-top: 0;
+    }
+}
+/*List*/
+ .list {
+     display: -ms-flexbox;
+     display: flex;
+     -ms-flex-direction: column;
+     flex-direction: column;
+     padding-left: 0;
+     margin-bottom: 0;
+     margin-right: 0;
+}
+ .list-item {
+     color: var(--unholy-font);
+     text-align: inherit;
+}
+ @media screen and (min-width : 320px) {
+     .list-item {
+         margin-right: 10%;
+    }
+}
+ @media screen and (min-width: 680px) {
+     .container {
+         margin-right: 5%;
+    }
+}
+ .list--item-action:hover, .list-group-item-action:focus {
+     z-index: 1;
+     color: var(--unholy-font);
+     text-decoration: none;
+     background-color: var(--unholy-background);
+}
+ .list-item-action:active {
+     color: var(--unholy-font);
+     background-color: var(--unholy-background);
+}
+ .list-item {
+     position: relative;
+     display: block;
+     padding: 0.75rem 1.25rem;
+     margin-bottom: -1px;
+     background-color: var(--unholy-background);
+     border: 1px solid var(--unholy-border);
+}
+ .list-item:first-child {
+     border-top-left-radius: 0.25rem;
+     border-top-right-radius: 0.25rem;
+}
+ .list-item:last-child {
+     margin-bottom: 0;
+     border-bottom-right-radius: 0.25rem;
+     border-bottom-left-radius: 0.25rem;
+}
+/*Images*/
+ .wrapper {
+     position: relative;
+     padding-top: 56.25%;
+    /* 16:9 Aspect Ratio */
+}
+ img {
+     position: absolute;
+     left: 0;
+     top: 0;
+     width: 100%;
+     height: auto;
+}
+/*Cards*/
+ .card {
+     position: relative;
+     margin: 1rem 1rem 1rem 0;
+     background-color: var(--unholy-background);
+     color:var(--unholy-font);
+     -webkit-transition: -webkit-box-shadow .25s;
+     transition: -webkit-box-shadow .25s;
+     transition: box-shadow .25s;
+     transition: box-shadow .25s, -webkit-box-shadow .25s;
+     box-shadow: 0 4px 8px 0 var(--unholy-main);
+     transition: 0.3s;
+     padding-left: 1em;
+     padding-right: 1em;
+}
+ .card:hover {
+     box-shadow: 0 8px 16px 0 var(--unholy-main);
+}
+ .card-header {
+     position: relative;
+     margin: 0.5rem 0 1rem 0;
+     background-color: var(--unholy-background);
+     color:var(--unholy-font);
+}
+ .card-action {
+     text-transform: uppercase;
+}
+/*Navigation - this will not form part of the core but lets do it for now*/
+/* Add a black background color to the top navigation */
+ .nav {
+     background-color: var(--unholy-background);
+     overflow: hidden;
+}
+/* Style the links inside the navigation bar */
+ .nav a {
+     float: left;
+     color: var(--unholy-font);
+     text-align: center;
+     padding: 14px 16px;
+     text-decoration: none;
+     font-size: 17px;
+}
+/* Change the color of links on hover */
+ .nav a:hover {
+     background-color: var(--unholy-secondary);
+     color: black;
+}
+/* Add a color to the active/current link */
+ .nav a.active {
+     background-color: var(--unholy-main);
+     color: var(--unholy-font);
+}
+/*this isn't core its for highlighting on the page*/
+ ::selection {
+     color: var(--unholy-font);
+    ;
+     background: var(--unholy-main);
+}
diff --git a/unholy-utility.css b/unholy-utility.css
new file mode 100644
index 0000000..1806f61
--- /dev/null
+++ b/unholy-utility.css
@@ -0,0 +1,38 @@
+/*The CSS classes provide extensions to the core e.g.
+ *alignment,borders and anything else which isn't core
+ */
+
+/*variables*/
+:root {
+   --unholy-background: #333 !important;
+   --unholy-font: #f2f2f2 !important;
+   --unholy-main: #d4351c !important;
+   --unholy-secondary: #cf4530 !important;
+   --unholy-border: rgba(212, 53, 28, 0.25) !important;
+}
+
+ /*Text alignmnet*/
+ .center {
+    text-align: center;
+ }
+
+ .right {
+    text-align: right;
+ }
+
+ .left{
+    text-align: left;
+ }
+
+ /*borders*/
+.shadow {
+   -webkit-transition: -webkit-box-shadow .25s;
+   transition: -webkit-box-shadow .25s;
+   transition: box-shadow .25s;
+   transition: box-shadow .25s, -webkit-box-shadow .25s;
+   box-shadow: 0 4px 8px 0 var(--unholy-main);
+   transition: 0.3s;
+}
+.shadow:hover {
+   box-shadow: 0 8px 16px 0 var(--unholy-main);
+}
\ No newline at end of file

From 7dd99317aedaf1ee1e8c47b8518a1dbdae450bc2 Mon Sep 17 00:00:00 2001
From: nphillips-dev <nphillips.developer@gmail.com>
Date: Tue, 13 Oct 2020 18:07:49 +0100
Subject: [PATCH 2/3] added navigation file and moved variables out into
 seperate file

---
 core/unholy-variables.css |  9 ++++++
 unholy-core.css           | 59 ++++++++-------------------------------
 unholy-navigation.css     | 32 +++++++++++++++++++++
 unholy-utility.css        | 15 ++++------
 4 files changed, 58 insertions(+), 57 deletions(-)
 create mode 100644 core/unholy-variables.css
 create mode 100644 unholy-navigation.css

diff --git a/core/unholy-variables.css b/core/unholy-variables.css
new file mode 100644
index 0000000..4dc3c83
--- /dev/null
+++ b/core/unholy-variables.css
@@ -0,0 +1,9 @@
+/*Variables in this file will be used across any extension files pulled in*/
+
+:root {
+   --unholy-background: #333 !important;
+   --unholy-font: #f2f2f2 !important;
+   --unholy-main: #d4351c !important;
+   --unholy-secondary: #cf4530 !important;
+   --unholy-border: rgba(212, 53, 28, 0.25) !important;
+}
diff --git a/unholy-core.css b/unholy-core.css
index 62be731..92f259a 100644
--- a/unholy-core.css
+++ b/unholy-core.css
@@ -7,14 +7,9 @@
          font-family: 'Inter var', sans-serif;
     }
 }
-/*variables*/
- :root {
-     --unholy-background: #333 !important;
-     --unholy-font: #f2f2f2 !important;
-     --unholy-main: #d4351c !important;
-     --unholy-secondary: #cf4530 !important;
-     --unholy-border: rgba(212, 53, 28, 0.25) !important;
-}
+
+@import "core/unholy-variables.css";
+
  body {
      background-color: var(--unholy-background);
      color: var(--unholy-font);
@@ -230,18 +225,10 @@
      margin: 1rem 1rem 1rem 0;
      background-color: var(--unholy-background);
      color:var(--unholy-font);
-     -webkit-transition: -webkit-box-shadow .25s;
-     transition: -webkit-box-shadow .25s;
-     transition: box-shadow .25s;
-     transition: box-shadow .25s, -webkit-box-shadow .25s;
-     box-shadow: 0 4px 8px 0 var(--unholy-main);
-     transition: 0.3s;
      padding-left: 1em;
      padding-right: 1em;
 }
- .card:hover {
-     box-shadow: 0 8px 16px 0 var(--unholy-main);
-}
+
  .card-header {
      position: relative;
      margin: 0.5rem 0 1rem 0;
@@ -251,34 +238,10 @@
  .card-action {
      text-transform: uppercase;
 }
-/*Navigation - this will not form part of the core but lets do it for now*/
-/* Add a black background color to the top navigation */
- .nav {
-     background-color: var(--unholy-background);
-     overflow: hidden;
-}
-/* Style the links inside the navigation bar */
- .nav a {
-     float: left;
-     color: var(--unholy-font);
-     text-align: center;
-     padding: 14px 16px;
-     text-decoration: none;
-     font-size: 17px;
-}
-/* Change the color of links on hover */
- .nav a:hover {
-     background-color: var(--unholy-secondary);
-     color: black;
-}
-/* Add a color to the active/current link */
- .nav a.active {
-     background-color: var(--unholy-main);
-     color: var(--unholy-font);
-}
-/*this isn't core its for highlighting on the page*/
- ::selection {
-     color: var(--unholy-font);
-    ;
-     background: var(--unholy-main);
-}
+
+/*highlighting on the page*/
+::selection {
+    color: var(--unholy-font);
+   ;
+    background: var(--unholy-main);
+ }
\ No newline at end of file
diff --git a/unholy-navigation.css b/unholy-navigation.css
new file mode 100644
index 0000000..471fe29
--- /dev/null
+++ b/unholy-navigation.css
@@ -0,0 +1,32 @@
+/*Nav bars are cool and funbut not part of the core
+ *This file will collect different navbars and side panels - for selective use.
+ *This will keep the core size down
+ */
+
+ @import "core/unholy-variables.css";
+
+/*W3Schools navigation*/
+.w3-nav {
+   background-color: var(--unholy-background);
+   overflow: hidden;
+}
+/* Style the links inside the navigation bar */
+.w3-nav a {
+   float: left;
+   color: var(--unholy-font);
+   text-align: center;
+   padding: 14px 16px;
+   text-decoration: none;
+   font-size: 17px;
+}
+/* Change the color of links on hover */
+.w3-nav a:hover {
+   background-color: var(--unholy-secondary);
+   color: black;
+}
+/* Add a color to the active/current link */
+.w3-nav a.active {
+   background-color: var(--unholy-main);
+   color: var(--unholy-font);
+}
+
diff --git a/unholy-utility.css b/unholy-utility.css
index 1806f61..2ec555b 100644
--- a/unholy-utility.css
+++ b/unholy-utility.css
@@ -1,15 +1,8 @@
-/*The CSS classes provide extensions to the core e.g.
+/*These CSS classes provide extensions to the core e.g.
  *alignment,borders and anything else which isn't core
  */
 
-/*variables*/
-:root {
-   --unholy-background: #333 !important;
-   --unholy-font: #f2f2f2 !important;
-   --unholy-main: #d4351c !important;
-   --unholy-secondary: #cf4530 !important;
-   --unholy-border: rgba(212, 53, 28, 0.25) !important;
-}
+ @import "core/unholy-variables.css";
 
  /*Text alignmnet*/
  .center {
@@ -35,4 +28,8 @@
 }
 .shadow:hover {
    box-shadow: 0 8px 16px 0 var(--unholy-main);
+}
+
+.rounded {
+   border-radius: 0.25rem;
 }
\ No newline at end of file

From 83a2c8df0b3ca5b164ff27b5b80491be5e9d4825 Mon Sep 17 00:00:00 2001
From: nphillips-dev <nphillips.developer@gmail.com>
Date: Tue, 13 Oct 2020 18:47:06 +0100
Subject: [PATCH 3/3] updated readme

---
 README.md | 93 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 93 insertions(+)

diff --git a/README.md b/README.md
index 710a78e..40677b1 100644
--- a/README.md
+++ b/README.md
@@ -19,3 +19,96 @@ Feel free to pull down, mangle and use to your hearts content but please, please
 * http://getskeleton.com/
 
 N.B. People of the links, if I angered you by involving your code in this nightmare then ping me and I'll cut it out! 
+
+## Installation
+
+Pull down a copy of the project, or see the latest release files, you will see the following files:
+* unholy-core : required file, you must reference this stylesheet to access the responsive html elements
+* core/unholy-variable : required folder and file. You **do not** need to reference this but all unholy files use these variable.
+                         Editing this file provides site wide restyling to all colours.
+* unholy-utility : optional file providing css extention methods e.g. borders, alignment - class can be stacked.
+* unholy-navigation : optional file containing different navbars
+
+## Core
+
+The following structure will provide a contain, with a row and a full width column, which contains a single card.
+
+    <div class="container">
+        <div class="row">
+            <div class="column-full">
+                <div class="card">
+                    <div class="card-header">
+                        Card Header
+                    </div>
+                    <div class="card-content">
+                        Ooo look a squirrel
+                    </div>
+                    <div class="card-action">
+                        <a href="#" target="_blank" rel="noopener noreferrer">Click Me!</a>
+                    </div>
+                </div>
+            </div>
+        </div>  
+    </div>
+
+Available columns are:
+
+* .column-single
+* .column-quarter 
+* .column-third 
+* .column-half 
+* .column-threeQuarters 
+* .column-full 
+
+Images would be structured as follows:
+
+        <div class="wrapper">
+            <img card-img-bottom" src="" alt="">
+        </div>
+
+Lists are straight forward:
+    
+    <ul class="list">
+        <li class="list-item">
+            Help! I'm trapped in a list.
+        </li>
+    </ul>
+
+## Navigation
+
+At the time of writing, only a single navigation option has been added.
+
+    <div class="w3-nav">
+        <a href="#">Home</a>
+        <a href="#">Stuff</a>
+        <a class="active" href="#">Things</a>
+    </div>
+
+## Utility
+
+No single site will ever be soley satisfied by a CSS boilerplate, you'll likely create a custom.css file and it'll fill up with the same classes, over and over again.
+
+Utility provides some of those classes, for use as you see fit e.g.
+
+* Oh no! My cards are so boring! `<div class="card shadow">`
+* Oh no! My lists are left aligned! `<li class="list-item centered">`
+* Oh no! My lists are left aligned **AND** not curvey enough: `<li class="list-item centered rounded">`
+
+## Variables
+
+The top of each unholy file imports the variables file:
+
+    :root {
+    --unholy-background: #333 !important;
+    --unholy-font: #f2f2f2 !important;
+    --unholy-main: #d4351c !important;
+    --unholy-secondary: #cf4530 !important;
+    --unholy-border: rgba(212, 53, 28, 0.25) !important;
+    }
+
+The default theme is all black and red but all the unholy files use var() placeholders. Why?
+Because now you've only got to change those variable colours and the whole of your site restyles.
+
+## Pros / Cons
+
+The idea here is you can build a quick and dirty site. It works on the idea that your main theme colour is going to be used in multiple places and for different jobs, which might be restrictive to some really flashy front end humans but for those with the style sense of a fish i.e. me, this is a nice quick way to style a site.
\ No newline at end of file