Converted to use:

- CSS Grid
- CSS Variables
Added skeleton-legacy.css to provide feature/class equiv to orig boilerplate
This commit is contained in:
Steve 2019-01-21 10:38:55 -05:00
parent ef8330bedf
commit 8ad9b471d5
2 changed files with 133 additions and 16 deletions

View File

@ -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-hover: hsl(var(--accent-hue), 76%, 49%) /* link hover; button-primary:hover:focus bg+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), 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 {

104
css/skeleton-legacy.css Normal file
View File

@ -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;}
}