Introducing Pollen
Utility-first CSS for the future
Pollen is a standards-driven, utility-first CSS library inspired by Tailwind. It provides a collection of CSS variables that can be used anywhere to encourage consistency, maintainability, and rapid development. Made and maintained with ❤️ by the fine people at Bokeh.
What it looks like
Pollen's low-level variables can be used to build any design. They don't require a buildstep or class naming conventions. They're easy to extend and globally responsive, without introducing preprocessors or new syntax.
CSS
CSS-in-JS
Object styles
Inline Styles
1
.button {
2
font-family: var(--font-sans);
3
font-size: var(--scale-00);
4
font-weight: var(--font-medium);
5
line-height: var(--line-none);
6
padding: var(--size-3) var(--size-5);
7
background: var(--color-blue);
8
border-radius: var(--radius-xs);
9
color: white;
10
}
Copied!
1
const Button = styled.button`
2
font-family: var(--font-sans);
3
font-size: var(--scale-00);
4
font-weight: var(--font-medium);
5
line-height: var(--line-none);
6
padding: var(--size-3) var(--size-5);
7
background: var(--color-blue);
8
border-radius: var(--radius-xs);
9
color: white;
10
`
Copied!
1
<button styles={{
2
fontFamily: 'var(--font-sans)',
3
fontSize: 'var(--scale-00)',
4
fontWeight: 'var(--font-medium)',
5
lineHeight: 'var(--line-none)',
6
padding: 'var(--size-3) var(--size-5)',
7
background: 'var(--color-blue)',
8
borderRadius: 'var(--radius-xs)'
9
color: 'white'
10
}}>
11
Button
12
</button>
13
Copied!
1
<button style="font-family: var(--font-sans); font-size: var(--scale-00); font-weight: var(--font-medium); line-height: var(--line-none); padding: var(--size-3) var(--size-5); background: var(--color-blue); border-radius: var(--radius-xs); color: white;">
2
Button
3
</button>
Copied!
Who's using Pollen
Pollen is used in production by awesome brands and individuals in projects from small to large-scale. Are you using Pollen? Open an issue on Github to add your site to the list.
Corellium
Bokeh
Inventia
Siesta Campers
Faethm
Madeleine Ostoja
Last modified 4d ago
Copy link
Edit on GitHub