The front-end CSS framework built on top of OOCSS

Usage no npm install needed!

<script type="module">
  import spaden from '';


Spaden - the CSS framework

There is a figure of speech which is to call a spade a spade. This is (not) the reason this project is called Spaden.

Build Status




# Install dependencies
$ npm install

# Build artifacts
$ npm run package

The built artifacts reside in the /dist folder in the current directory.


Spaden is processed with postcss. The following future syntax features are used:

  • Variables (postcss-custom-properties)
  • Custom media queries (postcss-custom-media)
  • Range contexts in media features ("(width > 500px)") (postcss-media-minmax)

The following features are used for building:

  • Autoprefixer (autoprefixer)
  • @import inlining (postcss-import)

Legacy browser support

<!--[if IE 9]>
<link rel="stylesheet" href="styles/ie9.css">
<!--[if IE 8]>
<link rel="stylesheet" href="styles/ie8.css">
<!--[if lte IE 8]>
<link rel="stylesheet" href="styles/ie.css">

Using Spaden from Node.js/Express

Install Spaden via npm

$ npm install spaden --save

The following paths are exposed:

  • assetsPath
  • iconsPath (same as assetsPath + '/icons')
  • icons.misc
  • icons.progress
  • icons.share
  • imgPath (same as assetsPath + '/img')

Example usage: const iconPath = require('spaden').icons.progress;

Serve all Spaden assets

const app = express();

const assetsPath = require('spaden').assetsPath;
app.use('/spaden', express.static(assetsPath));

Import stylesheet

<link rel="stylesheet" href="/spaden/spaden.min.css">


Check out our contribution guidelines for the most efficient way to contribute.