What is the difference between Twenty eleven & roots framework?

It seems like there are two questions here: “how do I include Boilerplate/Bootstrap in Twenty Eleven?” and “how should I choose between these two theming options?“. I’ll try to answer both:

Boilerplate/Bootstrap in Twenty Eleven

I’ll start by saying this probably isn’t a good idea. With that said, the easiest way would be to

  • make a child theme of Twenty Eleven
  • Download Boilerplate and/or Bootstrap and place their img/css/js files inside the child theme
  • override the header.php in the child theme to include the css files you’re interested in and the modernizr script from Boilerplate
  • override the footer.php to include the JavaScript that you’re interested in

After this point, you would need to begin modifying pieces inside of Twenty Eleven so they can take advantage of these two frameworks. How you would do this would depend entirely on what you were trying to build, and it’s the sort of thing you would need to ask individual (and quite specific) questions about.

Basically, just adding Boilerplate and Bootstrap to Twenty Eleven won’t do much. What will happen is that they’ll override some CSS definitions and make Twenty Eleven look broken until you fix it (this is especially true if you include Boilerplate’s CSS after the default Twenty Eleven style.css file). They could help when it comes to styling custom content, or pages that you modify quite a bit, but would require a lot of work.

My guess is that, if you want to use Bootstrap, or you like the way Boilerplate resets things and provides best-practices, you’re better off just making your own custom theme, or using Roots. If you just want to make Twenty Eleven easier to modify, you might want to look at including the pieces of Boilerplate/Bootstrap into your child theme’s style.css as you need them.

Choosing between Twenty Eleven and Roots

The Twenty Eleven theme is a great showcase of WordPress’ features, but it makes a lot of assumptions in the way its put together. As suggested in comments, you could just create a child theme of Twenty Eleven and start changing things (adding HTML5 Boilerplate pieces, for example), but this would require a good deal of work. The main problem with this idea is that Twenty Eleven is a complete visual as well as structural theme.

Roots on the other hand is just a structural theme. It starts you off with a lot of the markup and WordPress functionality that you need, but doesn’t make nearly as many assumptions about how you want your design to work. The gotcha here is that you might end up needing to re-implement functionality or styles that already exist in the Twenty Eleven.

At work we have our own base theme which is similar to, but less robust than, Roots. Partly, our theme is less robust on purpose. We don’t want to use child themes because we don’t want the style or structure of our custom designs changing out from under us in the case of an upgrade. I definitely prefer not to touch the themes included with WordPress and just build my own themes from as close to scratch as is feasible.

The bottom line? With Twenty Eleven you would need to design by changing design that already exists, and with Roots you would be building up from your own design. There’s no right or wrong here, it’s just a matter of preference.