How to properly integrate HTML5 Boilerplate with Twitter Bootstrap?

Question

In my Play 2.0 project I already have Bootstrap integrated (as the less files, Play can compile them in the fly) but now I found Boilerplate and I think it would be a nice idea to make use of it also.

After a bit of googling I found this: http://www.quora.com/Is-Bootstrap-a-complement-OR-an-alternative-to-HTML5-Boilerplate-or-viceversa

So, looks like integration should be possible, and there are even 2 projects which try to do that. The only problem is that they do completely different things and I'm not sure which one is correct.

https://gist.github.com/1422879 in its current state seems to just ignore styles.css file coming from Boilerplate. It's renamed to h5bp.css, but I don't see h5bp.css included anywhere.

https://github.com/elgreg/html5-boilerstrap on the other hand uses both of them, just splitting styles.css file into two parts (h5bp_normalize.css and styles.css, bootstrap.css is included between them). But aren't there any conflicts between Boilerplate and Bootstrap this way?

So I'm a bit lost. What is the proper way of doing things in this case?

Kleinstein

What part of the html5Boilerplate exactly are you looking to integrate? – Fig

Answer 1

Just use Initializr, it's the semi-official solution and it has a huge set of options too. Bootstrap + H5BP is supported out of box!

http://www.initializr.com/

Acentric

Answer 2

I've removed reset styles from twitter bootstrap(by removing less @import statement) and pasted it into html5-boilerplate(in user styles section). Worked fine.

Darrendarrey

This sounds nice :) But what worries me is one of the comments under the code snippet (link in first post) : "I don't think combining the CSS is going to work that well because Bootstrap needs its reset to remove default heading margins and list padding. That is an assumption in the rest of the code (for was last time I checked), which can affect things like the topbar and tabs/pills." How extensively were you using Bootstrap with your modification? – Kleinstein

I've used topbar, headings and forms, alert-messages. You are right, I've just looked to stylesheet and I found that I actually added rule .alert-message p{ margin-top: 0}. So some hacking with resets will be needed with such integration. – Darrendarrey

Answer 3

• Workless http://workless.ikreativ.com is another Bootstrap/H5BP combo.
• the Gist https://gist.github.com/1422879 is H5BP + twitter bootstrap integration

Emlynne