spaden

The FINN.no front-end CSS framework built on top of OOCSS

Usage no npm install needed!

<script type="module">
  import spaden from 'https://cdn.skypack.dev/spaden';
</script>

README

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.

Build Status

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.