CSSkel

CSSkel is a simple, responsive boilerplate based off the popular Skeleton project by Dave Gamache and a fork of Barebones by Steve Acahir.

We start using Barebones for small but serious projects so we have to appended some basic structures missing and fixed some class names to make it meaningful (to us) but short and logic.

While there are several other active forks of Skeleton, CSSkel, as in Barebones, require no external tools or dependencies such as CSS pre-processors. Simply download (or link it) and go.

Getting started

You can simply link to it using

<link rel="stylesheet" href="//csskel.com/1.0.2/csskel.min.css">

becasue the whole point is being easy to start with CSSkel. No other dependency, jasvascript or preprocessor required. CDN kindly donated by Cloudflare.

CSSkel can be downloaded via zip file or the repo can be cloned using git clone https://github.com/digitart/CSSkel.git.

Once you have your bare hands on CSSkel, use the documentation and examples to get started.

What's in the download?

The download includes CSSkel CSS, the minified version of CSSkel, 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/
│   ├── csskel.css
│   ├── csskel.min.css
│   ├── normalize.css
│   └── skeleton-legacy.css
└── images/
    └── favicon.ico

Why CSSkel?

Building off of Skeleton's awesomeness:

• Updated to use CSS variables - No pre processor required but you can theme it just setting a few variables
• Uses CSS Grid to replace 12-column grid system
• Updated normalize to current version (3.0.2 -> 8.0.1)

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 and raising.
• CSS Variables: 87% global browser support and raising.

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.

CSSkel includes a few experimental features inherited from Barebones 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 CSSkel, 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 the future these may be added to CSSkel as "extensions".

External dependencies

• normalize.css: Chrome, Edge, Firefox ESR+, Internet Explorer 10+, Safari 8+, Opera

Acknowledgements

CSSkel is build upon the great work of the Skeleton project by Dave Gamache and Barebones by Steve Acahir. It wouldn't be possible without them. CSSkel oexists because Skeleton is no longer being maintained and Barebones still inherit the use of "rows" and "exesive-verbose-classes-on-every-div" that IMHO are no longer required in modern HTML design.

The documentation page makes use of icons by FontAwesome, native css smooth scroll, and other great tidbits shared by many.

License

All parts of CSSkel are free to use and abuse under the MIT license.