fd0167a9f3
Minor changes to other files, mostly cleanup.
80 lines
3.6 KiB
Markdown
80 lines
3.6 KiB
Markdown
# Barebones
|
|
Barebones is simple, responsive boilerplate based off the popular [Skeleton](http://getskeleton.com) project by [Dave Gamache](https://twitter.com/dhg).
|
|
|
|
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/master.zip)
|
|
- Clone the repo: `https://github.com/acahir/Barebones.git`
|
|
|
|
### What's in the download?
|
|
|
|
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/
|
|
│ ├── barebones.css
|
|
│ ├── normalize.css
|
|
│ └── skeleton-legacy.css
|
|
└── images/
|
|
└── 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
|
|
|
|
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.
|
|
|
|
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
|
|
|
|
All parts of Barebones are free to use and abuse under the MIT license.
|
|
|
|
|