iro-dynamic-css
v1.0.4
Published
iro.js plugin to dynamically update CSS rules whenever the selected color changes
Downloads
37
Readme
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
Install with NPM
$ npm install iro-dynamic-css --saveIf you are using a module bundler like Webpack or Rollup, import iro-dynamic-css into your project after iro.js:
Using ES6 modules:
import iro from '@jaames/iro';
import iroDynamicCss from 'iro-dynamic-css';Using CommonJS modules:
const iro = require('@jaames/iro');
const iroDynamicCss = require('iro-dynamic-css');Download and host yourself
Development version Uncompressed at around 12kB, with source comments included
Production version Minified to 4kB
Then add it to the <head> of your page with a <script> tag after iro.js:
<html>
<head>
<!-- ... -->
<script src="./path/to/iro.min.js"></script>
<script src="./path/to/iro-dynamic-css.min.js"></script>
</head>
<!-- ... -->
</html>Using the jsDelivr CDN
<script src="https://cdn.jsdelivr.net/npm/iro-dynamic-css/dist/iro-dynamic-css.min.js"></script>Usage
Register Plugin
After both iro.js and iro-dynamic-css have been imported/downloaded, the plugin needs to be registered with iro.use:
iro.use(iroDynamicCss);Global Plugin Options
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.
iro.use(iroDynamicCss, {
// Only allow the css to update once in 100 milliseconds
throttle: 100
});ColorPicker Setup
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.
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:
body {
background-color: rgb(255, 0, 0);
}
input, button {
border-color: rgb(255, 0, 0);
color: rgb(255, 0, 0);
}CSS Variables
CSS variables can also be used, provided that the browser supports them. Variables are defined using properties that begin with a double-dash (--).
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:
.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().
Properties
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:
"body": {
"background-color": "red"
},
".example": {
"border": "1px solid red"
}cssText
The current CSS rules formatted as a CSS string. For example:
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.
Methods
setRule
Adds or updates a CSS rule.
Arguments:
{String}selector{String}property{String}value
Example:
var stylesheet = new Stylesheet();
// Set the background of all elements with the CSS class 'example' to red
stylesheet.setRule('.example', 'background', '#f00');