How to remove unused styles from twitter bootstrap?

Question

My bootstrap stylesheet size is around 120kb.

But I\'m only using 25% of that stylesheet code.

I don\'t want that span* class. I tried it by customizing it in

Answer 1

After an hour of struggling with grunt, I decided to try uncss by itself, and it was much simpler. If you only have a few pages to do, or don't mind doing it manually, I'd recommend doing that.

The uncss page has full instructions, but to summarize:

1. Have node.js installed.
2. npm install -g uncss
3. Copy the sample file from the uncss page and name it anything with a .js extension. I named it uncss.js.
4. Replace the files array with your html files. (It looks like var files = ['my', 'array', 'of', 'HTML', 'files'])
5. Replace the stylesheets array with your stylesheets. (It looks like stylesheets : ['lib/bootstrap/dist/css/bootstrap.css', 'src/public/css/main.css']). Likewise change the value of "csspath" if you need to.
6. Run node uncss.js (or whatever you called your uncss file). It spits out the optimized CSS straight to the command line, so save it to a file with something like node uncss.js > mynewcss.css.

There are a bunch of options to tailor the behavior. I ignored all of them and it worked fine, but they're there if you want them. The page I tested it on went from 138kb to 9kb.