Beard has a powerful and time-saving color helper system. These helpers allow you to register your branding colors in 5 different spots and have background, text, and border color helpers automatically generated. It also provides helpers for common message types. Thirdly, it gives you access to a set of grayscale helpers. Using these can help you standardize your colors across a project. Lastly, included are helpers for hover, focus, and active states.

Note: Each color in the system is configurable by overriding the setting found in _settings.colors.scss.

Background Color Helpers

Step Class Example
1 .bg1
2 .bg2
3 .bg3
4 .bg4
5 .bg5
Black .bgb
White .bgw
Success .bgsuccess
Warning .bgwarning
Danger .bgdanger
Gray 5 .bgg05
Gray 10 .bgg10
Gray 20 .bgg20
Gray 30 .bgg30
Gray 40 .bgg40
Gray 50 .bgg50
Gray 60 .bgg60
Gray 70 .bgg70
Gray 80 .bgg80
Gray 90 .bgg90

Text Color Helpers

Step Class Example
1 .tc1 Sample Text
2 .tc2 Sample Text
3 .tc3 Sample Text
4 .tc4 Sample Text
5 .tc5 Sample Text
Black .tcb Sample Text
White .tcw Sample Text
Success .tcsuccess Sample Text
Warning .tcwarning Sample Text
Danger .tcdanger Sample Text
Gray 5 .tcg05 Sample Text
Gray 10 .tcg10 Sample Text
Gray 20 .tcg20 Sample Text
Gray 30 .tcg30 Sample Text
Gray 40 .tcg40 Sample Text
Gray 50 .tcg50 Sample Text
Gray 60 .tcg60 Sample Text
Gray 70 .tcg70 Sample Text
Gray 80 .tcg80 Sample Text
Gray 90 .tcg90 Sample Text

Border Color Helpers

Step Class Example
1 .bc1
Bordered Text
2 .bc2
Bordered Text
3 .bc3
Bordered Text
4 .bc4
Bordered Text
5 .bc5
Bordered Text
Black .bcb
Bordered Text
White .bcb
Bordered Text
Success .bcsuccess
Bordered Text
Warning .bcwarning
Bordered Text
Danger .bcdanger
Bordered Text
Gray 5 .bcg05
Bordered Text
Gray 10 .bcg10
Bordered Text
Gray 20 .bcg20
Bordered Text
Gray 30 .bcg30
Bordered Text
Gray 40 .bcg40
Bordered Text
Gray 50 .bcg50
Bordered Text
Gray 60 .bcg60
Bordered Text
Gray 70 .bcg70
Bordered Text
Gray 80 .bcg80
Bordered Text
Gray 90 .bcg90
Bordered Text

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 .tc1 .:tcwarning Sample link hover text
:: Focus .tcg60 .::tc1
@ Active .bgg05 .tcg40 .@bg1 .@tcw Click Me