Save time managing and deploying your node.js app

Nodejitsu has joined GoDaddy

We are excited to join GoDaddy to help spearhead their largest Node.js product: Website Builder. Please read our blog post to learn more about customer transition plans and our continued support for Open Source within the node community.

Want to know all the details?
Read the full blog post or read the GoDaddy Announcement.

npmawesome: Keep colors sane in your CSS files with colorguard

About the author

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

This is a guest post from Alex Gorbatchev and Nodejitsu loved what Alex was doing at 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  


# 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


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.