Update readme for initial release
Minor changes to other files, mostly cleanup.
This commit is contained in:
Steve
parent
d47ccd02c2
commit
fd0167a9f3
78
README.md
78
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
|
||||
|
||||
0
css/normalize.css
vendored
Executable file → Normal file
0
css/normalize.css
vendored
Executable file → Normal file
BIN
images/favicon-16.png
Normal file
BIN
images/favicon-16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 867 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
11
index.html
11
index.html
@ -20,22 +20,21 @@
|
||||
<!-- CSS
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||
<link rel="stylesheet" href="css/normalize.css">
|
||||
<link rel="stylesheet" href="css/skeleton.css">
|
||||
<link rel="stylesheet" href="css/barebones.css">
|
||||
|
||||
<!-- Favicon
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||
<link rel="icon" type="image/png" href="images/favicon.png">
|
||||
<link rel="icon" type="image/png" href="images/favicon-16.png">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Primary Page Layout
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="one-half column" style="margin-top: 25%">
|
||||
<div class="grid-container halves">
|
||||
<div>
|
||||
<h4>Basic Page</h4>
|
||||
<p>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 <a href="http://www.getskeleton.com">Skeleton documentation</a>.</p>
|
||||
<p>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 <a href="https://acahir.github.io/Barebones/">Barebones documentation</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user