-1

I've been looking for ways to efficiently override Bootstrap CSS. I've seen a number of questions and their answers, two notable ones being the following:

But I don't believe they address my specific use. I'd also appreciate a critique of my thought process, and if it's even worth the effort. Here goes.

Here's what I'd like to be able to do:

  1. Use Less/Sass to take advantage of Bootstrap's builtin variables and make framework-wide changes such as the navbar height or the collapse breakpoint. These are very difficult to do with CSS, but very easy to do with Less/Sass, so you can see the advantage here.
  2. Use Bootstrap via CDN. Many benefits to this, from performance to reliability.
  3. Link to (host) a single stylesheet that includes my only my changes. This reduces file size as well as CSS redundancies, keeping only the necessary overrides. It also improves performance for both the client and server.

If I were simply to edit the Less files and recompile them, I'd basically be hosting Bootstrap myself, no need for a CDN. But if I hosted Bootstrap via CDN and only hosted my own changes, the only way I know of accomplishing this is with plain CSS, thus losing the advantage of Less variables.

Thoughts?

Community
  • 1
  • 1
Marcus McLean
  • 1,306
  • 2
  • 13
  • 24

1 Answers1

0

I would import bootstrap via CDN then have a seperate css file (generated from less) that uses selectors that are more specific than the bootstrap ones.

The only question then is using less variables. If they are all in a seperate file, import that. or you may have to bite the bullet and copy them manually into your own file. That may be ok since you're overriding the css anyway.

Make sure you set the version of bootstrap in the CDN link instead of using latest. otherwise a new version may come out and break things.

drawde83
  • 129
  • 2
  • 13