2.0 - Colors
2.1 - Background Colors
Colors should be pretty and seen from far away.
Default styling |
|
Macmillan purple: |
.mee-purple-bg |
Macmillan purple faded: |
.mee-purple-faded-bg |
Macmillan purple faded: |
.mee-purple-faded-text-bg |
Green text box: |
.mee-green-bg |
Light gray: |
.mee-gray-light-bg |
Medium gray: |
.mee-gray-medium-bg |
Lighter medium gray: |
.mee-gray-medium-lighter-bg |
Dark gray: |
.mee-gray-dark-bg |
Warning: |
.mee-warning-bg |
Error: |
.mee-error-bg |
Black: |
.mee-black-bg |
White: |
.mee-white-bg |
Button blue: |
.mee-button-blue-bg |
Button green: |
.mee-button-green-bg |
<div class="mee-color-sample {$modifiers}"></div>
2.2 - Font Colors
Colors should be pretty and seen from far away.
Default styling |
|
The quick brown fox jumps over the lazy dog |
|
Macmillan purple: |
.mee-purple |
The quick brown fox jumps over the lazy dog |
|
Macmillan purple faded: |
.mee-purple-faded |
The quick brown fox jumps over the lazy dog |
|
Macmillan purple faded text: |
.mee-purple-faded-text |
The quick brown fox jumps over the lazy dog |
|
Green text box: |
.mee-green |
The quick brown fox jumps over the lazy dog |
|
Light gray: |
.mee-gray-light |
The quick brown fox jumps over the lazy dog |
|
Medium gray: |
.mee-gray-medium |
The quick brown fox jumps over the lazy dog |
|
Lighter medium gray: |
.mee-gray-medium-lighter |
The quick brown fox jumps over the lazy dog |
|
Dark gray: |
.mee-gray-dark |
The quick brown fox jumps over the lazy dog |
|
Warning: |
.mee-warning |
The quick brown fox jumps over the lazy dog |
|
Error: |
.mee-error |
The quick brown fox jumps over the lazy dog |
|
Black: |
.mee-black |
The quick brown fox jumps over the lazy dog |
|
White: |
.mee-white |
The quick brown fox jumps over the lazy dog |
|
Button blue: |
.mee-button-blue-color |
Button green: |
.mee-button-green-color |
<p class="{$modifiers}">The quick brown fox jumps over the lazy dog</p>