Pollen
GithubShare on Twitter
  • Introducing Pollen
  • Basics
    • Getting started
    • Configuration
      • Configuring Modules
      • Extending Pollen
      • Media & Supports
    • Javascript
  • Modules
    • Typography
    • Layout
    • UI
    • Grid
    • Colors
  • Utils
    • defineConfig
    • fluid
    • shimmie
  • Misc
    • Motivations
    • Contributing
  • Migration Guide
    • v4 -> v5
Powered by GitBook
On this page
  • Features
  • What it looks like
  • How it works

Was this helpful?

Edit on GitHub

Introducing Pollen

The CSS variables build system

NextGetting started

Last updated 1 year ago

Was this helpful?

Pollen is a highly configurable, responsive library of style-agnostic CSS variables for your next design system. It lets you write faster, more consistent, and more maintainable styles.

Made and maintained with ❤️ by the fine people at .

Features

  • Robust library of well-considered, style-agnostic CSS variables (see Modules)

  • Fully configurable and extensible with CLI build tool (see Configuration)

  • Zero setup required to get started (see Getting started)

  • Easy responsive design with support for configuring CSS queries (see Media & Supports)

  • Lightweight, human-readable output if you ever want to move away from Pollen

What it looks like

.button {
   font-family: var(--font-sans);
   font-size: var(--scale-00);
   font-weight: var(--weight-medium); 
   line-height: var(--line-none);
   padding: var(--size-3) var(--size-5);
   background: var(--color-blue);
   border-radius: var(--radius-xs);
   color: white;
}
const Button = styled.button`
   font-family: var(--font-sans);
   font-size: var(--scale-00);
   font-weight: var(--weight-medium); 
   line-height: var(--line-none);
   padding: var(--size-3) var(--size-5);
   background: var(--color-blue);
   border-radius: var(--radius-xs);
   color: white;
`
<button styles={{ 
   fontFamily: 'var(--font-sans)',
   fontSize: 'var(--scale-00)',
   fontWeight: 'var(--weight-medium)',
   lineHeight: 'var(--line-none)',
   padding: 'var(--size-3) var(--size-5)',
   background: 'var(--color-blue)',
   borderRadius: 'var(--radius-xs)'
   color: 'white'
}}>
  Button
</button>
  
<button style="font-family: var(--font-sans); font-size: var(--scale-00); font-weight: var(--weight-medium);  line-height: var(--line-none); padding: var(--size-3) var(--size-5); background: var(--color-blue); border-radius: var(--radius-xs); color: white;">
  Button
</button>

How it works

1. Configure your design system

pollen.config.js
module.exports = (pollen) => ({
  output: './pollen.css',
  modules: {
    color: {
      ...pollen.colors,
      bg: 'white',
      text: 'var(--color-black)'
    }
  },
  media: {
    '(prefers-color-scheme: dark)': {
      color: {
        bg: 'var(--color-black)',
        text: 'white'
      }
    }
  }
});

2. Build your CSS

$ pollen

3. Use the CSS

./pollen.css
:root {
  ...
  --color-bg: white;
  --color-text: var(--color-black);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: var(--color-black);
    --color-text: white;
  }
}

Pollen's design tokens can be used to build any project. They're easy to completely customise and extend and they don't require preprocessors, class naming conventions, or non-standard syntax. Generate an entirely custom design system with a simple .

config file
Bokeh