Include a css framework in a bookmarklet without breaking the original page?

Question

I'm writing an app that will use a bookmarklet for part of its functionality. The bookmarklet will be fairly UI heavy, and so I was hoping to make use of the Twitter Bootstrap framework. However, from the research I've done it looks like you have to carefully write any CSS to ensure that naming clashes don't break the original site.

One possible solution I can envision would be to go through all the CSS in Bootstrap and prepend a long unique id so that instead of just .column, the css selectors would look something like #my_app_00234 .column. This seems very clunky, could break the Bootstrap Javascript, and would have to be redone if we changed up the Bootstrap code we use (perhaps because of reconfiguring the CSS to use different margins and colors).

I also found that HTML5 has the ability to namespace CSS, but it does not have very wide browser support, and we'll need to support some amount of IE.

Any ideas?

Your uncommon ID wrapper name is how this is typically solved. — Diodeus - James MacFarlane, Oct 31 '12 at 15:43
Check this very similar question : http://stackoverflow.com/questions/11813969/css-framework-for-an-app-with-existing-stylesheet — Sherbrow, Oct 31 '12 at 19:14
Ah, excellent. The idea of an import statement in an inner declaration in Less is an elegant solution. — davidscolgan, Oct 31 '12 at 20:08

Include a css framework in a bookmarklet without breaking the original page?

0 Answers0