CODEWITHSUNDEEP
twitter-bootstrap
aspirinemaga
aspirinemaga

Reputation: 3937

Best way to keep Twitter Bootstrap updated while applying custom css

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:

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.

Upvotes: 4

Views: 1279

Answers (3)

Jazzo
Jazzo

Reputation: 120

As described in the new documentation about the new 3.x branch you can do it by creating a new CSS file:

To recap, here's the basic workflow:

  • For each element you want to customize, find its code in the compiled Bootstrap CSS. Copy and paste the selector for a component as-is.
  • Add all your custom CSS in a separate stylesheet using the selectors you just copied from the Bootstrap source. No need for prefacing with additional classes or using !important here.
  • Rinse and repeat until you're happy with your customizations.

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

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

It uses the original "btn" class from bootstrap and add the personalized "btn-ttc". So you can add a new CSS file, include it in your project and then create that 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;
}

Upvotes: 1

Chris Pfohl
Chris Pfohl

Reputation: 19064

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.

Upvotes: 5

Adrian
Adrian

Reputation: 2388

Simple: Don't touch the original source.

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

Upvotes: 3

Related Questions