Why does Bootstrap include a bootstrap-theme file?

Question

The question is similar to this one: How to use bootstrap-theme.css with bootstrap 3? but not a duplicate. I'm interacting with Bootstrap at .less level and recompiling it every time I make a change.

As I say, I'm developing a Bootstrap theme with less. I'm editing bits here, changing variables there. Cutting out unused components. Putting most of my new CSS into /less/theme.less. At the end of it, I'm left with two css files: /dist/css/bootstrap.css and /dist/css/bootstrap-theme (Oh okay, yes... and their .min.css counterparts, you pedantic knowitall)

What is the point of splitting this output into two separate files? They've both deviated from the "stock" settings (just altering less/variables.less will do that) so isn't this a duplication of effort? Isn't this the extra request that we (developers who think they know best) are constantly telling juniors should be avoided at any cost?

When developing custom Bootstrap themes, these are my options:

1. Ditch the included theme.less and include my alterations in the main Bootstrap build,
2. Alter nothing in the core bootstrap build and override things in my theme.less,
3. Continue what I'm doing, altering both and using two CSS files.

What should I do and why?

On a related note, should I not be building Bootstrap from the files that you get if you click Download Bootstrap? In hindsight these seem to be geared toward building out the Bootstrap documentation (there's a ton of Jekyll nonsense in there that I just ditch). Is there a "clean" version of Bootstrap that is for people wanting to customise Bootstrap without the documentation?

Answer 1

I started a bug on this and got this response:

We're not separating the docs into another repo because it makes it much more painful/difficult to keep them up-to-date with changes to the code.

Pretty pathetic IMO but it's not my project to manage. After an hour of asking I went with combining the first two options. I added the following to the very last line of bootstrap.less:

@import "theme.less"; 

To make that work in reality, there are a couple of alterations required:

• Clean up the Gruntfile to stop building the separate theme
• Removing Bootstrap imports from the top of the theme.less file (causes a loop if you don't)

But the output is as desired. One fat bootstrap.css file and a slightly slimmer bootstrap.min.css file.

I still don't feel like hacking the whole build process is a very sustainable method of using Bootstrap as a starter theme. Very open to better solutions.

---

In another project I have dumped the final import and I'm just doing all my work in bootstrap.less. Sure, there are 50 lines at the top that are a load of boilerplate imports but it means I'm not hopping between files nearly as much. I know what's being included all the time.

I also removed grunt and went with my own fabric solution that was already used in my existing workflow. As ever, your mileage may vary. You're not me.