CSS-фреймворк для приложения с существующей таблицей стилей
Я создаю расширение Chrome, которое прикрепляет виджеты к сообщениям Gmail. Он отображается под каждым письмом (что-то вроде контекстного гаджета gmail), когда пользователь находится на сайте gmail.com.
Я посмотрел на несколько CSS-фреймворков, таких как Twitter bootstrap, для использования в моем приложении. Когда я использовал его в mywidget, он перепутался с существующими стилями gmail из-за конфликта имен классов css. Есть ли какая-либо другая структура, которую я могу использовать там, где не было бы конфликта имен? Я наткнулся на рамки jquery-ui. Все имена классов здесь начинаются с.ui-*, что не приводит к конфликту имен. Существуют ли какие-либо другие фреймворки css с уникальными именами классов?
5 ответов
Обновление 2: Вот суть v3.1.1, предоставленная @GFoley83
Обновление: пастбин, объединенный ниже, является версией Bootstrap Twitter2.0.4
Вы должны окончательно использовать актуальную версию и скомпилировать ее самостоятельно.
Вот что я сделал с файлами начальной загрузки:
.tw-bs {
@import "less/bootstrap.less";
}
И это результат: http://pastebin.com/vXgRNDSZ
Если тебе не нравится tw-bs Вы можете легко найти / заменить, не должно быть никаких конфликтов.
Я использовал решение @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-контейнер.
Обновление 2016: будущий способ смягчить эту проблему (вместо того, чтобы перекомпилировать начальную загрузку) - воспользоваться веб-компонентами, в частности теневым DOM. Это позволяет вашему приложению быть автономным (почти как iFrame) без необходимости открывать веб-браузер отдельной страницей / теряя способность общаться между страницами.
скажем, ваш компонент содержится в <div id='plugin'>...</div>
Вы можете переместить то, что находится внутри этого элемента, в тег в вашей голове, например.
<template id="template"><!--Your Code Here--></template>
Ваш шаблон может включать в себя все теги начальной загрузки и JS, которые вы хотите. Затем в вашем javascript / bookmarklet вы можете написать
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/
В настоящее время принятый ответ не правильно отображает формы (используя 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>
Я начал с использования jquery ui - http://jqueryui.com/ потому что у него есть собственные классы CSS, которые не конфликтуют с Gmail. YUI - еще одна такая основа, которую я нашел. Но Шерброу показал, как я могу использовать начальную загрузку CSS с нашими собственными уникальными именами в стиле CSS.