Spaden NPM | npm.io

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.

@everything-registry/sub-chunk-2802

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago