Want to change or disable something in Beard? We make it easy to do so.
Reset & Base Styles
Beard uses a standard reset and has a small amount of sensible base styles to remove the most annoying defaults.
With roots in OOCSS, Beard comes with a small assortment of basic CSS objects like the infamous
You can now opt to pull in a bunch of handy pre-styled widgets and components.
Beard ships with a ton of handy classes to help kickstart development and reduce the redundancy found in large CSS projects.
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
<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
“Beard has without a doubt made my HTML much more crowded and my CSS unreadable. You know. But hey, it’s fast!”
Founder Monarkee, LLC
“Beard is bloated and overweight, it should instead be called ‘fatGuyWithBeard.”
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”