Css framework для приложения с существующей таблицей стилей

Я создаю расширение chrome, которое прикрепляет виджетов к сообщению gmail. Он появляется под каждым письмом (что-то вроде gmail-контекстного гаджета), когда пользователь находится на сайте gmail.com.

Я просмотрел несколько фреймворков CSS, таких как twitter bootstrap для использования в моем приложении. Когда я использовал его в mywidget, он испортился с существующими стилями gmail из-за столкновения имени класса css. Есть ли какая-либо другая структура, которую я могу использовать там, где не было бы столкновения имен? Я наткнулся на jquery-ui framework. Все имена классов начинаются с .ui- *, тем самым не вызывая столкновения имен. Существуют ли какие-либо другие рамки css, подобные этому, с уникальными именами классов?

ОТВЕТЫ

Ответ 1

Обновление 2: Вот суть v3.1.1, предоставленная @GFoley83

Обновление:. Пастебином, подключенным ниже, является Bootstrap Twitter версия 2.0.4

Вы должны окончательно использовать обновленную версию и скомпилировать ее самостоятельно.

Вот что я сделал с загрузочным файлом less :

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

И это результат: http://pastebin.com/vXgRNDSZ

Демо (jsfiddle)

Если вам не нравится tw-bs, вы можете легко найти/заменить, конфликт не должен быть.

Ответ 2

Я использовал решение @Sherbrow, но мне также пришлось добавить отзывчивый файл.

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

а затем запустите

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

Если кому-то нужен полный пошаговый учебник, как скомпилировать бутстрап для собственного контейнера с расширением имен, я сделал сообщение в блоге об этом http://joomla.digital-peak.com/blog/151-how-to-add-bootstrap-to-your-joomla-2-5-extension

Последняя часть предназначена для Joomla, но начало можно использовать глобально. Он также имеет ссылку на последнюю скомпилированную загрузочную версию 2.3.2. Просто выполните поиск и замените .dp-контейнер.

Ответ 3

Обновление

2016: будущий способ смягчить эту проблему (вместо необходимости перекомпилировать загрузочный файл) - использовать веб-компоненты, в частности, теневое DOM. Это позволяет вашему приложению быть самодостаточным (почти как iFrame), без необходимости просмотра отдельной страницы/потери связи между страницами.

скажите, что ваш компонент содержится в <div id='plugin'>...</div>

Вы можете перемещать то, что внутри этого div в тег в вашей голове, например.

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

Ваш шаблон может включать все теги ссылок для загрузки и js, которые вы хотите. Затем в вашем javascript/букмаркете вы можете написать

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

Здесь вы можете много узнать о веб-компонентах (вместе с Shadow DOM): http://webcomponents.org/articles/introduction-to-shadow-dom/

Ответ 4

Я начал использовать jquery ui - http://jqueryui.com/, потому что у него есть свои собственные классы css, которые не сталкиваются с gmail. YUI - еще одна такая основа, которую я нашел. Но Шерброу показал, как я могу использовать bootstrap css с нашими уникальными именами стиля css.

Ответ 5

В настоящее время принятый ответ не корректно отображает формы (используя SASS и bootstrap 4 beta). Для меня работает следующее:

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

    box-sizing: border-box;
}

Размер окна очень важен, потому что при компиляции вашей таблицы стилей SASS создаются следующие.

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

т.е. свойство box-sizing будет помещено в элемент html внутри элемента с class="bootstrap" - который, конечно, не будет существовать. Могут быть другие стили на html и body, которые вы можете вручную добавить в свои стили.

И теперь вы можете размещать контент, созданный с помощью бутстрапа внутри класса bootstrap:

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