pollen-css
v5.0.1
Published
Utility-first CSS for the future
Downloads
3,027
Maintainers
Readme
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.
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
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
$ pollen
3. Use the CSS
index.html
<link href="/pollen.css" rel="stylehseet" />
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