grunt-colorguard
v0.2.0
Published
Find and catch color collisions at build time.
Downloads
40
Readme
grunt-colorguard
Scan your application's css files for colors that are too-similar and conflict with each other. This task will output an error to Grunt's log if there are any color conflicts in the css files passed to it.
This plugin uses css-colorguard from SlexAxton in a Grunt task.
Getting Started
This plugin requires Grunt ~0.4.0
If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:
npm install grunt-colorguard --save-dev
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-colorguard');
The "colorguard" task
Overview
In your project's Gruntfile, add a section named colorguard
to the data object passed into grunt.initConfig()
.
grunt.initConfig({
colorguard: {
options: {
// Task-specific options go here.
},
your_target: {
// Target-specific file lists and/or options go here.
},
},
});
Options
options.threshold
Type: Number
Default value: 3
How different two colors have to be to trigger a collision. 0 through 100. Lower is more similar. Anything below 3 warns you.
options.ignore
Type: Array
Default value: []
Example value: ['#333333', '#444444']
A list of colors to ignore entirely.
options.whitelist
Type: Array
Default value: [[]]
Example value: [['#010101', '#020202']]
A list of color combinations to ignore.
Usage Examples
Default Options
grunt.initConfig({
colorguard: {
options: {},
files: {
src: ['src/fixtures/testing.css', 'src/fixtures/testing2.css'],
},
},
});
Output:
#010101 [line: 2] is too close (0.1574963682909058) to #020202 [line: 5]
Custom Options
grunt.initConfig({
colorguard: {
options: {
whitelist: [['#010101', '#020202']]
},
files: {
src: ['src/fixtures/testing.css', 'src/fixtures/testing2.css'],
},
},
});
Output:
3 colors analyzed. No collisions detected.
Contributing
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.
Release History
- 0.2 Reports the filename and line number of a collision.
- 0.1 Initial release.