https://github.com/hyperfocalHQ/pollen

The CSS variables build system
https://github.com/hyperfocalHQ/pollen

css css-framework css-utilites css-variables design-system functional-css tailwindcss utilty-classes

Last synced: about 2 months ago
JSON representation

The CSS variables build system

• Host: GitHub
• URL: https://github.com/hyperfocalHQ/pollen
• Owner: hyperfocalHQ
• License: mit
• Created: 2019-02-10T02:35:21.000Z (almost 6 years ago)
• Default Branch: main
• Last Pushed: 2024-07-16T09:56:24.000Z (6 months ago)
• Last Synced: 2024-11-14T08:57:09.339Z (2 months ago)
• Topics: css, css-framework, css-utilites, css-variables, design-system, functional-css, tailwindcss, utilty-classes
• Language: TypeScript
• Homepage: https://www.pollen.style
• Size: 1.93 MB
• Stars: 887
• Watchers: 4
• Forks: 14
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
 Pollen 
 




  

    

  



The CSS variables build system




  

  

  

  



  




Pollen is a highly configurable library of 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 [Bokeh](https://bokeh.photo).

### 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're easy to 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.



  



## How it works

#### 1. Configure your design system

`pollen.config.js`

```js

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

```sh

$ pollen

```

#### 3. Use the CSS

`index.html`

```html

```

## 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 pallete

- Border radiuses

- Blurs

- Z-index layers

- Box shadows

- Easing functions

- Page grid

- Content grids

## Documentation

Read the full documentation at **[pollen.style](https://www.pollen.style)**