При разработке веб-приложений переодически приходится заниматься таким утомительным и неблагодарным занятием, как верстка. Одним из требований к современному веб-приложению является адаптивность. К счастью, уже существуют готовые CSS-фреймворки, позволяющие использовать готовые CSS стили при верстке адаптивного приложения. Одним из наиболее популярных фреймворков является Twitter Bootstrap.
Создание темы для Liferay обычно представляет собой наследование от некоторой готовой темы и переопределение части шаблонов. Т.е. часть компонентов интерфейсов базовой темы используются без изменений. Разработчики Liferay написали немало стилей, которые вступают в конфликт со стилями Twitter Bootstrap при наивном подключении bootstrap.css.
Данная проблема легко решается небольшим изменением исходников Twitter Bootstrap. На оффициальном сайте доступны загрузки исходников как для препроцессора Less, так и для Sass. Для сборки Twitter Bootstrap используется Grunt.
sudo npm install -g grunt-cli
cd bootstrap-3.2.0
npm install
Теперь необходимо отредактировать bootstrap.less, заключив импорты всех файлов со стилями в класс-обертку ubs, который и защитит существующие стили от конфликта со стилями Bootstrap.
// Reset and dependencies
.ubs {
@import "normalize.less";
@import "print.less";
@import "glyphicons.less";
// Core CSS
@import "scaffolding.less";
@import "type.less";
@import "code.less";
@import "grid.less";
@import "tables.less";
@import "forms.less";
@import "buttons.less";
// Components
@import "component-animations.less";
@import "dropdowns.less";
@import "button-groups.less";
@import "input-groups.less";
@import "navs.less";
@import "navbar.less";
@import "breadcrumbs.less";
@import "pagination.less";
@import "pager.less";
@import "labels.less";
@import "badges.less";
@import "jumbotron.less";
@import "thumbnails.less";
@import "alerts.less";
@import "progress-bars.less";
@import "media.less";
@import "list-group.less";
@import "panels.less";
@import "responsive-embed.less";
@import "wells.less";
@import "close.less";
// Components w/ JavaScript
@import "modals.less";
@import "tooltip.less";
@import "popovers.less";
@import "carousel.less";
// Utility classes
@import "utilities.less";
@import "responsive-utilities.less";
}
Теперь нужно пересобрать Bootstrap
grunt dist
Теперь bootstrap.min.css можно подключать в тему и использовать стили Bootstrap внутри блоков с классом .ubs
<div class="ubs">
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
</div>
"Мы не знаем, что такое дизайн, но мы будем делать это в любом случае."
Токуджин Йошиока