Color

THE BUTTER

.red .yellow .green .blue .red-light .yellow-light .green-light .blue-light .light .lighter .grey .grey-light .grey-dark
.label .label-(color)
.box .box-(color)
.box-white-normal .box-white-dark
.boxed
.box-shadow-none .box-shadow-shallow .box-shadow-normal .box-shadow-deep .box-shadow-deeper

The color collection in LESS variables look like this

@colors: {
	red: 		@red;
	yellow: 	@yellow;
	green: 		@green;
	blue: 		@blue;
	red-light: 	@red-light;
	yellow-light: 	@yellow-light;
	green-light: 	@green-light;
	blue-light: @blue-light;
	light:  	@text-light;
	lighter: 	@text-lighter;
	grey: 		@grey;
	grey-light: @grey-light;
	grey-dark: 	@grey-dark;
};

The following styles loop through the collection to define new rules. Adding more to the collection, creates new rules. (And removing any, also removes rules).

Text

.red

Red text

.red-light

Red light text

.yellow

Yellow text

.yellow-light

Yellow light text

.green

Green text

.green-light

Green light text

.blue

Blue text

.blue-light

Blue light text

.light

Light text

.lighter

Even lighter text

.grey

Grey text

.grey-light

Grey light text

.grey-dark

Grey dark text

Label

The foreground color of the label is decided between @white, or @text-color based on a contrast threshold of the color. The threshold by default is 43%. It can be modified through @front-color-contrast

Contrast is not easy to coin. Read about LESS contrast function.

Padding is set by @label-padding. Border radius is set by @label-radius, if @enable-rounded is set to true. For white rules, border size is set by @box-border.

Box

The foreground color is decided the same way as with labels.

Padding is set by @box-padding. Border radius is set by @radius, if @enable-rounded is set to true. For white rules, border size is set by @box-border.

.box

Simple box

.box-yellow

yellow

.box-yellow-light

yellow light

.box-red

red

.box-red-light

red light

.box-green

green

.box-green-light

green light

.box-blue

blue

.box-blue-light

blue light

.box-grey

grey

.box-grey-dark

grey dark

.box-grey-light

grey light

.box-white

white (with grey-light border)

.box-white-dark

white dark (extra, with grey-dark border)

.box-white-normal

white normal (extra, with grey border)

Shadows

The shadow collection in LESS variables look like this (you can add or remove from the list)

@shadows: {
	none: none;
    shallow: 0 0 5px 0 rgba(0,0,0,.1); 
    normal: 0 2px 2px 0 rgba(@black,0.14), 0 1px 5px 0 rgba(@black,0.12), 0 3px 1px -2px rgba(@black,0.2);
    deep: 0 6px 10px 0 rgba(@black,0.14), 0 1px 18px 0 rgba(@black,0.12), 0 3px 5px -1px rgba(@black,0.3);
    deeper: 0 16px 24px 2px rgba(@black,0.14), 0 6px 30px 5px rgba(@black,0.12), 0 8px 10px -5px rgba(@black,0.3);
};

The following is a loop of these values to broduce .box-shadow-value.

.box-shadow-none

Remove shadow

.box-shadow-shallow

Shallow

.box-shadow-normal

Normal

.box-shadow-deep

Deep

.box-shadow-deeper

Deeper

Bonus: Boxed

Define a list with .boxed, and the li elements will inherit .box. Here is an example combining .row-spaced.uc-6 with .boxed

<ul class="boxed row-spaced uc-6">
	<li>Box Element</li>
	<li class="box-yellow">Element</li>
	<li>Element</li>
	<li>Element</li>
	<li class="box-red">Element</li>
</ul>

Box Element
Element
Element
Element
Element

Less functions

Adding a new color to the color collection produces new color rules for text, labels and boxes

/* in sh._vars.less color collection */
@colors: {
	...
	pink: #e611a6;
};

<div class="spaced">
	<span class="pink">Pink text</span> <span class="label label-pink">Pink label</span>
</div>
<div class="box box-pink">Pink box</div>

Pink text Pink label

Pink box

Adding a new shadow definiton to the shadows collection, produces a new rule for the shadow.

/* in sh._vars.less shadow collection */
@shadows: {
...
	inner: inset 0 0 2px 2px rgba(@black, 0.5);
};

<div class="box box-shadow-inner">Inner shadow</div>

Inner shadow

Using .colorbox(color) uses contrast LESS function to generate front color.

/* This produces 
background-color: #883373;
color: contrast(#883373, @text-color, @white, @front-color-contrast) */
.myclass {
	.colorbox(#883373);
}

This is myclass