css framework for an app with existing stylesheet

Question

I am building a chrome extension that attaches a widget sort of thing to gmail message. It appears below every email (something like a gmail contextual gadget) when the user is on gmail.com site.

I looked at few css frameworks like twitter bootstrap to use in my app. When I used it in mywidget, it messed with the existing gmail styles because of css class name clash. Is there any other framework that I can use where there would be no name clash? I came across jquery-ui framework. All the classnames here start with .ui-* thereby causing no name clash. Are there any other css frameworks like this with unique class names?

Answer 1

Update 2: Here is a gist of v3.1.1 provided by @GFoley83

Update: The pastebin joined below is the Twitter Bootstrap version 2.0.4

You should definitively use the up-to-date version and compile it yourself.

---

Here is what I did with the bootstrap less files :

.tw-bs {     @import "less/bootstrap.less"; } 

And this is the result : http://pastebin.com/vXgRNDSZ

Demo (jsfiddle)

If you don't like tw-bs you can easily do a find/replace, there shouldn't be any conflict.

Answer 2

I used @Sherbrow solution but had to add the responsive file too.

.my-bootstrap-container {      @import "less/bootstrap.less";      @import "less/responsive.less"; } 

and then run

node_modules/less/bin/lessc demo.less -x > demo.css 

If somebody needs the complete step by step tutorial how to compile bootstrap for your own namespaced container I made a blog post about it http://joomla.digital-peak.com/blog/151-how-to-add-bootstrap-to-your-joomla-2-5-extension

The last part is for Joomla but the beginning can be used globally. It has also a link to the latest compiled bootstrap version 2.3.2. Just make a search and replace for .dp-container.