Philosophy

Beard was built in a production environment which changed often. It emerged from a team that needed a flexible set of styles which could be used to build components of any color variety and style. As styles were abstracted into smaller and smaller chunks, the team discovered that building components became a lot easier to change without breaking every other version of the component in other places on the site. It was formalized into Beard about a year later.

An Example of the Beard Workflow

For example, say you are building a button component for your project. You want buttons to be able to have two background colors and two font colors. You may be tempted to write these classes:


<a class="button dark">Submit Me!</a>

There are a number of problems with this approach. It's hard to know what color "dark" is. Does it have more styles in it? Is it connected to the button class?

In Beard, we would encourage you to use the built-in background and text color helper classes:


<a class="button bgb tcw">Submit Me!</a>

This would apply a black background (.bgb) with white text (.tcw). At first, the naming scheme seems odd, until you realize that Beard tries to follow a mnemonic approach.

Next, let's say you choose to set up some default padding and border styles. Again, using Beard, we can optimize this process by using global helper classes.


<a class="button bgb tcw brdr1 bc1 pv1 ph2 br3">Submit Me!</a>

In addition to the previous styles, this would add a 1px border with the color being the value of $branding-color-1. It would also add vertical padding in the amount of the 1st value in the spacing scale (10px by default), and horizontal padding from the 2nd level in the scale (20px by default). It would finally add a border-radius of 3px.

By now you might be saying to yourself, "So what would be the purpose of having a .button class then? All the styles are in those helper classes." That's exactly what we were thinking! In fact, for some projects you may not need anything more than this. But let's say you now needed to put this button inside another component in your system. You could add a "project-specific" class that can handle that special case:


<div class="card">
    <a class="card__button bgb tcw brdr1 bc1 pv1 ph2 br3">Submit Me!</a>
</div>

The class .card__button could contain rules with absolute positioning, margins, or anything else specific to that "instance" of the component or something that Beard doesn't provide a handy helper for.