iro-dynamic-css

An iro.js plugin that dynamically updates CSS styles to match the currently selected color

Features | Installation | Usage | Stylesheet API

Features

* Tiny: Just 4kb minified, or less than 1kB minified + gzipped.
* Consistent: Works across all modern browsers, down to IE 9.
* CSS Variables: CSS variables are available in browsers that support them.

Installation

$3

``bash
$ npm install iro-dynamic-css --save
`

If you are using a module bundler like Webpack or Rollup, import iro-dynamic-css into your project after iro.js:

Using ES6 modules:

`js
import iro from '@jaames/iro';
import iroDynamicCss from 'iro-dynamic-css';
`

Using CommonJS modules:

`js
const iro = require('@jaames/iro');
const iroDynamicCss = require('iro-dynamic-css');
`

$3

Development version

Uncompressed at around 12kB, with source comments included

Production version

Minified to 4kB

Then add it to the of your page with a




`

$3

`html

`

Usage

$3

After both iro.js and iro-dynamic-css have been imported/downloaded, the plugin needs to be registered with iro.use:

`js
iro.use(iroDynamicCss);
`

$3

Global config options can optionally be passed to the second parameter of iro.use.

The only current option is throttle, which can be used to limit how regularly the CSS rules are updated. The value passed to throttle is the minimum time between CSS updates in milliseconds. You can read more about throttling here

Since the color picker updates the selected color very quickly, throttling stylesheet updates can be helpful to reduce lag if you are changing a lot of styles at once.

`js
iro.use(iroDynamicCss, {
// Only allow the css to update once in 100 milliseconds
throttle: 100
});
`

$3

The plugin adds a new css config option to iro.ColorPicker, dynamic CSS rules can be passed to this option as a CSS "template" formatted as a JavaScript object.

`js
var colorPicker = new iro.ColorPicker([
width: 320,
color: {r: 255, g: 100, b: 100},
// ... etc
css: {
'body': {
'background-color': '$color'
},
'input, button': {
'border-color': '$color',
'color': '$color'
}
}
])
`

$color is treated as a variable representing the currently selected color. To demonstrate, let's say the currently selected color is rgb(255, 0, 0). Using the template above, the CSS applied to the page would look something like this:

`css
body {
background-color: rgb(255, 0, 0);
}

input, button {
border-color: rgb(255, 0, 0);
color: rgb(255, 0, 0);
}
`

$3

CSS variables can also be used, provided that the browser supports them. Variables are defined using properties that begin with a double-dash (--).

`js
var colorPicker = new iro.ColorPicker([
width: 320,
color: {r: 255, g: 100, b: 100},
// ... etc
css: {
':root': {
'--selected-color': '$color'
}
}
])
`

By adding the variables to the :root psuedo-class, we ensure that they are globally accessible so you can reference them anywhere in your project's CSS:

`css
.example {
background-color: var(--selected-color);
}
`

Stylesheet API

Each colorPicker has its own stylesheet, accessible from its stylesheet property. After the plugin is registered, the stylesheet constructor is also available globally on iro.Stylesheet().

$3

#### enabled

Boolean indicating whether this stylesheet's rules should be applied to the page. This is readable/writable, and defaults to true.

#### css

The current CSS rules formatted as a JavaScript object. For example:

`js
"body": {
"background-color": "red"
},
".example": {
"border": "1px solid red"
}
`

#### cssText

The current CSS rules formatted as a CSS string. For example:

`css
body {
background-color: red;
}
.example: {
border: 1px solid red;
}
`

#### sheet

A reference to the stylesheet's CSSStyleSheet object.

#### rules

A reference to the stylesheet's CSSRuleList object.

$3

#### setRule

Adds or updates a CSS rule.

Arguments:

* {String} selector
* {String} property
* {String} value

Example:

`js
var stylesheet = new Stylesheet();
// Set the background of all elements with the CSS class 'example' to red
stylesheet.setRule('.example', 'background', '#f00');
``

© James Daniel