Chameleon

Use Chameleon on elements that need to change their style inheriting properties of other elements through jQuery.

Why Chameleon?

Even when not using the real-time feature of Chameleon, it will save you lots of code and classes (e.g. each background color, border color..)

Imagine you have a sidenav that needs to change its color and border-color according to the .top-bar's background-color. You can't simply use a single .red class on these elements because your sidenav can't have a red background. So then you would have to create classes such as .red-bg, .red-text, .red-border and so on for each color of your UI. With Chameleon, this is real-time and much easier, perfect for SPAs.

How to Use

jQuery

$('.chameleon').chameleon({
    mirror: '.top-bar', /* Element from where you want to copy some properties */
    inheritAll: false, /* Default: false. If true, will inherit everything */
    colorContrast: true, /* Default: true. If false, will not adapt text for readability */
    set: {
        /* Property that you want to set followed by the one you want to copy */
        color: 'backgroundColor',
        borderColor: 'backgroundColor'
    }
});

License

You can check out the full license here

This project is licensed under the terms of the MIT license.

Contributors

@jeffersondanielss - Created our super awesome GitHub Page!

@igorantun - Improved README english words.

Disclaimer

This plugin uses attrchange, created by @meetselva