Colors

Beauter now supports following 16 color classes to change background, foreground, and bordery colors.

To set the background color

To use the colors as background, simply add their names as a class with an underscore. For example, for purple background, you can use class="_purple". This will automatically set the text color to either white or black on contrast and also same color to the borders.

To set the text color

To use the colors as front text matter, use suffix f- along with the underscore. For example, for purple text, you can have class="_f-purple".

To set the border color

For changing color of the border particularly, its same as above, just use the bc- suffix. For example. class="_bc-purple".

Example

You are free to mix up, for example, see the following jumbo:

<div class="jumbo _bordered _f-teal _bc-black _pink">
Colorful?
</div>

<div class="note _f-yellow _bc-primary _nightblue">
Colorful?
</div>