Converted to use:

- CSS Grid
- CSS Variables
Added skeleton-legacy.css to provide feature/class equiv to orig boilerplate

css/barebones.css

@@ -7,9 +7,9 @@
 * Free to use under the MIT license.
 */
 
-
 /* Table of contents
 ––––––––––––––––––––––––––––––––––––––––––––––––––
+- Media Breakpoints
 - Variables
 - Grid
 - Base Styles
@@ -26,7 +26,19 @@
 - Media Queries
 */
 
-/* Variables
+/* ENV Variables
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+/* Media breakpoint variables for use in media queries
+* 	Note: this section is currently commented out pending release of 
+* 	final CSS env() spec
+*  Breakpoints based on 
+*	 https://medium.freecodecamp.org/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862
+* 
+*/
+
+
+
+/* CSS Variables
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 :root {
 
@@ -39,12 +51,13 @@
 	--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 */
+  --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 */
+	--background-color-softer: hsl(var(--theme-hue), 0%, 95%);
   --code-background: hsl(var(--theme-hue), 0%, 95%);			/* #f1f1f1 		code background*/
 
 	--button-primary-color: white;
@@ -58,7 +71,7 @@
 	--grid-max-width: 960px;
 }
 
-/* theme support */
+/* theme support
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 @media (prefers-color-scheme: dark) {
 	:root {
@@ -67,21 +80,25 @@
 		--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-normal: hsl(var(--theme-hue), 0%, 80%);		/* 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: hsl(var(--accent-hue), 76%, 49%);				/* 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 */
+		--accent-color-hover: hsl(var(--accent-hue), 86%, 57%);	/* 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	 */
+		--border-color-softer: hsl(var(--theme-hue), 0%, 20%);	/* textarea,select,code,td,hr border	 */
 	
-		--background-color: hsl(var(--theme-hue), 0%, 5%);			/* body background; textarea,select background */
+		--background-color: hsl(var(--theme-hue), 0%, 12%);			/* body background; textarea,select background */
+		--background-color-softer: hsl(var(--theme-hue), 0%, 18%);
 		--code-background: hsl(var(--theme-hue), 0%, 5%);				/* code background*/
 
 		--button-primary-color: white;
   }
 	
+	img.value-img {
+		filter: invert(0.8);
+	}
 	/* TODO - test dialing back image intensity on dark background
   img {
     opacity: .80;
@@ -101,7 +118,6 @@
 	 Any additional needs should be made using custom CSS directives */
 
 
-/* did not keep .container to prevent backwards compatibility problems */
 .grid-container {
 	position: relative;
 	width: 100%;
@@ -116,7 +132,7 @@
 	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 }
 
-/* basic grid defaults */
+/* basic grids */
 .grid-container.quarters {
 	grid-template-columns: repeat(4, 1fr);
 }
@@ -132,9 +148,6 @@
 
 
 
-
-
-
 /* Base Styles
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 html {
@@ -259,7 +272,7 @@ select {
   height: 38px;
   padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
   background-color: var(--background-color);
-  border: 1px solid #var(--border-color-softer);
+  border: 1px solid var(--border-color-softer);
   border-radius: 4px;
   box-shadow: none;
   box-sizing: border-box; }
@@ -288,7 +301,7 @@ input[type="url"]:focus,
 input[type="password"]:focus,
 textarea:focus,
 select:focus {
-  border: 1px solid ;
+  border: 1px solid var(--accent-color);
   outline: 0; }
 label,
 legend {

css/skeleton-legacy.css

@@ -0,0 +1,104 @@
+/* include this file if you want to duplicate all classes available
+ * the original skeleton boilerplate.
+ *
+ * Note: if you are creating a new site, this file is not needed 
+ * and simpler CSS Grid elements should be used without all the 
+ * additional classes on HTML elements. See the Readme for examples.
+*/
+
+
+/* Grid –––––––––––––––––––––––––––––––––––––––––––––––––– */
+/* 	Directives to replicate all skeleton.css functionality */
+/* .row becomes a grid container with 12 columns */
+.container, .row {
+	position: relative;
+	width: 100%;
+	max-width: 960px;
+  margin: 0 auto;
+  padding: 0 20px;
+  box-sizing: border-box;
+}
+
+.row {
+	padding: 0;
+	display: grid;
+	grid-template-columns: 1fr;
+	gap: 4%;
+}
+
+.column,
+.columns {
+  width: 100%;
+  float: left;
+  box-sizing: border-box; }
+
+/* For devices larger than 400px */
+@media (min-width: 400px) {
+  .container {
+    width: 85%;
+    padding: 0; }
+}
+
+/* For devices larger than 550px */
+@media (min-width: 550px) {
+	.container {
+		width: 80%;
+	}
+  .row {
+    width: 100%;
+    grid-template-columns: repeat(12, 1fr);
+    gap: 4%;
+    margin-bottom: 10px;
+  }
+
+  .one.column, .one.columns 	{ grid-column-end: span 1; }
+  .two.columns              	{ grid-column-end: span 2; }
+  .three.columns            	{ grid-column-end: span 3; }
+  .four.columns             	{ grid-column-end: span 4; }
+  .five.columns             	{ grid-column-end: span 5; }
+  .six.columns              	{ grid-column-end: span 6; }
+  .seven.columns            	{ grid-column-end: span 7; }
+  .eight.columns            	{ grid-column-end: span 8; }
+  .nine.columns             	{ grid-column-end: span 9; }
+  .ten.columns              	{ grid-column-end: span 10; }
+  .eleven.columns           	{ grid-column-end: span 11; }
+  .twelve.columns           	{ grid-column-end: span 12; }
+  .one-third.column           { grid-column-end: span 4; }
+  .two-thirds.column          { grid-column-end: span 8; }
+  .one-half.column            { grid-column-end: span 6; }
+
+  /* Offsets */
+  .offset-by-one.column,
+  .offset-by-one.columns          { grid-column-start: 2; }
+  .offset-by-two.column,
+  .offset-by-two.columns          { grid-column-start: 3; }
+  .offset-by-three.column,
+  .offset-by-three.columns        { grid-column-start: 4; }
+  .offset-by-four.column,
+  .offset-by-four.columns         { grid-column-start: 5; }
+  .offset-by-five.column,
+  .offset-by-five.columns         { grid-column-start: 6; }
+  .offset-by-six.column,
+  .offset-by-six.columns          { grid-column-start: 7; }
+  .offset-by-seven.column,
+  .offset-by-seven.columns        { grid-column-start: 8; }
+  .offset-by-eight.column,
+  .offset-by-eight.columns        { grid-column-start: 9; }
+  .offset-by-nine.column,
+  .offset-by-nine.columns         { grid-column-start: 10; }
+  .offset-by-ten.column,
+  .offset-by-ten.columns          { grid-column-start: 11; }
+  .offset-by-eleven.column,
+  .offset-by-eleven.columns       { grid-column-start: 12; }
+
+  .offset-by-one-third.column,
+  .offset-by-one-third.columns    { grid-column-start: 5;}
+  .offset-by-two-thirds.column,
+  .offset-by-two-thirds.columns   { grid-column-start: 9;}
+
+  .offset-by-one-half.column,
+  .offset-by-one-half.columns     { grid-column-start: 7;}
+}
+
+
+