KARMA CSS

Pallette

The default colors defined in Karma CSS are as follows:


white
black
primary
secondary

For each defined color there are two classes created .b-{color} to set the background and the class .c-{color} to set the color (text).

Example:


some span with primary text and secondary background.

<span class="c-primary b-secondary">some span with primary text and secondary background.</span>

Variables

You can define additional colors in the variables

$colors: (
        white:            rgb(255, 255, 255),
        black:            rgb(0, 0, 0),
        primary:          rgb(51, 195, 240),
        secondary:        rgb(240, 240, 240),
) !default;

Once again an additional color like red below will create the c-red and b-red classes.

$colors: (
        ...
        red:        #FF0000
) !default;

Any valid color can be used hex, rgb, rgba etc.

Functions

There is also a handy function to get the color by name

.some-class {
    background: color(primary);
}