27

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?

Community
  • 1
  • 1
Oli
  • 235,628
  • 64
  • 220
  • 299

2 Answers2

5

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.

Oli
  • 235,628
  • 64
  • 220
  • 299
4

Bootstrap 3 took an approach to strip opinionated style from all of its components. This was because developers were having to over write style and add their own which was causing bloated CSS. It is much better to start with a flat design that can be used as a foundation and build on top of that as you wish.

Thus enters theme.less, which is a template. It is a starting point for creating a unique theme. If you include it in your bootstrap.less build you will get the default Bootstrap theme we are all use to seeing (i.e. slightly raised buttons, gradients etc..). This paired with your variables.less file give you complete control over the presentation style of your UI.

The typical workflow for using Bootstrap with LESS is to consume it with Bower. The Bower site will explain how to install bower with npm. Assuming you have bower installed, use your command line app of choice and cd into/your/root/path/. Run the following:

bower install bootstrap --save

Bower installs all packages into a bower_components/ directory. You will never alter files installed by Bower. You should copy three files from the Bootstrap LESS files into your own style folder. These are variables.less, bootstrap.less and theme.less. You can check out my repo I set up as a staring point for all this.

The bootstrap.less file you copied should be altered so the file paths for all the Bootstrap @import components reference the ones installed by Bower. You can then @import your copies of theme.less and variables.less into bootstrap.less. Make changes as you wish and compile your theme.

When you want to update bootstrap to the latest version you can simply use bower to do so and make any tweaks to your copied files as needed to make sure they match up with anything changed in a new release.

I hope that answers your question.

Joshua Pekera
  • 525
  • 5
  • 8