How to customize Twitter Bootstrap from Illustrator design
I'm working on a new web app and I'd like to create my GUI mockups in Illustrator then implement them in HTML5 and CSS3 using Twitter Bootstrap. I know how to use the CSS classes to create my pages but I'd like to know the process of customizing Twitter Bootstrap to match my mockups as much as possible. I'm talking about colors, typography, margins, padding, borders, button styles and so on. I'd like to create completely different themes for this and every future project I'll be working on.
I'm a programmer but I love GUI design too so I'd like to know how professional designers make all the pieces fit in.
Thanks in advance.
In order to get the most out of Bootstrap (especially the new "mobile first" features) I recommend using your Illustrator file as a jumping off point, rather than a spec.
I agree with the other commenter who suggested leaving the Bootstrap file in place and writing a second file with selective overrides. This is much easier with Bootstrap 3 since the flat design means less to clobber with your own declarations.
I always start with laying out a static version of the pages using plain Bootstrap then methodically cherry picking styles using the inspector (e.g. body backgrounds, typography, colors) in priority order as they stand out to me visually. I usually wind up with something that is close, but slightly different (often better), than the original design.
Good luck! If you don't fight it too hard, Bootstrap offers a lot out of the box.