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 da830643a..1b50b80fd 100644 --- a/README.md +++ b/README.md @@ -1,68 +1,81 @@ -# [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). -Check out for documentation and details. +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 -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](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? -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 it's awesome +## 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 + -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 -- Firefox latest -- Opera latest -- Safari latest -- IE latest +Barebones does make use of modern CSS features, but the base functionality is well supported. -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. +- 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. -## License +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". -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). +#### External dependencies +- normalize.css: Chrome, Edge, Firefox ESR+, Internet Explorer 10+, Safari 8+, Opera -## 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) +## Acknowledgements -Have an extension you want to see here? Just shoot an email to hi@getskeleton.com with your extension! +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. +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. -## 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. +## License +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. 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/skeleton.css b/css/barebones.css similarity index 54% rename from css/skeleton.css rename to css/barebones.css index f28bf6c59..ea579df48 100644 --- a/css/skeleton.css +++ b/css/barebones.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 –––––––––––––––––––––––––––––––––––––––––––––––––– +- Media Breakpoints +- Variables - Grid - Base Styles - Typography @@ -25,107 +26,160 @@ - Media Queries */ +/* 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 +* +*/ -/* Grid + + +/* CSS Variables –––––––––––––––––––––––––––––––––––––––––––––––––– */ -.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; } +html { + + /* 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: 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*/ + + --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; +} -/* For devices larger than 400px */ -@media (min-width: 400px) { - .container { - width: 85%; - padding: 0; } +/* 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) { + :html { + /* 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%, 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), 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%, 20%); /* textarea,select,code,td,hr border */ + + --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; + transition: opacity .5s ease-in-out; + } + img:hover { + opacity: 1; + } + */ } -/* 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%; } +/* Grid +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +/* 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 */ + + +.grid-container { + position: relative; + 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: minmax(200px, 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 –––––––––––––––––––––––––––––––––––––––––––––––––– */ -/* 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); + scroll-behavior: smooth; +} body { - font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */ + 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; - color: #222; } + color: var(--text-color-normal); + background-color: var(--background-color);; +} /* Typography @@ -142,7 +196,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; } @@ -158,9 +212,9 @@ p { /* Links –––––––––––––––––––––––––––––––––––––––––––––––––– */ a { - color: #1EAEDB; } + color: var(--accent-color); } a:hover { - color: #0FA0CE; } + color: var(--accent-color-hover); } /* Buttons @@ -173,7 +227,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 +238,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 +251,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 +272,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 +290,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; } @@ -249,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; @@ -266,7 +322,7 @@ input[type="url"]:focus, input[type="password"]:focus, textarea:focus, select:focus { - border: 1px solid #33C3F0; + border: 1px solid var(--accent-color); outline: 0; } label, legend { @@ -294,14 +350,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 @@ -311,13 +366,14 @@ 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; padding: 1rem 1.5rem; - white-space: pre; } + white-space: pre; + overflow: auto; } /* Tables @@ -326,7 +382,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; } @@ -369,6 +425,10 @@ form { float: right; } .u-pull-left { float: left; } +.u-align-left { + text-align: left; } +.u-align-right { + text-align: right; } /* Misc @@ -377,7 +437,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 @@ -402,17 +462,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/normalize.css b/css/normalize.css index 81c6f31ea..b0c1902dc 100644 --- a/css/normalize.css +++ b/css/normalize.css @@ -1,89 +1,76 @@ -/*! normalize.css v3.0.2 | MIT License | git.io/normalize */ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ /** - * 1. Set default font family to sans-serif. - * 2. Prevent iOS text size adjust after orientation change, without disabling - * user zoom. + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { - font-family: sans-serif; /* 1 */ - -ms-text-size-adjust: 100%; /* 2 */ + line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } +/* Sections + ========================================================================== */ + /** - * Remove default margin. + * Remove the margin in all browsers. */ 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 { + * Render the `main` element consistently in IE. + */ + +main { display: block; } /** - * 1. Correct `inline-block` display not defined in IE 8/9. - * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. */ -audio, -canvas, -progress, -video { - display: inline-block; /* 1 */ - vertical-align: baseline; /* 2 */ +h1 { + font-size: 2em; + margin: 0.67em 0; } +/* Grouping content + ========================================================================== */ + /** - * Prevent modern browsers from displaying `audio` without controls. - * Remove excess height in iOS 5 devices. + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. */ -audio:not([controls]) { - display: none; - height: 0; +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ } /** - * Address `[hidden]` styling not present in IE 8/9/10. - * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. */ -[hidden], -template { - display: none; +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ } -/* Links +/* Text-level semantics ========================================================================== */ /** - * Remove the gray background color from active links in IE 10. + * Remove the gray background on active links in IE 10. */ a { @@ -91,63 +78,39 @@ a { } /** - * 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. + * 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: 1px dotted; + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ } /** - * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + * Add the correct font weight in Chrome, Edge, and Safari. */ 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; + font-weight: bolder; } /** - * Address styling not present in IE 8/9. + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. */ -mark { - background: #ff0; - color: #000; +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ } /** - * Address inconsistent and variable font size in all browsers. + * Add the correct font size in all browsers. */ small { @@ -155,7 +118,8 @@ small { } /** - * Prevent `sub` and `sup` affecting `line-height` in all browsers. + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. */ sub, @@ -166,262 +130,220 @@ sup { vertical-align: baseline; } -sup { - top: -0.5em; -} - sub { bottom: -0.25em; } +sup { + top: -0.5em; +} + /* Embedded content ========================================================================== */ /** - * Remove border when inside `a` element in IE 8/9/10. + * Remove the border on images inside links in IE 10. */ img { - border: 0; -} - -/** - * Correct overflow not hidden in IE 9/10/11. - */ - -svg:not(:root) { - overflow: hidden; + border-style: none; } -/* Grouping content +/* Forms ========================================================================== */ /** - * Address margin not present in IE 8/9 and Safari. + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox 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; +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ } /** - * Contain overflow in all browsers. + * Show the overflow in IE. + * 1. Show the overflow in Edge. */ -pre { - overflow: auto; +button, +input { /* 1 */ + overflow: visible; } /** - * Address odd `em`-unit font size rendering in all browsers. + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. */ -code, -kbd, -pre, -samp { - font-family: monospace, monospace; - font-size: 1em; +button, +select { /* 1 */ + text-transform: none; } -/* 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. + * Correct the inability to style clickable types in iOS and Safari. */ button, -input, -optgroup, -select, -textarea { - color: inherit; /* 1 */ - font: inherit; /* 2 */ - margin: 0; /* 3 */ +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; } /** - * Address `overflow` set to `hidden` in IE 8/9/10/11. + * Remove the inner border and padding in Firefox. */ -button { - overflow: visible; +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; } /** - * 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. + * Restore the focus styles unset by the previous rule. */ -button, -select { - text-transform: none; +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; } /** - * 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. + * Correct the padding in Firefox. */ -button, -html input[type="button"], /* 1 */ -input[type="reset"], -input[type="submit"] { - -webkit-appearance: button; /* 2 */ - cursor: pointer; /* 3 */ +fieldset { + padding: 0.35em 0.75em 0.625em; } /** - * Re-set default cursor for disabled elements. + * 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. */ -button[disabled], -html input[disabled] { - cursor: default; +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ } /** - * Remove inner padding and border in Firefox 4+. + * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; +progress { + vertical-align: baseline; } /** - * Address Firefox 4+ setting `line-height` on `input` using `!important` in - * the UA stylesheet. + * Remove the default vertical scrollbar in IE 10+. */ -input { - line-height: normal; +textarea { + overflow: auto; } /** - * 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. + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. */ -input[type="checkbox"], -input[type="radio"] { +[type="checkbox"], +[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`. + * Correct the cursor style of increment and decrement buttons in Chrome. */ -input[type="number"]::-webkit-inner-spin-button, -input[type="number"]::-webkit-outer-spin-button { +[type="number"]::-webkit-inner-spin-button, +[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). + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. */ -input[type="search"] { +[type="search"] { -webkit-appearance: textfield; /* 1 */ - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; /* 2 */ - box-sizing: content-box; + outline-offset: -2px; /* 2 */ } /** - * 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). + * Remove the inner padding in Chrome and Safari on macOS. */ -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-decoration { +[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** - * Define consistent border, margin, and padding. + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. */ -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ } -/** - * 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 */ -} +/* Interactive + ========================================================================== */ -/** - * Remove default vertical scrollbar in IE 8/9/10/11. +/* + * Add the correct display in Edge, IE 10+, and Firefox. */ -textarea { - overflow: auto; +details { + display: block; } -/** - * 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. +/* + * Add the correct display in all browsers. */ -optgroup { - font-weight: bold; +summary { + display: list-item; } -/* Tables +/* Misc ========================================================================== */ /** - * Remove most spacing between table cells. + * Add the correct display in IE 10+. */ -table { - border-collapse: collapse; - border-spacing: 0; +template { + display: none; } -td, -th { - padding: 0; +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; } \ No newline at end of file diff --git a/css/skeleton-legacy.css b/css/skeleton-legacy.css new file mode 100644 index 000000000..b949ed327 --- /dev/null +++ b/css/skeleton-legacy.css @@ -0,0 +1,102 @@ +/* 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;} +} + diff --git a/images/favicon-16.png b/images/favicon-16.png new file mode 100644 index 000000000..5f21e918c Binary files /dev/null and b/images/favicon-16.png differ diff --git a/images/favicon.png b/images/favicon.png deleted file mode 100644 index 7a3c81c1e..000000000 Binary files a/images/favicon.png and /dev/null differ diff --git a/index.html b/index.html index c81c19074..f2cf33a98 100644 --- a/index.html +++ b/index.html @@ -20,22 +20,21 @@ - + - + -
-
-
+
+

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.