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?
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!