BitGoblin/Bones
1
0
Fork 0
Code Issues 5 Pull Requests Packages Projects Releases Wiki Activity

Replaced all colors with CSS vars

Browse Source 
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
This commit is contained in:
Steve 2019-01-21 05:22:36 -05:00
parent 9ea615074e
commit 3f08177d00
2 changed files with 132 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

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

240
css/skeleton.css vendored
View File

@ -1,15 +1,16 @@
/*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Barebones V3
* Copyright 2019 Steve Cochran
*
* 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 {
position: relative;
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box; }
.column,
.columns {
width: 100%;
float: left;
box-sizing: border-box; }
/* CSS Grid depends much more on CSS than HTML, so there is less boilerplate
than with skeleton. Only basic 1-4 column grids are included.
Any additional needs should be made using custom CSS directives */
/* For devices larger than 400px */
@media (min-width: 400px) {
.container {
width: 85%;
padding: 0; }
/* did not keep .container to prevent backwards compatibility problems */
.grid-container {
position: relative;
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 */
@media (min-width: 550px) {
.container {
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%; }
/* basic grid defaults */
.grid-container.quarters {
grid-template-columns: repeat(4, 1fr);
}
.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;
border-color: #888;
color: var(--text-color-normal);
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;
background-color: #33C3F0;
border-color: #33C3F0; }
color: var(--button-primary-color);
background-color: var(--accent-color);
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;
background-color: #1EAEDB;
border-color: #1EAEDB; }
color: var(--button-primary-color);
background-color: var(--accent-color-hover);
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;
border: 1px solid #D1D1D1;
background-color: var(--background-color);
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;
border: 1px solid #E1E1E1;
background: var(--code-background);
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