Sēlekkt. presents

Skelet.3

Skelet. is a contemporary CSS framework which gives you the foundations to start building your next project right away.

Skelet. provides a simple, minimal yet solid starting point for websites.
Get started quickly with the HTML5 template, or just include skelet.css in your own project.

Download ↓ Documentation GitHub

Quick start

  • 1. Download ↓ the file.
  • 2. Unzip master.zip
  • 3. Two files to pay attenion to:
    1. skelet.html = is the the HTML5 boilerplate
    2. css/skelet.css = is the CSS framework

 

or include via CDN
with typeface
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Selekkt/[email protected]/css/skelet.min.css">
without typeface
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Selekkt/[email protected]/css/skelet.min.css">
with npm
npm i selekkt-skelet
Directory structure

Skelet. comes with a directory structure that you can use for your project.

skelet/
├── css/
│   ├── skelet.css (CSS framework)
│   └── app.css (is where all of your other CSS goes)
├── js/
│   ├── modules.js (is for all of your JS frameworks)
│   └── app.js (is where all of your other JS goes)
├── img/
│   ├── logo.png
│   └── touch.png
├── LICENSE
├── README.md
└── skelet.html (HTML boilerplate)
#

Custom

Find out how you can customize Skelet. for your needs. Easy customozation via CSS variables.

#

Typography

HTML is set to 62.5% so that all the REM measurements throughout Skelet. are based on 10px sizing, over 1.6 line height (24px). So basically 1.5rem = 15px.

#

Misc

A number of small utility classes that act as easy-to-use helpers. Sometimes it's better to use a utility class than create a whole new class just to float an element.

#

Elements

Buttons, Input fields, Select menus, Checkboxes, Radio buttons, Textareas it's all here!

#

Animation

Skelet. has some basic animations you can use right away.

#

Grids

Minimal and straight-forward 16-column CSS grid system utilizing descriptive HTML rather than semantic CSS.

#

Flexbox

Minimal and straight-forward Flexbox utilizing descriptive HTML.

#

Examples

A list of layout examples to see Skelet. in action.

Skelet. themes

Skelet. is also available as blank, barebone theme for WordPress, Grav. It's the perfect way to build your next website more quickly and efficiently using your favorite CMS.

WordPress

wp-Skelet. is a highly optimized HTML5 Blank WordPress boilerplate theme. That serve as a starting point for developing your own custom theme. Pre-loaded with time saving features in functions.php. Most importantly skelet.css already included, for a quick start.

Get wp-Skelet


Grav

grav-Skelet. A blank and minimal theme for Grav. No dependencies. Improved directory structure. Optimized build process and freedom to create. It's basically Skelet. for Grav CMS.

Get grav-Skelet