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

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

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

const app = express();

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

Import stylesheet

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

Contributing?

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