Getting started

Pollen

Github Share on Twitter

Search…

Introducing Pollen

Basics

Modules

Misc

Getting started

Since Pollen is just CSS variables, it works everywhere without any preprocessor or environment requirements.
Installation
Install Pollen from NPM and include its CSS in your project, or link direct to it on the Unpkg CDN
Module import
CSS import (CDN)
HTML Link (CDN)
npm i pollen-css
import 'pollen-css';
Requires CSS support in your bundler (eg: Webpack, Rollup, etc)
@import "https://unpkg.com/pollen-css";
<link rel="stylesheet" href="https://unpkg.com/pollen-css" />
Once Pollen is included in your project, you can use its variables anywhere
Configuration
Pollen comes with a robust set of low-level defaults for building sophisticated designs. But every aspect can be easily customised, extended, or stripped out with the pollen command line build tool. Instead of importing the default pollen.css file, create a pollen.config.js config file in the root of your project and run pollen to generate your own custom design system. Then import the generated CSS file as you normally would.
Read more in Configuration.
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
import { shimmie } from 'pollen-css/utils';
​
shimmie();
Shimmie will check for support and, if required, dynamically load and apply the excellent css-vars-ponyfill 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.
If you have configured a custom Pollen bundle make sure you add the output CSS file to the cssvar.files array instead of the default pollen.css bundle.
.vscode/settings.json
{
  "cssvar.files": [
    // Or your custom Pollen bundle
    "./node_modules/pollen-css/pollen.css",
  ],
  // Do not ignore css files in node_modules, which is ignored by default
  "cssvar.ignore": [],
  // Use Pollen's inbuilt variable ordering
  "cssvar.disableSort": true,
  // Add support for autocomplete in other file types
  "cssvar.extensions": ["css", "html", "jsx", "tsx"]
}

Introducing Pollen

Next - Basics

Configuration

Last modified 14d ago

Copy link

Edit on GitHub

Outline