Replaced all colors with CSS vars

Added initial theme support and dark theme
Replaced Skeleton grid classes with basic CSS grid utilities
  Note: did not try to replicate the 12 column functionality

README.md

@@ -7,6 +7,7 @@ Building off of Skeleton's [awesomeness](https://github.com/dhg/Skeleton#why-its
 - Normalize.css added as a submodule to remain current
 - Updated to use CSS variables
 - Uses CSS Grid instead of 12-column grid system
+- Support for @media prefers-color-scheme (aka Dark Mode)
 - Pending Release: Uses CSS env() function
 - Possible: Add basic Nav boilerplate
 

css/skeleton.css

@@ -1,15 +1,16 @@
 /*
-* Skeleton V2.0.4
+* Barebones V3
-* Copyright 2014, Dave Gamache
+* Copyright 2019 Steve Cochran
-* www.getskeleton.com
+*
+* Based of Skeleton by Dave Gamache
+*
 * Free to use under the MIT license.
-* http://www.opensource.org/licenses/mit-license.php
-* 12/29/2014
 */
 
 
 /* Table of contents
 ––––––––––––––––––––––––––––––––––––––––––––––––––
+- Variables
 - Grid
 - Base Styles
 - Typography
@@ -25,107 +26,128 @@
 - Media Queries
 */
 
+/* Variables
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+:root {
+
+	/* default theme: light background, dark text, blue accent */
+	--theme-hue: 0;					/* white */
+	--accent-hue: 194;			/* blue */
+
+	--text-color-richer: hsl(var(--theme-hue), 0%, 5%);			/* #0d0d0d		*/
+	--text-color-normal: hsl(var(--theme-hue), 0%, 13%);		/* #222222 		text color; button:hover:focus color */
+	--text-color-softer: hsl(var(--theme-hue), 0%, 33%);		/* #555555 		button color; button:hover border */
+
+  --accent-color: hsl(var(--accent-hue), 86%, 57%);				/* #33C3F0 		link; button-primary bg+border; textarea,select:focus border */
+  --accent-color-hover: hsl(var(--accent-hue), 76%, 49%)	/* #1EAEDB 		link hover; button-primary:hover:focus bg+border */
+
+  --border-color: hsl(var(--theme-hue), 0%, 73%);					/* #bbbbbb		button border */
+	--border-color-softer: hsl(var(--theme-hue), 0%, 82%);	/* #d1d1d1		textarea,select,code,td,hr border	 */
+	
+	--background-color: initial;														/* transparent body background; textarea,select background */
+  --code-background: hsl(var(--theme-hue), 0%, 95%);			/* #f1f1f1 		code background*/
+
+	--button-primary-color: white;
+  
+	
+	/* Note: Skeleton was based off a 10px font sizing for REM  */
+	/* 62.5% of typical 16px browser default = 10px */
+	--base-font-size: 62.5%;
+	
+	/* Grid Defaults - default to match orig skeleton settings */
+	--grid-max-width: 960px;
+}
+
+/* theme support */
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+@media (prefers-color-scheme: dark) {
+	:root {
+		/* dark theme: light background, dark text, blue accent */
+		--theme-hue: 0;					/* black */
+		--accent-hue: 194;			/* blue */
+
+		--text-color-richer: hsl(var(--theme-hue), 0%, 95%);		/* 		*/
+		--text-color-normal: hsl(var(--theme-hue), 0%, 87%);		/* text color; button:hover:focus color */
+		--text-color-softer: hsl(var(--theme-hue), 0%, 67%);		/* button color; button:hover border */
+
+		--accent-color: hsl(var(--accent-hue), 86%, 57%);				/* link; button-primary bg+border; textarea,select:focus border */
+		--accent-color-hover: hsl(var(--accent-hue), 76%, 49%)	/* link hover; button-primary:hover:focus bg+border */
+
+		--border-color: hsl(var(--theme-hue), 0%, 27%);					/* button border */
+		--border-color-softer: hsl(var(--theme-hue), 0%, 18%);	/* textarea,select,code,td,hr border	 */
+	
+		--background-color: hsl(var(--theme-hue), 0%, 5%);			/* body background; textarea,select background */
+		--code-background: hsl(var(--theme-hue), 0%, 5%);				/* code background*/
+
+		--button-primary-color: white;
+  }
+	
+	/* TODO - test dialing back image intensity on dark background
+  img {
+    opacity: .80;
+    transition: opacity .5s ease-in-out;
+  }
+  img:hover {
+    opacity: 1;
+  }
+  */
+}
+
 
 /* Grid
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
-.container {
+/* CSS Grid depends much more on CSS than HTML, so there is less boilerplate
-  position: relative;
+	 than with skeleton. Only basic 1-4 column grids are included.
-  width: 100%;
+	 Any additional needs should be made using custom CSS directives */
-  max-width: 960px;
-  margin: 0 auto;
-  padding: 0 20px;
-  box-sizing: border-box; }
-.column,
-.columns {
-  width: 100%;
-  float: left;
-  box-sizing: border-box; }
 
-/* For devices larger than 400px */
+
-@media (min-width: 400px) {
+/* did not keep .container to prevent backwards compatibility problems */
-  .container {
+.grid-container {
-    width: 85%;
+	position: relative;
-    padding: 0; }
+	width: 100%;
+	max-width: var(--grid-max-width);
+	margin: 0 auto;
+	padding: 20px;
+	display: grid;
+	grid-gap: 20px;
+	gap: 20px;
+	
+	/* by default use min 200px wide columns auto-fit into width */
+	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 }
 
-/* For devices larger than 550px */
+/* basic grid defaults */
-@media (min-width: 550px) {
+.grid-container.quarters {
-  .container {
+	grid-template-columns: repeat(4, 1fr);
-    width: 80%; }
-  .column,
-  .columns {
-    margin-left: 4%; }
-  .column:first-child,
-  .columns:first-child {
-    margin-left: 0; }
-
-  .one.column,
-  .one.columns                    { width: 4.66666666667%; }
-  .two.columns                    { width: 13.3333333333%; }
-  .three.columns                  { width: 22%;            }
-  .four.columns                   { width: 30.6666666667%; }
-  .five.columns                   { width: 39.3333333333%; }
-  .six.columns                    { width: 48%;            }
-  .seven.columns                  { width: 56.6666666667%; }
-  .eight.columns                  { width: 65.3333333333%; }
-  .nine.columns                   { width: 74.0%;          }
-  .ten.columns                    { width: 82.6666666667%; }
-  .eleven.columns                 { width: 91.3333333333%; }
-  .twelve.columns                 { width: 100%; margin-left: 0; }
-
-  .one-third.column               { width: 30.6666666667%; }
-  .two-thirds.column              { width: 65.3333333333%; }
-
-  .one-half.column                { width: 48%; }
-
-  /* Offsets */
-  .offset-by-one.column,
-  .offset-by-one.columns          { margin-left: 8.66666666667%; }
-  .offset-by-two.column,
-  .offset-by-two.columns          { margin-left: 17.3333333333%; }
-  .offset-by-three.column,
-  .offset-by-three.columns        { margin-left: 26%;            }
-  .offset-by-four.column,
-  .offset-by-four.columns         { margin-left: 34.6666666667%; }
-  .offset-by-five.column,
-  .offset-by-five.columns         { margin-left: 43.3333333333%; }
-  .offset-by-six.column,
-  .offset-by-six.columns          { margin-left: 52%;            }
-  .offset-by-seven.column,
-  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
-  .offset-by-eight.column,
-  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
-  .offset-by-nine.column,
-  .offset-by-nine.columns         { margin-left: 78.0%;          }
-  .offset-by-ten.column,
-  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
-  .offset-by-eleven.column,
-  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }
-
-  .offset-by-one-third.column,
-  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
-  .offset-by-two-thirds.column,
-  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }
-
-  .offset-by-one-half.column,
-  .offset-by-one-half.columns     { margin-left: 52%; }
-
 }
+.grid-container.thirds {
+	grid-template-columns: repeat(3, 1fr);
+}
+.grid-container.halves {
+	grid-template-columns: repeat(2, 1fr);
+}
+.grid-container.full {
+	grid-template-columns: 1fr;
+}
+
+
+
+
 
 
 /* Base Styles
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
-/* NOTE
-html is set to 62.5% so that all the REM measurements throughout Skeleton
-are based on 10px sizing. So basically 1.5rem = 15px :) */
 html {
-  font-size: 62.5%; }
+  font-size: var(--base-font-size); 
+}
 body {
-  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
+  font-size: 1.5em;
   line-height: 1.6;
   font-weight: 400;
   font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  color: #222; }
+  color: var(--text-color-normal); 
+  background-color: var(--background-color);;
+}
 
 
 /* Typography
@@ -158,9 +180,9 @@ p {
 /* Links
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 a {
-  color: #1EAEDB; }
+  color: var(--accent-color); }
 a:hover {
-  color: #0FA0CE; }
+  color: var(--accent-color-hover); }
 
 
 /* Buttons
@@ -173,7 +195,7 @@ input[type="button"] {
   display: inline-block;
   height: 38px;
   padding: 0 30px;
-  color: #555;
+  color: var(--text-color-softer);
   text-align: center;
   font-size: 11px;
   font-weight: 600;
@@ -184,7 +206,7 @@ input[type="button"] {
   white-space: nowrap;
   background-color: transparent;
   border-radius: 4px;
-  border: 1px solid #bbb;
+  border: 1px solid var(--border-color);
   cursor: pointer;
   box-sizing: border-box; }
 .button:hover,
@@ -197,17 +219,17 @@ button:focus,
 input[type="submit"]:focus,
 input[type="reset"]:focus,
 input[type="button"]:focus {
-  color: #333;
+  color: var(--text-color-normal);
-  border-color: #888;
+  border-color: var(--text-color-softer);
   outline: 0; }
 .button.button-primary,
 button.button-primary,
 input[type="submit"].button-primary,
 input[type="reset"].button-primary,
 input[type="button"].button-primary {
-  color: #FFF;
+  color: var(--button-primary-color);
-  background-color: #33C3F0;
+  background-color: var(--accent-color);
-  border-color: #33C3F0; }
+  border-color: var(--accent-color); }
 .button.button-primary:hover,
 button.button-primary:hover,
 input[type="submit"].button-primary:hover,
@@ -218,9 +240,9 @@ button.button-primary:focus,
 input[type="submit"].button-primary:focus,
 input[type="reset"].button-primary:focus,
 input[type="button"].button-primary:focus {
-  color: #FFF;
+  color: var(--button-primary-color);
-  background-color: #1EAEDB;
+  background-color: var(--accent-color-hover);
-  border-color: #1EAEDB; }
+  border-color: var(--accent-color-hover); }
 
 
 /* Forms
@@ -236,8 +258,8 @@ textarea,
 select {
   height: 38px;
   padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
-  background-color: #fff;
+  background-color: var(--background-color);
-  border: 1px solid #D1D1D1;
+  border: 1px solid #var(--border-color-softer);
   border-radius: 4px;
   box-shadow: none;
   box-sizing: border-box; }
@@ -266,7 +288,7 @@ input[type="url"]:focus,
 input[type="password"]:focus,
 textarea:focus,
 select:focus {
-  border: 1px solid #33C3F0;
+  border: 1px solid ;
   outline: 0; }
 label,
 legend {
@@ -311,8 +333,8 @@ code {
   margin: 0 .2rem;
   font-size: 90%;
   white-space: nowrap;
-  background: #F1F1F1;
+  background: var(--code-background);
-  border: 1px solid #E1E1E1;
+  border: 1px solid var(--border-color-softer);
   border-radius: 4px; }
 pre > code {
   display: block;
@@ -326,7 +348,7 @@ th,
 td {
   padding: 12px 15px;
   text-align: left;
-  border-bottom: 1px solid #E1E1E1; }
+  border-bottom: 1px solid var(--border-color-softer); }
 th:first-child,
 td:first-child {
   padding-left: 0; }
@@ -377,7 +399,7 @@ hr {
   margin-top: 3rem;
   margin-bottom: 3.5rem;
   border-width: 0;
-  border-top: 1px solid #E1E1E1; }
+  border-top: 1px solid var(--border-color-softer); }
 
 
 /* Clearing