mavi-color-scheme
v1.0.0
Published
A SASS plugin that creates color classes of each color you set in the config
Downloads
2
Readme
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 ;)