Chameleon

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

PS: Deprecated. I don't recommend using Chameleon anymore because that are available techniques outside such as nesting that are better for creating themes. You can still use Chameleon to real-time purposes, but I recommend something without 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