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.
+
+
+
+
+
+
+
+ Ooo look a squirrel
+
+
+
+
+
+
+
![]()
+
+ -
+ Help! I'm trapped in a list.
+
+
+
+## Navigation
+
+At the time of writing, only a single navigation option has been added.
+
+
+
+## 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! ``
+* Oh no! My lists are left aligned! `
`
+* Oh no! My lists are left aligned **AND** not curvey enough: ``
+
+## 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
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/core.css b/unholy-core.css
similarity index 74%
rename from core.css
rename to unholy-core.css
index b76b9d5..92f259a 100644
--- a/core.css
+++ b/unholy-core.css
@@ -1,284 +1,247 @@
-@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;
+ }
+}
+
+@import "core/unholy-variables.css";
+
+ 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);
+ padding-left: 1em;
+ padding-right: 1em;
+}
+
+ .card-header {
+ position: relative;
+ margin: 0.5rem 0 1rem 0;
+ background-color: var(--unholy-background);
+ color:var(--unholy-font);
+}
+ .card-action {
+ text-transform: uppercase;
+}
+
+/*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
new file mode 100644
index 0000000..2ec555b
--- /dev/null
+++ b/unholy-utility.css
@@ -0,0 +1,35 @@
+/*These CSS classes provide extensions to the core e.g.
+ *alignment,borders and anything else which isn't core
+ */
+
+ @import "core/unholy-variables.css";
+
+ /*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);
+}
+
+.rounded {
+ border-radius: 0.25rem;
+}
\ No newline at end of file