The CSS Variables Build System

Pollen is a highly configurable library of CSS variables for your next design system. It allows you to write faster, more consistent, and more maintainable styles. Made and maintained with care by the fine people at Bokeh.

Features

• Robust library of well-considered, style-agnostic CSS variables
• Fully configurable and extensible with CLI build tool
• Zero setup required to get started
• Responsive with configurable @media and @supports queries
• Lightweight, human-readable output if you ever want to move away from Pollen

What it looks like

Pollen’s design tokens can be used to build any project. They are easy to customize and extend, and they don’t require preprocessors, class naming conventions, or non-standard syntax. You can generate an entirely custom design system with a simple config file.

How it works

Follow these simple steps to integrate Pollen into your project:

1. Configure your design system

Create a configuration file named pollen.config.js with the following code:

module.exports = (pollen) => ({
  output: .pollen.css,
  modules: {
    ...pollen,
    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

Run the build command in your terminal:

sh
$ pollen

3. Use the CSS

In your index.html, include the CSS file with the following line:

<link href="pollen.css" rel="stylesheet">

What it includes

Pollen’s default variables include expertly crafted modules for:

• Font sizes
• Fluid font sizes
• Font sets
• Font weights
• Line heights
• Letter spacings
• Prose widths
• Size scale
• Container widths
• Aspect ratios
• Color palette
• Border radiuses
• Blurs
• Z-index layers
• Box shadows
• Easing functions
• Page grid
• Content grids

Troubleshooting

If you encounter any issues along the way, here are a few troubleshooting ideas:

• Make sure you have Node.js installed, as Pollen requires it to run.
• Check that your configuration file is named correctly and is in the right path.
• Ensure that the command line interface (CLI) command is typed correctly.
• Look into the console for any error messages that can guide you on what might be wrong.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.

Read the full documentation at pollen.style.