A CSS framework for people with better things to do

Beard is an extremely pragmatic and utility-focused CSS framework. Actually, don't call it that. Beard focuses on developer speed, maintenance, and ease-of-use, versus "pretty" markup.


How To Learn Beard

The best way to learn Beard is to use it. It relies on shorthand for most of the classes it provides. For example, take the margin spacing helpers. To achieve a margin-top which uses the 2nd step in the spacing scale, use .mt2. For padding, it's .pt2.

<h1 class="heading heading1 pv2 ph2">This is your header</h1>

Another example is the font sizing helpers. To use the 7th step in the font scale, you would use .ft7, or if you wanted to change the size on a different breakpoint, you would use something like .md-ft9


“Beard has without a doubt made my HTML much more crowded and my CSS unreadable. You know. But hey, it’s fast!”

David Hemphill

Founder Monarkee, LLC

“Beard is bloated and overweight, it should instead be called ‘fatGuyWithBeard.”

Andrew Del Prete

Big Boss Man @ Musicbed

“If you aren’t using Beard, it’s probably because you are working with one of the good frameworks out there. Good for you. #stayAway #flatCssIsALie”

Jaymes Downer

#Cashmoney Connoisseur