Getting Started

Intro

New to Skeletonic CSS v1.0.5? In this version, it’s now easy to choose and install just the features you need. And because of its reduced minimum footprint, it integrates quickly to your web app.

Ready to install? We’ll walk you through it, step-by-step.

Download and install

You can install Skeletonic CSS via NPM or one of our CDN providers. You can also host the distribution files locally if you prefer to.

Install from CDN

The easiest way to use the Skeletonic CSS is via CDN. You don’t need to install anything. Just add the CSS file to your <head> tag. You can import the compiled files to your site or web app directly from our preferred CDNs:

Skip the download with unpkg or jsDelivr to deliver cached version of Skeletonic’s compiled CSS to your project.

unpkg is a fast, global content delivery network for everything on npm,
JSDelivr is a free public CDN for open-source projects.

Install with Node.js

You will need Node.js and Npm to get the pre-built CSS and sourcemaps.

Install Skeletonic CSS v1.0.5

npm install skeletonic-stylus

Install with Yarn

Install with Yarn to get the pre-built CSS and sourcemaps.

yarn add skeletonic-stylus

Download the Github release

Download the the Github release to get all the latest source files. Dropping them into your project will boost your productivity and optimise your development workflow.

Clone the GitHub repository

Clone the main repository to get all source files including build scripts:

git clone https://github.com/sebastienrousseau/skeletonic-stylus.git

CSS, LESS & SASS distributions

Skeletonic CSS provides a separate repository for a CSS, LESS & SASS only distributions.

CSS Repository
LESS Repository
SASS Repository

You can install both CSS and LESS via NPM or download any of them and use them in your project as local files.

Whats included

Within the download you’ll find all the source files, compiled and minified CSS bundles as well as the CSS sourcemaps grouped into the dist folder.

You’ll see something like this:

skeletonic-1.0.5
dist
├── README.md
├── css
│   ├── skeletonic-animations.css
│   ├── skeletonic-animations.css.map
│   ├── skeletonic-animations.min.css
│   ├── skeletonic-colors.css
│   ├── skeletonic-colors.css.map
│   ├── skeletonic-colors.min.css
│   ├── skeletonic-fonts.css
│   ├── skeletonic-fonts.css.map
│   ├── skeletonic-fonts.min.css
│   ├── skeletonic.css
│   ├── skeletonic.css.map
│   └── skeletonic.min.css
├── filesize-report.txt
├── images
│   ├── button-primary.svg
│   ├── button-secondary.svg
│   ├── skeletonic-stylus-readme.svg
│   └── skeletonic-stylus.svg
├── package.json
└── stylus
    ├── README.md
    ├── animations
    │   ├── README.md
    │   ├── _contents.styl
    │   ├── bounce.styl
    │   ├── chameleon.styl
    │   ├── fade-in.styl
    │   ├── fade-out.styl
    │   ├── flash.styl
    │   ├── pop-in.styl
    │   ├── pulse.styl
    │   ├── rotation.styl
    │   ├── shake.styl
    │   ├── vanish-in.styl
    │   ├── vanish-out.styl
    │   ├── wobble.styl
    │   └── zoom-in.styl
    ├── base
    │   ├── README.md
    │   ├── _contents.styl
    │   ├── helpers.styl
    │   └── reset.styl
    ├── components
    │   ├── README.md
    │   ├── _contents.styl
    │   ├── card.styl
    │   ├── header.styl
    │   └── navbar.styl
    ├── configurations
    │   ├── README.md
    │   ├── _contents.styl
    │   ├── colors.styl
    │   └── variables.styl
    ├── debugging
    │   ├── base64
    │   └── images
    ├── elements
    │   ├── README.md
    │   ├── _contents.styl
    │   ├── button.styl
    │   ├── clipboard.styl
    │   ├── code.styl
    │   ├── divider.styl
    │   ├── fieldset.styl
    │   ├── form.styl
    │   ├── image.styl
    │   ├── label.styl
    │   ├── link-effects.styl
    │   ├── link.styl
    │   ├── list.styl
    │   ├── margin.styl
    │   ├── padding.styl
    │   └── table.styl
    ├── fonts
    │   ├── README.md
    │   ├── _contents.styl
    │   └── font-face.styl
    ├── layout
    │   ├── README.md
    │   ├── _contents.styl
    │   ├── container.styl
    │   ├── grid.styl
    │   └── media-queries.styl
    ├── palettes
    │   ├── README.md
    │   ├── _contents.styl
    │   ├── material.styl
    │   ├── tachyons.styl
    │   └── websafe.styl
    ├── skeletonic.styl
    └── utilities
        ├── README.md
        ├── _contents.styl
        └── mixins.styl
15 directories, 81 files

Now simply link one of these CSS in your HTML document. In that case, the quickest and easiest way to start using skeletonic is to include a reference to the minified CSS file.

<link rel="stylesheet" type="text/css" href="[email protected]" />

The link consists of just a simple line of HTML code that you will need to put in the <><head></> section of your HTML document.

Please feel free to grab the latest:

<link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/css/skeletonic.min.css" />

You can also specify a specific version as per below. The latest version as of today is 1.0.5.

<link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/css/skeletonic.min.css" />

CSS Colours

<link rel="stylesheet" type="text/css" href="skeletonic-colors.min.css" />

CSS Animations

<link rel="stylesheet" type="text/css" href="skeletonic-animations.min.css" />

Alternate CDN locations

The following table lists alternate CDN locations where Skeletonic is hosted.

CDN	URL	HTTPS	Combo
unpkg	https://unpkg.com/[email protected]/css/skeletonic.min.css	Yes	No
jsDelivr	https://cdn.jsdelivr.net/npm/[email protected]/css/skeletonic.min.css	Yes	Yes