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.

Answer 2

Are you more concerned about the impact of the file size on the loading time for your users? Or want to make it easier for you to read/understand the CSS if it's shorter?

Either way, I suggest you don't spend too much time worrying about removing every single extra CSS style. Uncheck the elements of Bootstrap that you don't plan on using and download the customized version. For the live/production version of your site, use a minimized version of the CSS which will further reduce the file size.

If you just want to keep the code more simple for your use, that's definitely understandable but the Bootstrap team has done a great job of organizing it. Spend a little time with it.

Consider that trying to completely remove all span* references will remove functionality that you might use like controlling the width of form fields. These can be very useful, even if you're not using the grid.

Answer 3

I got exactly the same problem!

I wrote a tool to remove all un-used css style rules in bootstrap.css

As a result, 59% rule has been removed, css file size reduced from 121KB to 59KB and increased about 5 score when testing with Google PageSpeed

The source code is here css-optimizer

Answer 4

I assume that twitter bootstrap heavily relies on those span* classes. When I only toggle the "table" checkbox under "Base CSS", I still get span* classes in the compiled css, because they are rendered anyway. Take a look at https://github.com/twitter/bootstrap/blob/master/less/tables.less:

// R.185: Change the column widths to account for td/th padding
.table td,
.table th {
  &.span1     { .tableColumns(1); }
  &.span2     { .tableColumns(2); }
  &.span3     { .tableColumns(3); }
  &.span4     { .tableColumns(4); }
  &.span5     { .tableColumns(5); }
  &.span6     { .tableColumns(6); }
  &.span7     { .tableColumns(7); }
  &.span8     { .tableColumns(8); }
  &.span9     { .tableColumns(9); }
  &.span10    { .tableColumns(10); }
  &.span11    { .tableColumns(11); }
  &.span12    { .tableColumns(12); }
}

So I'm afraid you should cannot remove them with the customizer, only manually.

Answer 5

I have a template using Bootstrap 2, which is the required system for Joomla. I just did this manually and found it easy to do. The Bootstrap CSS file is very nicely constructed and well ordered in sections. I removed the entire contents of the file to bootstrap_unused.css and then also copied that to bootstrap_original.css.

I then cut out from bootstrap_unused.css what I knew was in use, being careful to preserve the order, and pasted it back in. Most of it worked first time and reduced the file size from 144KB to 14KB. I then needed to add some bits and pieces back in for forms etc. and ended up at 30KB.

If I need any other features in the future, I can pull them back in from bootstrap_unused.css and I always have bootstrap_original.css for reference.