Merge pull request #12 from nphillips-dev/release/1.3.0

Release/1.3.0

README.md

@@ -12,6 +12,7 @@ Feel free to pull down, mangle and use to your hearts content but please, please
 * Buttons: https://fdossena.com/index.php?p=html5cool/buttons/i.frag
 * Colours: https://design-system.service.gov.uk/styles/colour/
 * Form / navbar: https://www.w3schools.com/howto/howto_css_responsive_form.asp
+* Ham nav: https://code-boxx.com/simple-responsive-pure-css-hamburger-menu/
 * Cards based on: https://materializecss.com/
 * List items: https://getbootstrap.com/
 * Ideas and inspiration from:
@@ -74,16 +75,47 @@ Lists are straight forward:
         </li>
     </ul>
 
+Tables adhere to K.I.S.S principles - you need a div wrapper with the `table-container` class
+N.B. put it on the row, the column or a new div if you like, doesn't seem to matter. 
+
+    <div class="row">
+        <div class="column-full table-container">
+            <table>
+                <tr>
+                  <th>First Name</th>
+                  <th>Last Name</th>
+                </tr>
+                <tr>
+                  <td>Spooky</td>
+                  <td>Bob</td>
+                </tr>
+              </table>
+        </div>
+    </div>
+
 ## Navigation
 
-At the time of writing, only a single navigation option has been added.
+The simplest of responsive nav, no collapsing, all menu
 
     <div class="w3-nav">
         <a href="#">Home</a>
         <a href="#">Stuff</a>
         <a class="active" href="#">Things</a>
     </div>
 
+Those of a more refined pallet might enjoy this little number
+
+    <nav id="hamnav">
+        <label for="hamburger">&#9776;</label>
+        <input type="checkbox" id="hamburger"/>
+
+        <div id="hamitems">
+            <a href="#">Home</a>
+            <a href="#">Stuff</a>
+            <a class="active" href="#">Things</a>
+        </div>
+    </nav>
+
 ## 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.
@@ -94,16 +126,28 @@ Utility provides some of those classes, for use as you see fit e.g.
 * 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">`
 
+* Text alignment
+  * center
+  * right
+  * left
+* borders
+  * shadow
+  * thin
+  * thick
+  * rounded
+  * curved
+  * circle
+
 ## 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;
+    --unholy-background: #333;
+    --unholy-font: #f2f2f2;
+    --unholy-main: #d4351c;
+    --unholy-secondary: #cf4530;
+    --unholy-border: rgba(212, 53, 28, 0.25);
     }
 
 The default theme is all black and red but all the unholy files use var() placeholders. Why?

core/unholy-variables.css

@@ -1,9 +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;
+   --unholy-background: #333;
+   --unholy-font: #f2f2f2;
+   --unholy-main: #d4351c;
+   --unholy-secondary: #cf4530;
+   --unholy-border: rgba(212, 53, 28, 0.25);
 }

unholy-core.css

@@ -239,9 +239,24 @@
      text-transform: uppercase;
 }
 
+ /*table*/
+ .table-container {overflow-x:auto;}
+ table {
+    border-collapse: collapse;
+    border-spacing: 0;
+    width: 100%;
+    border: 1px solid var(--unholy-border);
+  }
+
+  th, td {
+    text-align: left;
+    padding: 8px;
+  }
+
+  tr:nth-child(even){background-color: var(--unholy-secondary)}
+
 /*highlighting on the page*/
 ::selection {
     color: var(--unholy-font);
-   ;
     background: var(--unholy-main);
  }

unholy-navigation.css

@@ -30,3 +30,59 @@
    color: var(--unholy-font);
 }
 
+/* [ON BIG SCREEN] */
+/* Wrapper */
+#hamnav {
+   width: 100%;
+   background: var(--unholy-background);
+   /* Optional */
+   position: sticky;
+   top: 0;
+ }
+
+ /* Hide Hamburger */
+ #hamnav label, #hamburger { display: none; }
+
+ /* Horizontal Menu Items */
+ #hamitems { display: flex; }
+ #hamitems a {
+   width: 20%; /* 100% / 5 tabs = 20% */
+   padding: 10px;
+   color: var(--unholy-font);
+   text-decoration: none;
+   text-align: center;
+ }
+ #hamitems a:hover {
+   background: var(--unholy-secondary);
+ }
+
+ #hamitems a.active {
+   background-color: var(--unholy-main);
+   color: var(--unholy-font);
+ }
+
+ /* [ON SMALL SCREENS] */
+ @media screen and (max-width: 768px){
+   /* Show Hamburger Icon */
+   #hamnav label { 
+     display: inline-block; 
+     color: var(--unholy-font);
+     background: var(--unholy-main);
+     font-style: normal;
+     font-size: 1.2em;
+     padding: 10px;
+   }
+
+   /* Break down menu items into vertical */
+   #hamitems a {
+     box-sizing: border-box;
+     display: block;
+     width: 100%;
+     border-top: 1px solid var(--unholy-border);
+   }
+
+   /* Toggle Show/Hide Menu */
+   #hamitems { display: none; }
+   #hamnav input:checked ~ #hamitems { display: block; }
+ }
+

unholy-utility.css

@@ -4,7 +4,7 @@
 
  @import "core/unholy-variables.css";
 
- /*Text alignmnet*/
+ /*Text alignment*/
  .center {
     text-align: center;
  }
@@ -30,6 +30,22 @@
    box-shadow: 0 8px 16px 0 var(--unholy-main);
 }
 
+.thin {
+   border: 1px solid var(--unholy-border);
+}
+
+.thick {
+   border: 3px solid var(--unholy-border);
+}
+
 .rounded {
-   border-radius: 0.25rem;
-}
+   border-radius: 0.50rem;
+}
+
+.curved {
+   border-radius: 5%;
+}
+
+.circle {
+   border-radius: 50%;
+ }