Spaden - the FINN.no 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.


Documentation

https://pages.github.schibsted.io/finn/spaden/

CDN

https://static.finncdn.no/_c/spaden/v{version}/spaden.min.css

Building

# Install dependencies
$ npm install

# Build artifacts
$ npm run package

The built artifacts reside in the _/dist_ folder in the current directory.

Post-processing

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

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.market
* icons.misc
* icons.progress
* icons.share
* icons.social
* imgPath (same as assetsPath + '/img')

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

Serve all Spaden assets

``javascript
const app = express();

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

Import stylesheet

`html

``

Contributing?

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