Colours


Magic Colours

Magic does not have a large range of colours, but this is purely to improve the styling. By default, Magic has the following colours, that can be applied to any element:

default-lighten

default

default-darken-1

default-darken-2

red-lighten

red

red-darken-1

red-darken-2

green-lighten

green

green-darken-1

green-darken-2

yellow-lighten

yellow

yellow-darken-1

yellow-darken-2

blue-lighten

blue

blue-darken-1

blue-darken-2

dark

light

Applying colours

Colours can be universally applied to most components simply by adding one of the class names listed above. Some components have more advanced colour processing (e.g. the navbar) and require different markup. If this is the case, it will be explained on the respective documentation page.

For example, to add a colour to a box:

<div class="box XXX"> <!-- Replace XXX with any class name from above -->
	...
</div>

Magic Gradients

Gradients have become notorious for serving as disgusting background colours and even text colours. Despite this, Magic has three built-in gradients. They don't look like this. Instead, they're neat and modern, designed for smooth integration into your websites. Not many frameworks use aesthetic gradients like Magic. Here are all three, with their class names:

gradient-red

gradient-blue

gradient-green

These are applied to elements in the same way as with regular colours. These also have universal support, but buttons have special styles for them, as well as footers and navbars.

For more detail, delve into the button documentation, but here are three beautiful gradient buttons:

Notes