Mavi-color-scheme NPM

Mavi-color-scheme

A SASS plugin that creates color classes of each color you set in the config. It creates by default:

Background classes ('.bg-primary', '.bg-secondary', '.bg-tertiary', ...)
Background hover classes ('.bg-hover-primary', '.bg-hover-secondary', '.bg-hover-tertiary', ...) You will see how to configure them later.
Color classes ('.color-primary', '.color-secondary', '.color-tertiary', ...)
Color hover classes ('.color-hover-primary', '.color-hover-secondary', '.color-hover-tertiary', ...)
Border color classes ('.border-primary', '.border-top-primary', '.border-top-secondary', '.border-top-tertiary', '.border-bottom-primary', ...)
In each class defined above you have the ability to modify its color to a darker one or lighter ('.bg-primary-darker-10', '.color-hover-primary-lighter-20'). {class}-{lighter/darker}-{% 10 by 10}

Install

Compile the _mavi-color-scheme.scss file within your SASS project ideally at the beginning or at the bottom of your SASS architecture.

Configuration

You have to create a SASS map called '$mavi-color-map' that should contain the name/type of the color and the color itself. Copy the example and paste it ABOVE the import of 'mavi-color-scheme.scss' (of course there is no need to have both in the same file).

$primary-color  : #3e3e3e;
$secondary-color: #962c33;
$tertiary-color : #d1b723;

$mavi-color-map: (
        primary  : (color: $primary-color),
        secondary: (color: $secondary-color),
        tertiary : (color: $tertiary-color)
);

Usage

<!doctype html>
<html lang="en">
<head>
   <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="bg-primary bg-hover-primary">
                <p>I have a background color set to the primary color</p>
            </div>
        </div>
        
        <div class="row">
            <div class="container-fluid">
                <p>Container fluid (column without width and float)</p>
            </div>
        </div>
        
        <div class="row">
            <div class="medium-offset-left-2 medium-5">
                <p>A 5 wide column moved two columns from left to right</p>
            </div>
        </div>
    </div>
</body>
</html>

###You can modify all vars

Prerequisites

Ruby
Sass

Support

All browsers

Nothing more ;)

@everything-registry/sub-chunk-2142

1.0.0

7 years ago