Getting started
Since Pollen is just CSS variables, it works everywhere without any configuration needed. There's no buildstep, preprocessor, or environment requirements. It weighs less than 1kb.

Installation & Usage

Install Pollen from NPM and include it in your project
1
npm i pollen-css
Copied!
1
import 'pollen-css';
Copied!

Alternatively include from a CDN

You can also link Pollen's CSS directly from the Unpkg CDN
1
<link rel="stylesheet" href="https://unpkg.com/pollen-css/pollen.css" />
Copied!
Once Pollen is included in your project, you can use its variables anywhere

Addons

Pollen comes with several optional addons in addition to its core modules. Include them in your project by importing their CSS file from pollen-css/addons/{addon}.css
1
import 'pollen-css'
2
import 'pollen-css/addons/grid.css'
Copied!

IE Support

Pollen requires a small shim to work in Internet Explorer 11 and below, as it doesn't support the CSS variables that the library is built on. Enable IE support with the included shimmie utility from pollen-css/utils
1
import { shimmie } from 'pollen-css/utils';
2
3
shimmie();
Copied!
Shimmie will check for support, and if required dynamically load and apply the excellent css-vars-ponfyill shim with sane configuration.

Editor Integration

VS Code

Enable intellisense autocompletion for Pollen in VS Code by installing the CSS Var Complete extension and adding Pollen's CSS in a .vscode/settings.json file in the root of your project, along with some optional additional configuration.
.vscode/settings.json
1
{
2
"cssvar.files": [
3
"./node_modules/pollen-css/pollen.css",
4
// "./node_modules/pollen-css/addons/grid.css",
5
// "./src/styles/my-custom-variables.css
6
],
7
// Use Pollen's inbuilt variable ordering
8
"cssvar.disableSort": true,
9
// Add support for autocomplete in other file types
10
"cssvar.extensions": ["css", "html", "jsx", "tsx"]
11
}
Copied!
Last modified 1d ago