In using Twitter Bootstrap, do you download and begin making edits directly to the CSS libraries?

Question

I've downloaded Twitter Bootstrap and went through Twitter Bootstrap Web Development How-To by David Cochran. All is great, now I have a custom design I want to integrate in the best way with Bootstrap.

What is the best approach in integrating a custom design with the twitter bootstrap libraries?

1) Do I go to http://twitter.github.io/bootstrap/customize.html and try to guess which libraries I will use, download and work from that?

2) Do I work off the entire source files, then try to cut down on what's not used? The original bootstrap.css is 6,000 lines.

3.) Do I start with a minimal library and manually add to it as needed?

4.) Am I even supposed to make direct edits to their libraries? Like .thumbnails class has a border, I don't want the border. Do I overwrite with another CSS file, or edit the original line in bootstrap.css .thumbnails class?

Answer 1

The simplest way is to override the Bootstrap styles with your own CSS (your option #4). Your CSS styles can be defined in a separate CSS file or <style></style> markup that follows the bootstrap.css in your HTML...

.thumbnails {
  border:0;
}

Another way is to generate a custom build of the Bootstrap CSS (your option #1) using the http://twitter.github.io/bootstrap/customize.html tool. The downside of this is generator limitations and maintaining your own custom build.

Finally, there is LESS, a dynamic style sheet language that is compiled to CSS. LESS supports the ability to nest selectors and to create variables. You'll find a more extensive thread on LESS here: Twitter Bootstrap Customization Best Practices.

If file size or performance is a concern checkout BootstrapCDN http://www.bootstrapcdn.com which serves the combined Bootstrap minimized from a CDN. The CDN serves up Bootstrap at Bootply which is a tool I built to test, prototype and customize Bootstrap.

Good luck!