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

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

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

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

10 years ago

10 years ago

10 years ago