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?

For bootstrap, using less, have you thought about encapsulating the whole framework in a class, and then use it on the page by wrapping all HTML in this class ? — Sherbrow
– Sherbrow, Commented Aug 5, 2012 at 9:58
@BillyMoat are you talking about writing all css styles from scratch? I want to use css framework like bootstrap where I can get lots of styles for free and can build my app faster. — user1566788
– user1566788, Commented Aug 7, 2012 at 5:02
@Sherbrow Does bootstrap framework reset existing styles when I include its css file? Because when the css file got loaded, it changed the font size and style of the entire page (including gmail's font). Does this problem go away when I use it with less? — user1566788
– user1566788, Commented Aug 7, 2012 at 5:16
@user1566788 No it does not go away with less, BUT you can decide to add a class .bootstrap { /* Bootstrap css */ } so that it applies only within containers having that class. — Sherbrow
– Sherbrow, Commented Aug 7, 2012 at 8:06

Sherbrow · Accepted Answer · 2014-05-31 22:46:41Z

50

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.

edited May 31, 2014 at 22:46

answered Aug 7, 2012 at 8:27

Sherbrow

17.4k3 gold badges67 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

21 Comments

user1566788 Over a year ago

After looking at jsfiddle.net/Sherbrow/BPhrm, I have a question. In my case, should I just wrap my whole widget with div like <div class="tw-bs">...</div>. This should ensure the bootstrap classes get applied only to my widget?

Sherbrow Over a year ago

@user1566788 yes, that's what I would do. You can use a <div> or any other element, and only & everything that's inside the .tw-bs will be bootstrap.

Sherbrow Over a year ago

@mathieu-m-gosselin keeping the rule isn't really a problem, I had tried using 2 containers and manually adding htmland body rules : it seems to be the next best solution.

orokusaki Over a year ago

@Sherbrow +1, the html and body issue makes this solution feel dirty, and this solution breaks things if you happen to use this version of BS with a site that has BS (like, if you're distributing a widget and somebody happens to have BS installed, you'll run into problems with modal and other styles being irrecoverably messed up).

GFoley83 Over a year ago

Here's a gist of Bootstrap 3.1.1 namespaced as above to .tw-bs gist.github.com/GFoley83/7d71fb9605cad6de2a8b

|

Laoneo · Accepted Answer · 2013-11-04 14:00:42Z

6

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.

edited Nov 4, 2013 at 14:00

answered May 11, 2013 at 8:20

Laoneo

1,5661 gold badge18 silver badges25 bronze badges

1 Comment

kolobok_ua Over a year ago

Bootstrap 3.3.7 doesn't have responsive.less. Everything is inside bootstrap.less.

Aaron_H · Accepted Answer · 2016-02-03 06:21:01Z

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/

answered Feb 3, 2016 at 6:21

Aaron_H

1,6831 gold badge13 silver badges26 bronze badges

1 Comment

Genjo Over a year ago

Nice solution, check browser support before using it: caniuse.com/#feat=shadowdomv1 Can be enabled in Firefox, don't work in Edge.

user1566788 · Accepted Answer · 2012-08-07 17:37:52Z

0

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.

answered Aug 7, 2012 at 17:37

user1566788

5852 gold badges6 silver badges14 bronze badges

Comments

Pete · Accepted Answer · 2017-09-15 11:12:30Z

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>

Collectives™ on Stack Overflow

css framework for an app with existing stylesheet

5 Answers 5

21 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

21 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related