Pollen

Pollen is a library of CSS variables for rapid prototyping, consistent styling, and as a utility-first foundation for your own design systems. Heavily inspired by TailwindCSS.

What it looks like

Pollen has no buildstep, class naming conventions, or framework dependencies. It works in stylesheets, inline styles, and CSS-in-JS.

.button {
  font: var(--font-sans);
  font-weight: var(--font-medium);
  padding: var(--size-1);
  background: var(--color-blue);
  color: white;
  border-radius: var(--radius-2);
  box-shadow: var(--elevation-1);
  transition: background 150ms var(--easing-standard);
}

Modules

Installation

Install Pollen from NPM and include it in your project

npm i pollen-css

import 'pollen-css';

Alternatively include from a CDN

You can also link Pollen's CSS directly from the Unpkg CDN

<link rel="stylesheet" href="https://unpkg.com/pollen-css/pollen.css" />

The entire library weighs under 1.5kb and has zero runtime, so there's nothing to optimise.

Shimming IE

Pollen requires a small shim to work in Internet Explorer, 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-ponfyill shim with sane configuration.

Editor Support

For autocomplete support of all of Pollen's variables in VS Code:

Install the CSS Var Complete extension
Add Pollen to the extension's file settings in .vscode/settings.json
If you're using CSS-in-JS make sure you add javascript/javascriptreact/typescriptreact file support to the extension's settings

{
  "cssvar.files": [
    "./node_modules/pollen-css/pollen.css"
  ],
  
  // CSS-in-JS support
  "cssvar.extensions": ["css", "javascript", "typescriptreact"] 
}

Autocomplete will then be available for all properties. Intellisense will trigger simply with --, no need to also add var(.

Usage

Read the full documentaion at pollen.style

gainhad/pollen