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.

Answer 3

2016 Update: A future way to mitigate this issue (rather than having to recompile bootstrap) is to take advantage of web components, specifically shadow DOM. This allows your app to be self contained (almost like an iFrame) without the web browser having to open a separate page / losing the ability to communicate between pages.

say your component is contained in <div id='plugin'>...</div>

You can move what's inside that div to a tag in your head, eg.

<template id="template"><!--Your Code Here--></template>

Your template can include all the bootstrap link tags and js you want. Then in your javascript/bookmarklet, you can write

var pluginRoot = document.querySelector('plugin').createShadowRoot();
var template = document.querySelector('#template');
var clone = document.importNode(template.content, true);
pluginRoot.appendChild(clone);

You can read a lot more about Web Components (along with Shadow DOM) here: http://webcomponents.org/articles/introduction-to-shadow-dom/

Answer 4

I started off using jquery ui - http://jqueryui.com/ because it has its own css classes which don't clash with gmail. YUI is another such framework that I found. But Sherbrow showed how I can use bootstrap css with our own unique css style names.

Answer 5

The currently accepted answer did not render forms correctly (using SASS and bootstrap 4 beta). The following works for me:

.bootstrap {
    @import 'bootstrap-4.0.0-beta/scss/bootstrap.scss';

    box-sizing: border-box;
}

The box-sizing is important, because, when compiling your SASS stylesheet, the following will be generated.

.bootstrap html {
  box-sizing: border-box;
  ...
}

I.e. the box-sizing property will be placed on an html element inside an element with class="bootstrap" - which of course will not exist. There may be other styles on html and body that you may want to manually add to your styles.

And now you can place content styled using bootstrap inside a bootstrap class:

<div class="bootstrap">
  <div class="container">
    ...
  </div>
</div>