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 e40d200..8e6a20d 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. -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. +- 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. + +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 0000000..5f21e91 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 7a3c81c..0000000 Binary files a/images/favicon.png and /dev/null differ diff --git a/index.html b/index.html index c81c190..f2cf33a 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.