ifonefox/pollen-docs

Pollen's documentation, hosted by GitBook

description	cover	coverY
Utility-first CSS for the future	.gitbook/assets/cover wide.jpg	19.899888765294783

Introducing Pollen

Pollen is a standards-driven, utility-first CSS library inspired by Tailwind. It generates a configurable 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're easy to customise and extend, and they're globally responsive. They don't require preprocessors, class naming conventions, or any new non-standard syntax

{% tabs %} {% tab title="CSS" %}

.button {
   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;
}

{% endtab %}

{% tab title="CSS-in-JS" %}

const Button = styled.button`
   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;
`

{% endtab %}

{% tab title="Object styles" %}

<button styles={{ 
   fontFamily: 'var(--font-sans)',
   fontSize: 'var(--scale-00)',
   fontWeight: 'var(--font-medium)',
   lineHeight: 'var(--line-none)',
   padding: 'var(--size-3) var(--size-5)',
   background: 'var(--color-blue)',
   borderRadius: 'var(--radius-xs)'
   color: 'white'
}}>
  Button
</button>
  

{% endtab %}

{% tab title="Inline Styles" %}

<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;">
  Button
</button>

{% endtab %} {% endtabs %}

{% embed url="https://codepen.io/madeleineostoja/pen/LYjGjGa" %}

Who's using Pollen

Pollen is used extensively in production and actively maintained by the photo nerds Bokeh. It's also used by many other awesome teams in projects from small to large-scale. Are you using Pollen? Open an issue on Github to add your site to the list.