Marco css para una aplicación con una hoja de estilo existente

Estoy construyendo una extensión de Chrome que adjunta una especie de widget a un mensaje de Gmail. Aparece debajo de cada correo electrónico (algo así como un gadget contextual de Gmail) cuando el usuario está en el sitio gmail.com.

Miré algunos frameworks css como Twitter bootstrap para usar en mi aplicación. Cuando lo usé en mywidget, se metió en problemas con los estilos existentes de gmail debido a la clase css class choque. ¿Hay algún otro marco que pueda usar donde no exista un conflicto de nombres? Encontré el framework jquery-ui. Todos los nombres de clase aquí comienzan con .ui- * y no causan conflicto de nombres. ¿Hay algún otro marco css como este con nombres únicos de clase?

Actualización 2: Aquí hay una esencia de v3.1.1 proporcionada por @GFoley83

Actualización: El pastebin se unió a continuación es la versión de Twitter Bootstrap 2.0.4

Debe utilizar definitivamente la versión actualizada y comstackrla usted mismo.


Esto es lo que hice con los archivos bootstrap less :

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

Y este es el resultado: http://pastebin.com/vXgRNDSZ

Demo (jsfiddle)

Si no te gustan los tw-bs puedes hacer un find / replace fácilmente, no debería haber ningún conflicto.

Usé la solución @Sherbrow pero también tuve que agregar el archivo responsivo.

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

y luego corre

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

Si alguien necesita el tutorial paso a paso completo sobre cómo comstackr el bootstrap para su propio contenedor de espacio de nombres, hice una publicación en el blog sobre él http://joomla.digital-peak.com/blog/151-how-to-add-bootstrap-to -your-joomla-2-5-extension

La última parte es para Joomla, pero el comienzo se puede usar globalmente. También tiene un enlace a la última versión comstackda de arranque 2.3.2. Simplemente haga una búsqueda y reemplace por .dp-contenedor .

Actualización de 2016: una forma futura de mitigar este problema (en lugar de tener que volver a comstackr bootstrap) es aprovechar los componentes web, específicamente sombra DOM. Esto permite que su aplicación sea independiente (casi como un iFrame) sin que el navegador web tenga que abrir una página por separado / perder la capacidad de comunicarse entre páginas.

di que tu componente está contenido en

...

Puedes mover lo que hay dentro de ese div a una etiqueta en tu cabeza, ej.

  

Su plantilla puede incluir todas las tags de enlace de arranque y js que desee. Luego, en su javascript / bookmarklet, puede escribir

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

Puede leer mucho más sobre los componentes web (junto con Shadow DOM) aquí: http://webcomponents.org/articles/introduction-to-shadow-dom/

Empecé usando jquery ui – http://jqueryui.com/ porque tiene sus propias clases CSS que no entran en conflicto con gmail. YUI es otro de esos marcos que encontré. Pero Sherbrow mostró cómo puedo usar bootstrap css con nuestros propios nombres únicos de estilo css.

La respuesta aceptada actualmente no representaba los formularios correctamente (utilizando SASS y bootstrap 4 beta). Lo siguiente funciona para mí:

 .bootstrap { @import 'bootstrap-4.0.0-beta/scss/bootstrap.scss'; box-sizing: border-box; } 

El tamaño de la caja es importante porque, al comstackr su hoja de estilo SASS, se generará lo siguiente.

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

Es decir, la propiedad de box-sizing se colocará en un elemento html dentro de un elemento con class="bootstrap" , que por supuesto no existirá. Es posible que haya otros estilos en html y body que desee agregar manualmente a sus estilos.

Y ahora puedes colocar contenido con estilo usando bootstrap dentro de una clase de bootstrap :

 
...