1

I'm wondering what the best way would be to customize the less files in Bootstrap and, at the mean time, keep it easy to be updated to future Bootstrap versions.

It's straightforward to just modify the less files, but the problem is that when the next version of Bootstrap comes out, it might be painful to upgrade (because all the changes are already deeply mixed with the original sources.)

Another approach would be similar to the open closed principle, that is, keeping the original less files unchanged, and adding my customized less files to overwrite the CSS rules I need. When Bootstrap gets updated, (hopefully) I can simply replace the less files and everything would work magically. However, regardless of the correctness of my assumption, the same CSS rules would be scattered in even more places and hard to manage. Also, the more we overwrite the CSS (not for compatibility or other purposes), the more bandwidth we waste.

I know this highly depends on how the author of Bootstrap would handle the structure of the framework or even the naming of CSS rules, but I'd still like to hear everybody's opinions.

Thanks.

James Allardice
  • 164,175
  • 21
  • 332
  • 312
322896
  • 956
  • 1
  • 9
  • 19
  • 1
    See the solution proposed here: http://stackoverflow.com/questions/10451317/twitter-bootstrap-customization-best-practices – Dele Jul 03 '12 at 17:07
  • Thanks for the link! I ended up doing similar things. That seems to be the best we can do now. – 322896 Jul 05 '12 at 21:14

1 Answers1

2

I worked on a few projects where I had to do pretty much the same thing. Obviously the better choice is, as you said, to write your own less files. Keeping things clean and organized is something that has to do with how you write your own CSS, right ?

My suggestion is to use your own Less files, and then reuse some of the Bootstrap classes to specify your properties.

Also, the bandwidth waste can be minimized, if you use CSS3 inheritance properly.

Cosmin Atanasiu
  • 2,532
  • 3
  • 21
  • 26