From 8dea55c760806ee78571f8564dcacd2c96279f05 Mon Sep 17 00:00:00 2001 From: Angus Date: Sun, 20 Jan 2019 23:00:50 -0500 Subject: [PATCH 01/11] Initial Barebones fork rewrite --- README.md | 56 +++++++++++++++++++++++-------------------------------- 1 file changed, 23 insertions(+), 33 deletions(-) diff --git a/README.md b/README.md index da830643a..9f30b1d3c 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,28 @@ -# [Skeleton](http://getskeleton.com) -Skeleton is a simple, responsive boilerplate to kickstart any responsive project. +# Barebones +Barebones is simple, responsive boilerplate based off the popular [Skeleton](http://getskeleton.com) project by [Dave Gamache](https://twitter.com/dhg). + +### Why Barebones? + +Building off of Skeleton's [awesomeness](https://github.com/dhg/Skeleton#why-its-awesome): +- Normalize.css added as a submodule to remain current +- Updated to use CSS variables +- Uses CSS Grid instead of 12-column grid system +- Pending Release: Uses CSS env() function +- Possible: Add basic Nav boilerplate + + +## Current Status + +2019-01-20 - updates currently being made on v3 branch. No releases yet. -Check out for documentation and details. ## Getting started -There are a couple ways to download Skeleton: -- [Download the zip](https://github.com/dhg/Skeleton/releases/download/2.0.4/Skeleton-2.0.4.zip) -- Clone the repo: `git clone https://github.com/dhg/Skeleton.git` (Note: this is under active development, so if you're looking for stable and safe, use the zipped download) +Barebones can be downloaded via zip file or the repo can be cloned: +- [Download the zip](https://github.com/acahir/Barebones/archive/2.0.4.zip) +- Clone the repo: `https://github.com/acahir/Barebones.git` + +Note: The current master branch is simply v2.0.4 of Skeleton. Branch v3 is under active development. ### What's in the download? @@ -25,14 +40,6 @@ Skeleton/ ``` -### Why it's awesome - -Skeleton is lightweight and simple. It styles only raw HTML elements (with a few exceptions) and provides a responsive grid. Nothing more. -- Around 400 lines of CSS unminified and with comments -- It's a starting point, not a UI framework -- No compiling or installing...just vanilla CSS - - ## Browser support - Chrome latest @@ -41,28 +48,11 @@ Skeleton is lightweight and simple. It styles only raw HTML elements (with a few - Safari latest - IE latest -The above list is non-exhaustive. Skeleton works perfectly with almost all older versions of the browsers above, though IE certainly has large degradation prior to IE9. +With the inclusion of CSS Grid, support for IE v11 and earlier is not included. Check [caniuse](https://caniuse.com/#feat=css-grid) for more details. While possible to include partial support for IE with -ms prefixes, it doesn't seem justified at this time. ## License -All parts of Skeleton are free to use and abuse under the [open-source MIT license](https://github.com/dhg/Skeleton/blob/master/LICENSE.md). - - -## Extensions - -The following are extensions to Skeleton built by the community. They are not officially supported, but all have been tested and are compatible with v2.0 (exact release noted): -- [Skeleton on LESS](https://github.com/whatsnewsaes/Skeleton-less): Skeleton built with LESS for easier replacement of grid, color, and media queries. (Last update was to match v2.0.1) -- [Skeleton on Sass](https://github.com/whatsnewsaes/Skeleton-Sass): Skeleton built with Sass for easier replacement of grid, color, and media queries. (Last update was to match v2.0.1) - -Have an extension you want to see here? Just shoot an email to hi@getskeleton.com with your extension! - - -## Colophon - -Skeleton was built using [Sublime Text 3](http://www.sublimetext.com/3) and designed with [Sketch](http://bohemiancoding.com/sketch). The typeface [Raleway](http://www.google.com/fonts/specimen/Raleway) was created by [Matt McInerney](http://matt.cc/) and [Pablo Impallari](http://www.impallari.com/). Code highlighting by Google's [Prettify library](https://code.google.com/p/google-code-prettify/). Icons in the header of the documentation are all derivative work of icons from [The Noun Project](http://thenounproject.com). [Feather](http://thenounproject.com/term/feather/22073) by Zach VanDeHey, [Pen](http://thenounproject.com/term/pen/21163) (with cap) by Ed Harrison, [Pen](http://thenounproject.com/term/pen/32847) (with clicker) by Matthew Hall, and [Watch](http://thenounproject.com/term/watch/48015) by Julien Deveaux. - +All parts of Barebones are free to use and abuse under the MIT license. -## Acknowledgement -Skeleton was created by [Dave Gamache](https://twitter.com/dhg) for a better web. From 9ea615074ebd71dfcfdfbaacc5caf563ef789852 Mon Sep 17 00:00:00 2001 From: Steve Date: Sun, 20 Jan 2019 23:23:29 -0500 Subject: [PATCH 02/11] Inital Barebones fork cleanup --- css/normalize.css | 427 ---------------------------------------------- 1 file changed, 427 deletions(-) delete mode 100644 css/normalize.css diff --git a/css/normalize.css b/css/normalize.css deleted file mode 100644 index 81c6f31ea..000000000 --- a/css/normalize.css +++ /dev/null @@ -1,427 +0,0 @@ -/*! normalize.css v3.0.2 | MIT License | git.io/normalize */ - -/** - * 1. Set default font family to sans-serif. - * 2. Prevent iOS text size adjust after orientation change, without disabling - * user zoom. - */ - -html { - font-family: sans-serif; /* 1 */ - -ms-text-size-adjust: 100%; /* 2 */ - -webkit-text-size-adjust: 100%; /* 2 */ -} - -/** - * Remove default margin. - */ - -body { - margin: 0; -} - -/* HTML5 display definitions - ========================================================================== */ - -/** - * Correct `block` display not defined for any HTML5 element in IE 8/9. - * Correct `block` display not defined for `details` or `summary` in IE 10/11 - * and Firefox. - * Correct `block` display not defined for `main` in IE 11. - */ - -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -main, -menu, -nav, -section, -summary { - display: block; -} - -/** - * 1. Correct `inline-block` display not defined in IE 8/9. - * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. - */ - -audio, -canvas, -progress, -video { - display: inline-block; /* 1 */ - vertical-align: baseline; /* 2 */ -} - -/** - * Prevent modern browsers from displaying `audio` without controls. - * Remove excess height in iOS 5 devices. - */ - -audio:not([controls]) { - display: none; - height: 0; -} - -/** - * Address `[hidden]` styling not present in IE 8/9/10. - * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. - */ - -[hidden], -template { - display: none; -} - -/* Links - ========================================================================== */ - -/** - * Remove the gray background color from active links in IE 10. - */ - -a { - background-color: transparent; -} - -/** - * Improve readability when focused and also mouse hovered in all browsers. - */ - -a:active, -a:hover { - outline: 0; -} - -/* Text-level semantics - ========================================================================== */ - -/** - * Address styling not present in IE 8/9/10/11, Safari, and Chrome. - */ - -abbr[title] { - border-bottom: 1px dotted; -} - -/** - * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. - */ - -b, -strong { - font-weight: bold; -} - -/** - * Address styling not present in Safari and Chrome. - */ - -dfn { - font-style: italic; -} - -/** - * Address variable `h1` font-size and margin within `section` and `article` - * contexts in Firefox 4+, Safari, and Chrome. - */ - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -/** - * Address styling not present in IE 8/9. - */ - -mark { - background: #ff0; - color: #000; -} - -/** - * Address inconsistent and variable font size in all browsers. - */ - -small { - font-size: 80%; -} - -/** - * Prevent `sub` and `sup` affecting `line-height` in all browsers. - */ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sup { - top: -0.5em; -} - -sub { - bottom: -0.25em; -} - -/* Embedded content - ========================================================================== */ - -/** - * Remove border when inside `a` element in IE 8/9/10. - */ - -img { - border: 0; -} - -/** - * Correct overflow not hidden in IE 9/10/11. - */ - -svg:not(:root) { - overflow: hidden; -} - -/* Grouping content - ========================================================================== */ - -/** - * Address margin not present in IE 8/9 and Safari. - */ - -figure { - margin: 1em 40px; -} - -/** - * Address differences between Firefox and other browsers. - */ - -hr { - -moz-box-sizing: content-box; - box-sizing: content-box; - height: 0; -} - -/** - * Contain overflow in all browsers. - */ - -pre { - overflow: auto; -} - -/** - * Address odd `em`-unit font size rendering in all browsers. - */ - -code, -kbd, -pre, -samp { - font-family: monospace, monospace; - font-size: 1em; -} - -/* Forms - ========================================================================== */ - -/** - * Known limitation: by default, Chrome and Safari on OS X allow very limited - * styling of `select`, unless a `border` property is set. - */ - -/** - * 1. Correct color not being inherited. - * Known issue: affects color of disabled elements. - * 2. Correct font properties not being inherited. - * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. - */ - -button, -input, -optgroup, -select, -textarea { - color: inherit; /* 1 */ - font: inherit; /* 2 */ - margin: 0; /* 3 */ -} - -/** - * Address `overflow` set to `hidden` in IE 8/9/10/11. - */ - -button { - overflow: visible; -} - -/** - * Address inconsistent `text-transform` inheritance for `button` and `select`. - * All other form control elements do not inherit `text-transform` values. - * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. - * Correct `select` style inheritance in Firefox. - */ - -button, -select { - text-transform: none; -} - -/** - * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` - * and `video` controls. - * 2. Correct inability to style clickable `input` types in iOS. - * 3. Improve usability and consistency of cursor style between image-type - * `input` and others. - */ - -button, -html input[type="button"], /* 1 */ -input[type="reset"], -input[type="submit"] { - -webkit-appearance: button; /* 2 */ - cursor: pointer; /* 3 */ -} - -/** - * Re-set default cursor for disabled elements. - */ - -button[disabled], -html input[disabled] { - cursor: default; -} - -/** - * Remove inner padding and border in Firefox 4+. - */ - -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; -} - -/** - * Address Firefox 4+ setting `line-height` on `input` using `!important` in - * the UA stylesheet. - */ - -input { - line-height: normal; -} - -/** - * It's recommended that you don't attempt to style these elements. - * Firefox's implementation doesn't respect box-sizing, padding, or width. - * - * 1. Address box sizing set to `content-box` in IE 8/9/10. - * 2. Remove excess padding in IE 8/9/10. - */ - -input[type="checkbox"], -input[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * Fix the cursor style for Chrome's increment/decrement buttons. For certain - * `font-size` values of the `input`, it causes the cursor style of the - * decrement button to change from `default` to `text`. - */ - -input[type="number"]::-webkit-inner-spin-button, -input[type="number"]::-webkit-outer-spin-button { - height: auto; -} - -/** - * 1. Address `appearance` set to `searchfield` in Safari and Chrome. - * 2. Address `box-sizing` set to `border-box` in Safari and Chrome - * (include `-moz` to future-proof). - */ - -input[type="search"] { - -webkit-appearance: textfield; /* 1 */ - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; /* 2 */ - box-sizing: content-box; -} - -/** - * Remove inner padding and search cancel button in Safari and Chrome on OS X. - * Safari (but not Chrome) clips the cancel button when the search input has - * padding (and `textfield` appearance). - */ - -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -/** - * Define consistent border, margin, and padding. - */ - -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; -} - -/** - * 1. Correct `color` not being inherited in IE 8/9/10/11. - * 2. Remove padding so people aren't caught out if they zero out fieldsets. - */ - -legend { - border: 0; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * Remove default vertical scrollbar in IE 8/9/10/11. - */ - -textarea { - overflow: auto; -} - -/** - * Don't inherit the `font-weight` (applied by a rule above). - * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. - */ - -optgroup { - font-weight: bold; -} - -/* Tables - ========================================================================== */ - -/** - * Remove most spacing between table cells. - */ - -table { - border-collapse: collapse; - border-spacing: 0; -} - -td, -th { - padding: 0; -} \ No newline at end of file From 3f08177d00b26cb5e9c05a6f69d3beec9f49a2d8 Mon Sep 17 00:00:00 2001 From: Steve Date: Mon, 21 Jan 2019 05:22:36 -0500 Subject: [PATCH 03/11] 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 | 1 + css/skeleton.css | 240 ++++++++++++++++++++++++++--------------------- 2 files changed, 132 insertions(+), 109 deletions(-) diff --git a/README.md b/README.md index 9f30b1d3c..e40d200df 100644 --- a/README.md +++ b/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 diff --git a/css/skeleton.css b/css/skeleton.css index f28bf6c59..e145188e0 100644 --- a/css/skeleton.css +++ b/css/skeleton.css @@ -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 */ + + +/* 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 400px */ -@media (min-width: 400px) { - .container { - width: 85%; - padding: 0; } +/* 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; } -/* 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%; } -} + + /* 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 From ef8330bedfb84bfe7682e7c3e0deebfa052d4cdb Mon Sep 17 00:00:00 2001 From: Steve Date: Mon, 21 Jan 2019 05:26:46 -0500 Subject: [PATCH 04/11] Renamed to barebones.css --- css/{skeleton.css => barebones.css} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename css/{skeleton.css => barebones.css} (100%) diff --git a/css/skeleton.css b/css/barebones.css similarity index 100% rename from css/skeleton.css rename to css/barebones.css From 8ad9b471d57b21a6603f8f1ab448ee644dc85d6e Mon Sep 17 00:00:00 2001 From: Steve Date: Mon, 21 Jan 2019 10:38:55 -0500 Subject: [PATCH 05/11] Converted to use: - CSS Grid - CSS Variables Added skeleton-legacy.css to provide feature/class equiv to orig boilerplate --- css/barebones.css | 45 ++++++++++------- css/skeleton-legacy.css | 104 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 133 insertions(+), 16 deletions(-) create mode 100644 css/skeleton-legacy.css diff --git a/css/barebones.css b/css/barebones.css index e145188e0..45aa1885c 100644 --- a/css/barebones.css +++ b/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-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 { diff --git a/css/skeleton-legacy.css b/css/skeleton-legacy.css new file mode 100644 index 000000000..acd35b71c --- /dev/null +++ b/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;} +} + + + From 7462765a8475e38602f205c44c97eccc54199813 Mon Sep 17 00:00:00 2001 From: Steve Date: Sat, 26 Jan 2019 09:56:00 -0500 Subject: [PATCH 06/11] Update with changes made while updating index.html Mostly minor changes made to fix or improve minor issues found while updating index.html from Skeleton repo. --- bower.json | 21 -------------- css/barebones.css | 64 +++++++++++++++++++++++------------------ css/skeleton-legacy.css | 2 -- 3 files changed, 36 insertions(+), 51 deletions(-) delete mode 100644 bower.json diff --git a/bower.json b/bower.json deleted file mode 100644 index 1dab01977..000000000 --- a/bower.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "name": "skeleton", - "version": "2.0.4", - "homepage": "http://getskeleton.com/", - "repository": { - "type": "git", - "url": "https://github.com/dhg/Skeleton" - }, - "authors": [ - "Dave Gamache (http://davegamache.com/)" - ], - "description": "Skeleton is a dead-simple, responsive boilerplate to kickstart any responsive project.", - "main": "css/skeleton.css", - "keywords": [ - "css", - "skeleton", - "responsive", - "boilerplate" - ], - "license": "MIT" -} \ No newline at end of file diff --git a/css/barebones.css b/css/barebones.css index 45aa1885c..4772dd4c4 100644 --- a/css/barebones.css +++ b/css/barebones.css @@ -40,7 +40,7 @@ /* CSS Variables –––––––––––––––––––––––––––––––––––––––––––––––––– */ -:root { +html { /* default theme: light background, dark text, blue accent */ --theme-hue: 0; /* white */ @@ -56,7 +56,7 @@ --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: white; /* 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*/ @@ -71,10 +71,12 @@ --grid-max-width: 960px; } -/* theme support -–––––––––––––––––––––––––––––––––––––––––––––––––– */ +/* Dark Theme + Note: prefers-color-scheme selector support is still limited, but + included for future and an example of defining a different base 'theme' +*/ @media (prefers-color-scheme: dark) { - :root { + :html { /* dark theme: light background, dark text, blue accent */ --theme-hue: 0; /* black */ --accent-hue: 194; /* blue */ @@ -120,19 +122,22 @@ .grid-container { position: relative; - width: 100%; max-width: var(--grid-max-width); margin: 0 auto; padding: 20px; + text-align: center; 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)); + grid-template-columns: minmax(200px, 1fr); } /* basic grids */ +.grid-container.fifths { + grid-template-columns: repeat(5, 1fr); +} .grid-container.quarters { grid-template-columns: repeat(4, 1fr); } @@ -146,15 +151,23 @@ grid-template-columns: 1fr; } +/* grids to 3 columns above mobile sizes */ +@media (min-width: 600px) { + .grid-container { + grid-template-columns: repeat(3, 1fr); + padding: 10px 0; + } +} /* Base Styles –––––––––––––––––––––––––––––––––––––––––––––––––– */ html { - font-size: var(--base-font-size); + font-size: var(--base-font-size); + scroll-behavior: smooth; } body { - font-size: 1.5em; + font-size: 1.6rem; /* changed from 15px in orig skeleton */ line-height: 1.6; font-weight: 400; font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; @@ -177,7 +190,7 @@ h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; } h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; } /* Larger than phablet */ -@media (min-width: 550px) { +@media (min-width: 600px) { h1 { font-size: 5.0rem; } h2 { font-size: 4.2rem; } h3 { font-size: 3.6rem; } @@ -329,14 +342,13 @@ ol { ol, ul { padding-left: 0; margin-top: 0; } -ul ul, -ul ol, -ol ol, -ol ul { - margin: 1.5rem 0 1.5rem 3rem; - font-size: 90%; } +ul ul, ul ol, ol ol, ol ul { + font-size: 100%; + margin: 1rem 0 1rem 3rem; + color: var(--text-color-softer); +} li { - margin-bottom: 1rem; } + margin-bottom: 0.5rem; } /* Code @@ -352,7 +364,8 @@ code { pre > code { display: block; padding: 1rem 1.5rem; - white-space: pre; } + white-space: pre; + overflow: auto; } /* Tables @@ -437,17 +450,12 @@ there. */ -/* Larger than mobile */ -@media (min-width: 400px) {} +/* Larger than mobile (default point when grid becomes active) */ +@media (min-width: 600px) {} -/* Larger than phablet (also point when grid becomes active) */ -@media (min-width: 550px) {} +/* Larger than phablet */ +@media (min-width: 900px) {} /* Larger than tablet */ -@media (min-width: 750px) {} - -/* Larger than desktop */ -@media (min-width: 1000px) {} - -/* Larger than Desktop HD */ @media (min-width: 1200px) {} + diff --git a/css/skeleton-legacy.css b/css/skeleton-legacy.css index acd35b71c..b949ed327 100644 --- a/css/skeleton-legacy.css +++ b/css/skeleton-legacy.css @@ -100,5 +100,3 @@ .offset-by-one-half.columns { grid-column-start: 7;} } - - From 2c617eec9cb75541f923873d48666f4cae4dc72e Mon Sep 17 00:00:00 2001 From: Steve Date: Sat, 26 Jan 2019 16:31:27 -0500 Subject: [PATCH 07/11] Modify utility grid classes to be mobile first responsive Also added minor utility functions. --- css/barebones.css | 44 +++++++++++++++++++++++++++----------------- 1 file changed, 27 insertions(+), 17 deletions(-) diff --git a/css/barebones.css b/css/barebones.css index 4772dd4c4..2f140e0f3 100644 --- a/css/barebones.css +++ b/css/barebones.css @@ -134,32 +134,38 @@ html { grid-template-columns: minmax(200px, 1fr); } -/* basic grids */ -.grid-container.fifths { - grid-template-columns: repeat(5, 1fr); -} -.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; -} - /* grids to 3 columns above mobile sizes */ @media (min-width: 600px) { .grid-container { grid-template-columns: repeat(3, 1fr); padding: 10px 0; } + + /* basic grids */ + .grid-container.fifths { + grid-template-columns: repeat(5, 1fr); + } + .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 –––––––––––––––––––––––––––––––––––––––––––––––––– */ html { @@ -417,6 +423,10 @@ form { float: right; } .u-pull-left { float: left; } +.u-align-left { + text-align: left; } +.u-align-right { + text-align: right; } /* Misc From 55d7ae41f78fd2e2cd9b69a47e8ae7df29feecbf Mon Sep 17 00:00:00 2001 From: Steve Date: Sat, 26 Jan 2019 22:10:37 -0500 Subject: [PATCH 08/11] Update normalize.css to v8.0.1 Decided against including normalize.css as a submodule for just a single file as there's a chance of cloning without getting this file (less so with newer versions of git) and packaging normalize into the correct directory for release is more complicated. --- css/normalize.css | 349 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 349 insertions(+) create mode 100755 css/normalize.css diff --git a/css/normalize.css b/css/normalize.css new file mode 100755 index 000000000..b0c1902dc --- /dev/null +++ b/css/normalize.css @@ -0,0 +1,349 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Render the `main` element consistently in IE. + */ + +main { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} \ No newline at end of file From d47ccd02c231905a42d6ba69bced5fd5aaaea456 Mon Sep 17 00:00:00 2001 From: Steve Date: Sat, 26 Jan 2019 23:17:19 -0500 Subject: [PATCH 09/11] Fix rendering of some input buttons on iOS --- css/barebones.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/css/barebones.css b/css/barebones.css index 2f140e0f3..ea579df48 100644 --- a/css/barebones.css +++ b/css/barebones.css @@ -303,6 +303,8 @@ input[type="text"], input[type="tel"], input[type="url"], input[type="password"], +input[type="button"], +input[type="submit"], textarea { -webkit-appearance: none; -moz-appearance: none; From fd0167a9f3d7e116ab84a38a5210acc49f225862 Mon Sep 17 00:00:00 2001 From: Steve Date: Sun, 27 Jan 2019 01:59:40 -0500 Subject: [PATCH 10/11] Update readme for initial release Minor changes to other files, mostly cleanup. --- LICENSE.md => LICENSE-Skeleton.md | 0 README.md | 78 +++++++++++++++++++----------- css/normalize.css | 0 images/favicon-16.png | Bin 0 -> 867 bytes images/favicon.png | Bin 1156 -> 0 bytes index.html | 11 ++--- 6 files changed, 54 insertions(+), 35 deletions(-) rename LICENSE.md => LICENSE-Skeleton.md (100%) mode change 100755 => 100644 css/normalize.css create mode 100644 images/favicon-16.png delete mode 100644 images/favicon.png diff --git a/LICENSE.md b/LICENSE-Skeleton.md similarity index 100% rename from LICENSE.md rename to LICENSE-Skeleton.md diff --git a/README.md b/README.md index e40d200df..8e6a20de1 100644 --- a/README.md +++ b/README.md @@ -1,55 +1,75 @@ # Barebones Barebones is simple, responsive boilerplate based off the popular [Skeleton](http://getskeleton.com) project by [Dave Gamache](https://twitter.com/dhg). -### Why Barebones? - -Building off of Skeleton's [awesomeness](https://github.com/dhg/Skeleton#why-its-awesome): -- 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 - - -## Current Status - -2019-01-20 - updates currently being made on v3 branch. No releases yet. - +While there are several other active forks of Skeleton, Barebones differs by requiring no external tools or dependencies such as CSS pre-processors. Simply download and go. ## Getting started Barebones can be downloaded via zip file or the repo can be cloned: -- [Download the zip](https://github.com/acahir/Barebones/archive/2.0.4.zip) +- [Download the zip](https://github.com/acahir/Barebones/archive/master.zip) - Clone the repo: `https://github.com/acahir/Barebones.git` -Note: The current master branch is simply v2.0.4 of Skeleton. Branch v3 is under active development. - - ### What's in the download? -The download includes Skeleton's CSS, Normalize CSS as a reset, a sample favicon, and an index.html as a starting point. +The download includes Skeleton's CSS, [Normalize CSS](https://github.com/necolas/normalize.css/) as a reset, a sample favicon, and an index.html as a starting point. It also includes skeleton-legacy.css in case you are updating an existing site, though this stylesheet is not linked in the index.html template. ``` Skeleton/ ├── index.html ├── css/ -│ ├── normalize.min.css -│ └── skeleton.css +│ ├── barebones.css +│ ├── normalize.css +│ └── skeleton-legacy.css └── images/ - └── favicon.ico + └── favicon.png ``` +## Why Barebones? + +Building off of Skeleton's [awesomeness](https://github.com/dhg/Skeleton#why-its-awesome): +- Updated to use CSS variables +- Uses CSS Grid to replace 12-column grid system +- Updated normalize to current version (3.0.2 -> 8.0.1) +- Maintains backwards compatibility with Skeleton + +Additional features planned and possible: +- Support for @media prefers-color-scheme (aka Dark Mode) +- Pending Release: Uses CSS env() function +- Include "extensions": instructions and templates for frequently used features: + - Navigation boilerplate + - Code formatting + - Smooth Scrolling +- Add additional example site demonstrating CSS Grid layout flexibility + + + + ## Browser support -- Chrome latest -- Firefox latest -- Opera latest -- Safari latest -- IE latest +Barebones does make use of modern CSS features, but the base functionality is well supported. + +- CSS Grid: [88% global browser support](https://caniuse.com/#feat=css-grid) +- CSS Variables: [87% global browser support](https://caniuse.com/#feat=css-variables) + +The most notable missing support for both features is from IE 11 or earlier. That's probably the browser that your decision will depend on. + +Barebones includes a few experimental features that are not yet widely supported. If not supported, the brower will simply ignore those directives: +- prefers-color-scheme media query: Only currently available in Safari Technology Preview +- scroll-behavior: Chrome, Firefox +- CSS env(): Nothing included in Barebones, but media queries were structured in such as way to make use of env() variables in the future +Both of these features can be achived using other methods. In fact, both are implemented using css and vanilla javascript on the [Barebones documentation page](https://acahir.github.io/Barebones/) in ~50 lines of code. In the future these may be added to Barebones as "extensions". + +#### External dependencies + +- normalize.css: Chrome, Edge, Firefox ESR+, Internet Explorer 10+, Safari 8+, Opera + + +## Acknowledgements + +Barebones is build upon the great work of the Skeleton project by [Dave Gamache](https://twitter.com/dhg). It wouldn't be possible without him, and Barebones only exists because Skeleton is no longer being maintained. -With the inclusion of CSS Grid, support for IE v11 and earlier is not included. Check [caniuse](https://caniuse.com/#feat=css-grid) for more details. While possible to include partial support for IE with -ms prefixes, it doesn't seem justified at this time. +The [documentation page](https://acahir.github.io/Barebones/) makes use of icons by [FontAwesome](https://fontawesome.com), [smoothscroll](https://github.com/iamdustan/smoothscroll) by [Dustan Kasten](https://github.com/iamdustan), [Google Prettify](https://code.google.com/p/google-code-prettify/), and other great tidbits shared by many. ## License diff --git a/css/normalize.css b/css/normalize.css old mode 100755 new mode 100644 diff --git a/images/favicon-16.png b/images/favicon-16.png new file mode 100644 index 0000000000000000000000000000000000000000..5f21e918c3fb6ea79696aa6535c9d4793059280f GIT binary patch literal 867 zcmV-p1DyPcP)daT^g-B@efp0i%C{$h1S0_^1z>o-=hpkgl8VC|FTC9gbW{lU5@ zus#oK;RC*w5-|V5sylqD4POgK<1J7A>LR!#4WDmVX9`&U4e&`4N+eb$=wP2dv%Z_? zvmX6^KgHv5z1y~h5Y%qB>Gt-P?(gsIeusw&_rGWTsgEOBBvYkLCXF#>U1h-*+H@GRhTse0-!@ z?TMCXAkheAWdrU+TldgOYsG$Y!&SJ{b>~wzzs7k47V5Iw_1M z3E9`N&43>cCnm^=R;x!qzTsrc_kiFlTAZAmh)^h`tT*@t)|8+mbF&h5A^{9w83kMM zPm59$i~m}dOG1c*o7(|j@VS&=pO7q$#VU_E?X&F1TKI6>a~_*3V2(38vu@;Z35phT tv1aaDPyR9C`7;H@E9ys-aIXD5{|)q%bTL5Ati1pL002ovPDHLkV1krUmUsXF literal 0 HcmV?d00001 diff --git a/images/favicon.png b/images/favicon.png deleted file mode 100644 index 7a3c81c1e32b4e4224452cf8261a585480caa0ea..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1156 zcmV-~1bh35P)Px(K1oDDR9FeUS6ygSR}lVo-6obMX;utd(pYw*xM;*axQ4d&FA%IGA~hPSg!&Re z%!{H3LD7)Nf>mf~DXa7+587b*Vq0rT+y^!IQ_&TXVq{}Xg2tsmWK$E{Rg$dV+}vF6 z#`_m=J8(F2&&-)`&YW}R%yq#z<@o*n3YW{ZhEo=^6_YQP>FIPj!A@E?`I7?!182!U zWwRxhod!YQaJ$|6s8`2UV5hIjAF*$nn3!mxGk;snv2q|c5D4ty$oVx(v2fUKIJzp%YyG-;+|bmTJITBB&Z-~d;>l)!%wq-3T*Hu{5vvj{FwB`QX)d;Q(oi9$K)StVkW z6c!eyhlhvdszTWU_0aWF=-{;b&=3w|^@mIFWhm}D9??d2iK8!I63Xsg){iGSF*2TdhFu$i_?LHwo`odIDct3 zl;>}naw>Tj*DjvJug8wyM9k^>l~=UK#Tzg}dsgRKg9|nMfVQ0#T)#Obt{lbsjm=KC zVN{<9&8@1ESY$JTRl9KNN*u|Qv3ha&CbWO;=u(M+wDT=6zzcm;gX)@ER92Rw`1u6^ zQrGcW*?Pnb=IDo*jCv#jQpq@?hQmh@t_x|pv91$n-nJ1Rl)Z;jcTGZ~X&W*LaiH5! zG<`7Cge@yqU_;B#h((X1slEn5pQ_|r0k7m_jb4F+oG#kkE+&IdSaNl0b4{3V^d>gw z648{}SSkh2Y<>K>1Mzm0RqdHlG41&@uX6K2kXK1+I7_;Js~2Mi8q>jn2l#QHJvdE0 z5^Q;n$C-@YV!zzLzBY8VvmM`_z722DTolcD9r>@y6QZXvB;s8-v}p~#%cyzuIvIRx zGMPN7yoNJ-j#VQ*A42oyVT4&EKYs-GVsWQ;U&{E*=U7ZKBepOj?#=KqOCNM#KPzP^ z^(PAw6-UbOb9CaRRKjMy6Z|s4Kc-wM)AgC~359DZkm@yCG^k=|{|I^qASDtNs)?Qr zC&XrzVCYw;976qo@am!bUw%xqs#xy?E7noApQL)_c!=j>`km9OoAQjN6bD~$&+BRL zA0tIW2UNvzDV^y=D; - + - + -
-
-
+
+

Basic Page

-

This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the Skeleton documentation.

+

This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the Barebones documentation.

From 0935c24808ea10c5aa34307b5d252f955cb8a9dc Mon Sep 17 00:00:00 2001 From: Steve Date: Sun, 27 Jan 2019 02:06:42 -0500 Subject: [PATCH 11/11] Tweak wording and info in documentation --- README.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 8e6a20de1..1b50b80fd 100644 --- a/README.md +++ b/README.md @@ -5,9 +5,11 @@ While there are several other active forks of Skeleton, Barebones differs by req ## Getting started -Barebones can be downloaded via zip file or the repo can be cloned: -- [Download the zip](https://github.com/acahir/Barebones/archive/master.zip) -- Clone the repo: `https://github.com/acahir/Barebones.git` + +Barebones can be downloaded via [zip file](https://github.com/acahir/Barebones/archive/master.zip) or the repo can be cloned using `git clone https://github.com/acahir/Barebones.git`. + +Once you have your bare hands on Barebones, use the [documentation and examples](https://acahir.github.io/Barebones/) to get started. + ### What's in the download?