Beard can be installed via NPM:

npm install beardcss

Or link it from the CDN

<link rel="stylesheet" href="https://unpkg.com/beardcss/dist/beard.css">


Beard's most popular and polarizing feature is its helper classes. Many people feel utility classes like the ones that Beard generates for you leads to bloat and are just as bad as using inline styles. We've found that having a rich set of helper classes makes your projects easier to build, easier to reason, and more bulletproof. This approach is more common in web application contexts, which is where Beard was born out of.

Beard utilizes shorthand for most of the classes it provides. For example, to achieve a margin-top which uses the 2nd step in the spacing scale, use .mt2. The padding version of this would be .pt2. You’ll find that once you master the basic nomenclature, you’ll be able to quickly compose sets of classes together to style elements.

<h1 class="tcg50 ft8 fw6 pv2 ph2">This is your header</h1>

Another example of the Beard nomenclature is font sizing. To use the 7th step in the font scale, you use .ft7. If you wanted to change the size on a different breakpoint, you would use .md-ft9