При разработке веб-приложений переодически приходится заниматься таким утомительным и неблагодарным занятием, как верстка. Одним из требований к современному веб-приложению является адаптивность. К счастью, уже существуют готовые 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>

"Мы не знаем, что такое дизайн, но мы будем делать это в любом случае."

Токуджин Йошиока