estrutura css para um aplicativo com folha de estilo existente

Eu estou construindo uma extensão de cromo que anexa um tipo de coisa de widget a mensagem de gmail. Ele aparece abaixo de cada e-mail (algo como um gadget contextual do Gmail) quando o usuário está no site gmail.com.

Eu olhei alguns frameworks css como o twitter bootstrap para usar no meu aplicativo. Quando eu usei no mywidget, ele mexeu com os estilos de gmail existentes por causa do confronto do nome da class css. Existe algum outro framework que eu possa usar onde não haja conflito de nomes? Eu me deparei com o framework jquery-ui. Todos os nomes de classs começam com .ui- *, portanto, não causando conflito de nomes. Existem outras estruturas css como esta com nomes de class exclusivos?

Atualização 2: Aqui está uma essência da v3.1.1 fornecida por @ GFoley83

Atualização: O pastebin abaixo é o Twitter Bootstrap versão 2.0.4

Você deve definitivamente usar a versão atualizada e compilá-la você mesmo.


Aqui está o que eu fiz com o bootstrap menos arquivos :

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

E este é o resultado: http://pastebin.com/vXgRNDSZ

Demo (jsfiddle)

Se você não gosta de tw-bs você pode facilmente encontrar um / localizar, não deve haver nenhum conflito.

Eu usei a solução @Sherbrow, mas tive que adicionar o arquivo responsivo também.

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

e então corra

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

Se alguém precisar do tutorial passo-a-passo completo para compilar o bootstrap para o seu próprio container namespaced, eu fiz um post sobre isso http://joomla.digital-peak.com/blog/151-how-to-add-bootstrap-to -your-joomla-2-5-extension

A última parte é para o Joomla, mas o começo pode ser usado globalmente. Ele também tem um link para a última versão de bootstrap compilada 2.3.2. Basta fazer uma pesquisa e replace por .dp-container .

Atualização de 2016: Uma maneira futura de atenuar esse problema (em vez de recompilar o bootstrap) é aproveitar os componentes da Web, especificamente o DOM de sombra. Isso permite que seu aplicativo seja autônomo (quase como um iFrame) sem que o navegador tenha que abrir uma página separada / perdendo a capacidade de se comunicar entre as páginas.

digamos que seu componente está contido em

...

Você pode mover o que está dentro dessa div para uma tag na sua cabeça, por exemplo.

  

Seu modelo pode include todas as tags de link de bootstrap e js desejadas. Em seguida, no seu javascript / bookmarklet, você pode escrever

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

Você pode ler muito mais sobre Web Components (junto com o Shadow DOM) aqui: http://webcomponents.org/articles/introduction-to-shadow-dom/

Eu comecei usando o jquery ui – http://jqueryui.com/ porque ele tem suas próprias classs css que não colidem com o gmail. YUI é outro framework que eu encontrei. Mas Sherbrow mostrou como eu posso usar bootstrap css com nossos próprios nomes de estilo CSS exclusivos.

A resposta atualmente aceita não renderizou os formulários corretamente (usando o SASS e o bootstrap 4 beta). O seguinte funciona para mim:

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

O dimensionamento de checkbox é importante porque, ao compilar sua folha de estilo SASS, o seguinte será gerado.

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

Ou seja, a propriedade de box-sizing será colocada em um elemento html dentro de um elemento com class="bootstrap" – que obviamente não existirá. Pode haver outros estilos em html e body que você pode querer adicionar manualmente aos seus estilos.

E agora você pode colocar o estilo de conteúdo usando o bootstrap dentro de uma class de bootstrap :

 
...