[Rx] Trim CSS Fat Using Win7 Grunt

2016-01-26_113926Back in the day, you didn’t have to worry about “devices.” Now, we’re all modern. We have stylish CSS that makes HTML look hipster-good on any screen size you can imagine. To do all this you need css code, lots of code.

You  can punch the code-masters ticket and roll your own CSS or you can attach everything to a CSS framework (Bootstrap, Foundation, etc.).

These frameworks don’t know what you want, so they give you EVERYTHING. You have a screen the size of you large toenail? Not a problem, but the typical websites uses less than 80% of all the framework css code. 

The price you pay for a kitchen sink framework is speed. Luckily, if you have a need for speed, you can trim out the CSS fat using unCSS.



1. Install node.js

1a. Install  Node.js

1b. Go to the terminal window and type:


If you get a usage message, it installed.


If you get an error message:

Error: ENOENT, stat 'C:\Users\username\AppData\Roaming\npm'

You need to create the npm directory manually:

cd Users\username\AppData\Roaming
mkdir npm

2. Install Grunt and unCSS

2a. Install  Grunt from command line:

npm install -g grunt-cli

2b. Install Grunt in Local Directory. Go to the folder that has your main html (index.html).

Install local Grunt and unCSS and CSSmin from command line:

npm install grunt --save-dev

npm install grunt-uncss grunt-contrib-cssmin -save-dev

3. Configure gruntfile.js and Create Shrunken CSS File

3a. Now, you need to give instructions to grunt. Create a new file in the same directory as index.html and call it: gruntfile.js.

Add these lines and save:

module.exports= function (grunt)


uncss:{dist:{files: [{src: 'index.html', dest: 'css/main.css' }]}},

cssmin:{dist:{files: [{src: 'css/main.css', dest: 'css/main-min.css' }]}}});

//Load the plugins

//Default tasks
grunt.registerTask('default',['uncss', 'cssmin']);


In gruntfile.js file, you may need to edit the files (index.html, main.css, etc.) and directory name (/css) to match your own.


After you’ve saved the gruntfile.js, the directory folder should look something like the above. 

Warning: The way that the files are setup now, if you have the file css/main.css, it will be overwritten.

3b. Run from the command line:  grunt 

3c. The unCSS file is: css/main.css.

I only ran this on a simple index.html file. I don’t know if this will run the unCSS for all the .html files in the folder for an entire multi-page site.