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.

Quick start
  • 1 Download ↓ the file.
  • 2 Unzip skelet-master.zip
  • 3 Two files to pay attenion to:
    1. skelet.html = the HTML5 boilerplate
    2. css/skelet.css = 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/npm/selekkt-skelet@latest/css/skelet.min.css">
without typeface 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/selekkt-skelet@latest/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)
    │   ├── skelet.min.css (Skelet. minified)
    │   └── 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 (HTML5 boilerplate)
#

Custom

Learn how to tailor Skelet. to your specific requirements. CSS variables allow for simple customization..
#

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 collection of small utility classes that serve as simple helpers. It is sometimes preferable to use a utility class rather than create an entirely new class just to float an element.
#

Elements

Buttons, input fields, dropdown menus, checkboxes, radio buttons, and textareas are all available!
#

Animation

Skelet. comes with some basic animations that you can use right away.
#

Grids

A simple 12-column CSS grid system that relies on descriptive HTML rather than semantic CSS.
#

Flexbox

Flexbox with a simple and straightforward design that makes use of descriptive HTML.
#

Examples

A collection of layout examples that show 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