KARMA CSS

Pallette

The default colors defined in Karma CSS are as follows:

Required base colours:

white
black
primary
secondary

Cool colours:

aqua
blue
navy
teal
green
olive
lime

Warm colours:

yellow
orange
red
fuchsia
purple
maroon

Other greyscale colours:

silver
gray

Social media colours:

facebook
twitter
linkedin
googleplus
instagram
pinterest

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 white text and facebook background.
<span class="c-white b-facebook">some span with white text and facebook background.</span>

Variables

You can define additional colors in the variables

// colors
$colors: (
        // required base colours
        white:                  rgb(255, 255, 255),
        black:                  rgb(17, 17, 17),
        primary:                  rgb(51, 195, 240),
        secondary:                rgb(240, 240, 240),

        // A nicer colour palette for the web via http://clrs.cc/

        // Cool
        aqua:                   rgb(127, 219, 255),
        blue:                   rgb(0, 116, 217),
        navy:                   rgb(0, 31, 63),
        teal:                   rgb(57, 204, 204),
        green:                  rgb(46, 204, 64),
        olive:                  rgb(61, 153, 112),
        lime:                   rgb(1, 255, 112),
        // Warm
        yellow:                 rgb(255, 220, 0),
        orange:                 rgb(255, 133, 27),
        red:                    rgb(255, 65, 54),
        fuchsia:                rgb(240, 18, 190),
        purple:                 rgb(177, 13, 201),
        maroon:                 rgb(133, 20, 75),
        // Other Greyscale
        silver:                 rgb(221, 221, 221),
        gray:                   rgb(170, 170, 170),

        // Social media, more can be found at https://www.materialui.co/socialcolors
        facebook:               rgb(59, 89, 153),
        twitter:                rgb(85, 172, 238),
        linkedin:               rgb(0, 119, 181),
        googleplus:             rgb(221, 75, 57),
        instagram:              rgb(228, 64, 95),
        pinterest:              rgb(189, 8, 28)
) !default;

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

$colors: (
        ...
        foo:        rgb(0,0,0)
) !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);
}