Nodejitsu

Save time managing and deploying your node.js app

npmawesome: Keep colors sane in your CSS files with colorguard

About the author

Name
Location
Worldwide
nodejitsu nodejitsu

Other popular posts

- Scaling Isomorphic Javascript Code - Keep a node.js server up with Forever - Package.json dependencies done right
- npm cheat sheet - 6 Must Have Node.js Modules
Sign up to our platform for free - get $20 usage

This is a guest post from Alex Gorbatchev and npmawesome.com. Nodejitsu loved what Alex was doing at npmawesome.com and is now supporting the project. Like what you see here? Why don't you contribute on Github?

When a small web project gains traction and more people join and begin editing the CSS files, it becomes progressively more difficult to keep everything consistent. Creative people hand off a new element style to a developer who just joined the team. Our protagonist has been around the block and promptly opens up a favorite color picker and grabs the colors from the JPEG. It looks good. Next day same things happens, and then again and again.

In a short amount of time there are now 20 color values in the CSS that are all factually different from each other yet represent the same color visually. colorguard (Github: SlexAxton/css-colorguard, License: Apache 2) by Alex Sexton helps you maintain the color set that you want, and warns you when colors you've added are too similar to ones that already exist.

npm install colorguard  

Usage

# Just regular
colorguard --file style.css

# pipe a file
cat file.css | colorguard

# Threshold is available via command line
colorguard --file style.css --threshold 3

# The other options are too hard to type, so just pass it a json object
# with `ignore` or `whitelist` properties (overrides `--threshold option`)
colorguard --file style.css --options colorguard.json

# Change the output type to full json (includes stats)
colorguard --file style.css --format json  

Example output

$ colorguard --file test/fixtures/simple.css
Collision: #020202, #000000  
  - #020202 [line: 2] is too close (0.3146196209793196) to #000000 [line: 2, 3, 7, 12, 13, 16, 17]
Collision: #020202, #010101  
  - #020202 [line: 2] is too close (0.1574963682909058) to #010101 [line: 20]
Collision: #000000, #010101  
  - #000000 [line: 2, 3, 7, 12, 13, 16, 17] is too close (0.15712369811016996) to #010101 [line: 20]

$ cat test/fixtures/simple.css | colorguard --format json
{"collisions":[{"colors":[{"rgb":"#020202","lines":[2]},{"rgb":"#000000","lines":[2,3,7,

API

var colorguard = require('colorguard');  
var fs = require('fs');  
var css = fs.readFileSync('./file.css', 'utf8');

var output = colorguard.inspect(css, {  
  // 0 through 100. Lower is more similar. Anything below 3 warns you.
  // 3 is the default threshold, but that's mostly personal opinion
  threshold: 3,

  // This color is just ignored entirely (use with caution)
  ignore: ["#030303"],

  // These color combinations are ignored (usually use this)
  whitelist: [["#000000", "#010101"]]
});

Build Tools

colorguard can also be used in conjunction with Gulp (GitHub: gulpjs/gulp, License: MIT), Grunt (GitHub: gruntjs/grunt, License: MIT) and Broccoli (GitHub: broccolijs/broccoli, License: MIT) build systems:

What Else?

Checkout the runnable example and github example repository.