Bootstrapping with Liferay

Recently I integrated Bootstrap with Liferay portal. Liferay portal does not come with Bootstrap out of the box. Those who are not aware of Bootstrap look below for the links under reference section.
 
Anyways, as part of this exercise I came up with few recommendations of my own. Some of these are just common sense but I have listed them anyways. These recommendations are primarily meant for UX(user experience), prototyping professionals or, graphic designers who don't necessarily work with Liferay.

There are several changes we need to make within liferay to make it’s pages responsive using bootstrap. At the same time we need to follow several liferay specific conventions to ensure the structural and functional integrity of the portal is intact or, at least as close to the original as possible.

Folder Structure:

Liferay themes have the following folder structure for the static resources. As long as these folder structure are followed, integration with the portal becomes seamless and less error prone.

[Application Name]/css
For all cascading style sheet, SASS/SCSS files. Liferay does not support LESS at present. Bootstrap related css go here. All browser specific css files can go under their respective sub folders within this folder. e.g. css/ie

[Application Name]/js
All application specific javascript including bootstrap.min.js go here.

[Application Name]/template
Html pages go here. 

Separation of Style Sheets:

CSS files should be splitted into separate files based on their functionality. All those styling elements which are universal and/or applicable to common elements like header/footer/nav bar etc should go into a main css file.

Styling for specific functionality within the layout e.g. News Carousel, Sign-in Form etc should go into their respective css files.

This will allow liferay developers to package the css along with their respective plugins there by reducing the overall payload on the main page template. Same applies for JS files as well.

Styling Syntax: 

Liferay has built in support for SASS and Compass. All the css files are parsed for these. And it throws error when it encounters non well formed styles, missing value for any property or empty style blocks. So those should be avoided.

Page Layouts:

Special consideration is required while creating page layout or grid layout for the main content area like 2 column, 3 column, 1 row and 2 column on 2nd row etc.

Liferay layouts are reusable plugins and are meant to be used across several pages and applications. Hence any application specific or even page specific classes should not be added to the main grid layouts. They should only contain the Bootstrap related classes with additional liferay layout specific classes. Below is an example of Liferay two column layout made compatible with Bootstrap 2.

Highlighted css classes are Bootstrap related. Rest all are liferay specific classes and no custom application specific classes used there.

<div class="bootstrap_2col" id="main-content" role="main">
    <div class="portlet-layout">
        <div class="container-fluid">
            <div class="span3">
                <div class="aui-w30 portlet-column portlet-column-first" id="column-1">
                <!-- Column one content goes here-->
                </div>
             </div>          
            <div class="span7">
                 <div class="aui-w70 portlet-column portlet-column-last" id="column-2">
                 <!-- Column two content goes here-->
                 </div>
            </div>
        </div>   
    </div>
</div>





Feel free to comment below if you have any additional recommendations on this subject or, link back to this blog if it helped you.

References:

Bootstrap
Getting Started with Bootstrap
How to create Responsive Theme in Liferay Webinar (Video)
Responsive Design Testing