Back 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.
Ingredients:
Instructions:
1. Install node.js
1a. Install Node.js
1b. Go to the terminal window and type:
npm
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)
{grunt.initConfig({
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
grunt.loadNpmTasks('grunt-uncss');
grunt.loadNpmTasks('grunt-contrib-cssmin');
//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.
