Best way to keep Twitter Bootstrap updated while applying custom css

Question

As asked in the Title, how could I keep a Twitter Bootstrap updated to the latest version from git or another Version Control (if another ones exist) in minified version (both js and css), while applying some custom styles on it such as:

• Border-radius
• Button colors
• Font-family / Font-size
• etc...

And without using the LESS ?

Anyone who have some clues how to minimize the process to achieve this in the proper way ?

I searched a lot on web, to find out the answer, but no results.

Answer 1

Don't modify the bootstrap file. Just create a second file that adds more specific rules for the things you want to modify.

For example:

 #my-app-id .alert {
   background-color: blue;
 }

As long as you have a very specific override it will apply after bootstrap's rule, leaving the other rules in place. Then you can simply upgrade boostrap whenever you want.

Also: Reading less is very simple. It works the way you imagine that nested CSS would. You could simply read through the Bootstrap source to figure out the pieces.

---

Alternatively you can just suck it up and use less. It's really simple that way. Checkout bootstrap's master branch. Change this file:

https://github.com/twitter/bootstrap/blob/master/less/variables.less

Compile and minify the less to css using one of the many many ways of doing so.

Voilá. Complete.

Answer 2

Simple: Don't touch the original source.

Just override the CSS rules you need in a custom file.