Best way to keep Twitter Bootstrap updated when using custom css

Question

As the title says, how can I save the Twitter boot lot to the latest version from git or other version control (if there are others) in the mini version (both js and css), applying some custom styles on it, for example:

• Radius border
• Button color
• Font Family / Font Size
• etc...

And without using LESS?

Anyone with any tips on how to minimize the process to achieve this properly?

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

Answer 1

Do not modify the boot file. Just create a second file that will add more specific rules for the things you want to change.

For instance:

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

If you have a very specific override, it will apply after the load rule, leaving the other rules in place. Then you can just upgrade boostrap whenever you want.

Also: Reading less very simple. It works the way you think nested CSS will be. You can simply read the Bootstrap Source to find out the parts.

---

Alternatively, you can just suck it and use less. It really is. Bootstrap control branch. Modify this file:

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

Compile and reduce the css value using one of many ways to do this.

Voila. Complete.

Answer 2

Simple: do not touch the original source.

Just override the CSS rules you need in the user file.

Answer 3

As described in the new documentation for the new 3.x branch , you can do this by creating a new CSS file:

To remind, here is the basic workflow:

• For each element that you want to customize, find its code in the compiled Boot CSS. Copy and paste the selector for the component as is.
• Add all your custom CSS to a separate stylesheet using selectors that you just copied from the Bootstrap source. No need for extra classes or use! important here.
• Rinse and repeat until you are satisfied with the settings.

The best way is to create a new class name and use it together . For instance:

 <button type="button" class="**btn btn-ttc**">Save changes</button> 

It uses the btn source class from the bootstrap and adds a personalized btn-ttc . This way you can add a new CSS file, include it in your project and then create this class:

 /* Custom button -------------------------------------------------- */ /* Override base .btn styles */ /* Apply text and background changes to three key states: default, hover, and active (click). */ .btn-ttc, .btn-ttc:hover, .btn-ttc:active { color: white; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #007da7; }