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 bootstrap customize page.

I unchecked grid system, But I still see span1 - span12 class in forms, tables and responsive layouts.

Can someone help me to remove those codes?

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

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 3

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 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.