Color Helpers

Beard's color helpers are generated with !important to provide the ability to override any color values set in your CSS. It's also encouraged to use these helpers in place of modifiers which do the same thing.


Hover, Focus, and Active Color Helpers

Beard's color helper system allows you to use hover, focus, and active colors, using a special syntax. Beard can transition any color to any other color in the system, which makes these helpers real timesavers.

Prefix Purpose Example Demo
: Hover class="tc1 :tcwarning" Sample link hover text
:: Focus class="bcg20 ::bc1"
@ Active class="bgg05 tcg40 @bg1 @tcw" Click Me

Another Example

<div class="df ofh br3">
    <input type="text" class="xbrdr brdr1--top brdr1--bottom brdr1--left bcg20 ::bc1 ph2 ft4" placeholder="Enter your email">
    <button class="dib pv1 ph2 ft4 fw6 bg1 :bg2 ::bg3 @bg4 tcw brdr1 bc1">Click Me</button>

Adding New Color Helpers

This mixin allows you to add colors to be generated along with Beard's default color helpers.

// Tools & Mixins
//-------------------------------------------------------------------------- */
// @import '../../../stylesheets/tools.font-size';

// This has to go between Beard's tool.font-size and helpers.spacing partials
@include new-color('1--light', #85D7FF); // Outputs .bg1--light { background-color: #85D7FF !important }
@include new-color('red', #FF0000); // Outputs .bgred { background-color: #FF0000 !important }

// Helpers
//-------------------------------------------------------------------------- */
// @import '../../../stylesheets/helpers.spacing';

Note: Calling this mixin will only work if you import each of Beard’s partials individually, as recommended by the installation guide.