Bootstrap with liferay

CIGNEX Datamatics Confidential www.cignex.com
Bootstrap with Liferay
Ver : 1.0
Name: Sendhil Kumar K
Title: Bootstrap with Liferay

• With the release of Liferay 6.2, Bootstrap version 2.3.2
has been added as default theme library.
2
Introduction of Bootstrap in Liferay

• Bootstrap 3 was released on August 19th, 2013, roughly a month and a half
before Liferay planning on releasing 6.3. Trying to cram it in at the last
minute would have led to nothing but major bugs, weeping, gnashing of
teeth, etc.
• Bootstrap 3 completely dropped support for IE7 and below. While Liferay
6.2 provided limited support for IE7 and below, it's just not feasible yet for
this version to completely drop support for everyone across the board.
3
Why did Liferay choose version 2.3.2 instead of 3?

Summary
4
Overview of Bootstrap 3 and 2.3.2
Bootstrap 3 Bootstrap 2.3.2
Grids: Fluid
UI Tools: Lots of widgets; good
for rapid prototyping
Grids: Fluid and Fixed
UI Tools: Lots of widgets; good for rapid
prototyping
CSS
Reset Normalize.css Normalize.css
LESS Yes Yes
Sass/Scss Yes No

CIGNEX Datamatics Confidential www.cignex.com5
Overview of Bootstrap 2.3.2 and 3
Grids and Responsiveness
Base width
Fluid (480px, 768px, 992px,
1200px)
Fluid and fixed (724px, 940px, 1170px;
below 768px are single column and
vertically stacked)
Columns 12 12
Single
column
class syntax
.col-xs-1, .col-sm-1
.col-md-1, .col-lg-1
.span1
Two column
class syntax
.col-xs-2, .col-sm-2
.col-md-2, .col-lg-2
.span2

Overview of Bootstrap 2.3.2 and 3
Grids and Responsiveness
Container
syntax
<div class="container"> <div class="container">
or
<div class="container-fluid">
Row syntax
<div class="row">
<div class="col-xs-2 col-sm-8 col-md-6 col-lg-
5">...</div>
<div class="col-xs-10 col-sm-4 col-md-6 col-lg-
7">...</div>
</div>
<div class="row">
<div class="span4">...</div>
<div class="span8">...</div>
</div>

Major class changes
Bootstrap 2.x Bootstrap 3.0
• .row-fluid .row
• .span* .col-md-*
• .offset* .col-md-offset-*
• .brand .navbar-brand
• .nav-collapse .navbar-collapse
• .nav-toggle .navbar-toggle
• .btn-navbar .navbar-btn
• .hero-unit .jumbotron
• .icon-* .glyphicon .glyphicon-*
• .btn .btn .btn-default
• .btn-mini .btn-xs
• .btn-small .btn-sm
• .btn-large .btn-lg
• .alert-error .alert-danger
• .visible-phone .visible-xs
• .visible-tablet .visible-sm
• .visible-desktop Split into .visible-md .visible-lg
• .hidden-phone .hidden-xs
• .hidden-tablet .hidden-sm
• .hidden-desktop Split into .hidden-md .hidden-lg
Bootstrap 2.x Bootstrap 3.0
• .input-block-level .form-control
• .control-group .form-group
• .checkbox.inline .radio.inline .checkbox-inline .radio-inline
• .input-prepend .input-append .input-group
• .add-on .input-group-addon
• .img-polaroid .img-thumbnail
• ul.unstyled .list-unstyled
• ul.inline.list-inline
• .muted .text-muted
• .label .label .label-default
• .label-important .label-danger
• .text-error .text-danger
• .table .error .table .danger
• .bar .progress-bar
• .bar-* .progress-bar-*
• .accordion .panel-group
• .accordion-group .panel .panel-default
• .accordion-heading .panel-heading
• .accordion-body .panel-collapse
• .accordion-inner .panel-body

What's new
Element Description
Panels .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
List groups .list-group .list-group-item .list-group-item-text .list-group-item-heading
Responsive utility classes (≥1200px) .visible-lg .hidden-lg
Offsets .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
Contextual table rows .success .danger .warning .active .info
Contextual panels .panel-success .panel-danger .panel-warning .panel-info
Input height sizes .input-sm .input-lg
Input groups .input-group .input-group-addon .input-group-btn
Form controls .form-control .form-group
Button group sizes .btn-group-xs .btn-group-sm .btn-group-lg
Glyphicons .glyphicon
Jumbotron .jumbotron
Extra small grid (<768px) .col-xs-*
Small grid (≥768px) .col-sm-*
Medium grid (≥992px) .col-md-*
Large grid (≥1200px) .col-lg-*
Navbar text .navbar-text
Navbar header .navbar-header
Justified tabs / pills .nav-justified
-------------------------------------------------------------
Element Description
Responsive images .img-responsive
Push .col-sm-push-* .col-md-push-* .col-lg-push-*
Pull .col-sm-pull-* .col-md-pull-* .col-lg-pull-*
Modal .modal-dialog .modal-content
Thumbnail image .img-thumbnail
Well sizes .well-sm .well-lg
Alert links .alert-link
│
│
│
│

What's removed...
Element Removed from 2.x 3.0 Equivalent
Form actions .form-actions N/A
Search form .form-search N/A
Form group with info .control-group.info N/A
Fixed-width input sizes
.input-mini .input-small .input-medium .input-large .input-
xlarge .input-xxlarge
Use .form-control and the grid system
instead.
Block level form input .input-block-level
No direct equivalent, but forms controls
are similar.
Inverse buttons .btn-inverse N/A
Fluid row .row-fluid .row (no more fixed grid)
Controls wrapper .controls N/A
Controls row .controls-row .row or .form-group
continue...

What's removed
Element Removed from 2.x 3.0 Equivalent
Navbar inner .navbar-inner N/A
Navbar vertical dividers .navbar .divider-vertical N/A
Dropdown submenu .dropdown-submenu N/A
Tab alignments .tabs-left .tabs-right .tabs-below N/A
Pill-based tabbable area .pill-content .tab-content
Pill-based tabbable area pane .pill-pane .tab-pane
Nav lists .nav-list .nav-header
No direct equivalent, but list groups
and .panel-groups are similar.
Inline help for form controls .help-inline
No exact equivalent, but .help-block is
similar.

Additional notes
• By default, text-based form controls now receive only minimal styling. For focus colors and rounded
corners, apply the .form-control class on the element to style.
• Text-based form controls with the .form-control class applied are now 100% wide by default. Wrap
inputs inside <div class="col-*"></div> to control input widths.
• .badge no longer has contextual (-success,-primary,etc..) classes.
• .btn must also use .btn-default to get the "default" button.
• .row is now fluid.
• Images are no longer responsive by default. Use .img-responsive for fluid <img> size.
• The icons, now .glyphicon, are now font based. Icons also require a base and icon class (e.g.
.glyphicon .glyphicon-asterisk).
continue...

Additional notes
• Typeahead has been dropped, in favor of using Twitter Typeahead.
• Modal markup has changed significantly. The .modal-header, .modal-body, and .modal-footer
sections are now wrapped in .modal-content and .modal-dialog for better mobile styling and
behavior. Also, you should no longer apply .hide to .modal in your markup.
• As of v3.1.0, the HTML loaded by the remote modal option is now injected into the .modal-content
(from v3.0.0 to v3.0.3, into the .modal) instead of into the .modal-body. This allows you to also easily
vary the header and footer of the modal, not just the modal body.
• JavaScript events are namespaced. For example, to handle the modal "show" event, use
'show.bs.modal'. For tabs "shown" use 'shown.bs.tab', etc.

Step 1: In Liferay Devloper Studio, Go to --> File - New - Liferay Plugin Project.
Step 2: Provide the Name inside Project Name Text Box (say Test).
Step 3: Select the Plugin Type as - Theme and click Next.
Step 4: Select Theme parent - _styled and Theme framework - Velocity. Click Finish.
Step 5: A new Theme (Test-theme) will be created.
Step 6: Inside _diffs folder create css, images, js and templates folder.
Step 7: Copy and paste the required files in the corresponding folders as needed.
Step 8: Modify the files as explained.
13
Working with Liferay 6.2 and Bootstrap 2.3.2
 Creating Theme

Step 3: Select the Plugin Type as - Layout Template and click Finish.
Step 4: A new Layout (Test-layouttpl) will be created.
Step 5: Open Test.tpl file and create layout from Palete in Visual Tab/paste Code in Source
Tab.
Step 6: Replace the "aui" classes to "span" classes present in Bootstrap 2.3.2.
14
 Creating Layout

Basic Structure: [Two Column Layout]
<div id="main-content" role="main">
<div class="portlet-layout row-fluid">
<div class="span6 portlet-column portlet-column-first" id="column-1">
$processor.processColumn("column-1", "portlet-column-content portlet-column-
content-first")
</div>
<div class="span6 portlet-column portlet-column-last" id="column-2">
$processor.processColumn("column-2", "portlet-column-content portlet-column-
content-last")
</div>
</div>
</div>

Step 3: Select the Plugin Type as - Theme and click Next.
Step 4: Select Theme parent - _styled and Theme framework - Velocity. Click Finish.
Step 5: A new Theme (Test-theme) will be created.
Step 6: Inside _diffs folder create css, images, js and templates folder.
Step 7: Copy and paste the required files in the corresponding folders as needed.
Step 7 a: Download Bootstrap 3 CSS file and place it inside _diffs - css
Step 7 b: Open Main.css and call the Bootstrap 3 css file above custom.css
Step 8: Modify the files as explained.
16
Working with Liferay 6.2 and Bootstrap 3
 Creating Theme
All the basic steps for creating Theme by including Bootstrap 3 are same except few
additional Steps.

Working with Liferay 6.2 and Bootstrap 3.x
Basic Structure: [Two Column Layout]
<div id="main-content" role="main" style="margin-top: 79px;">
<div class="row">
<div class="col col-md-12" id="column-1" style="border:1px solid pink;"><br><br>
$processor.processColumn("column-1", "portlet-column-content portlet-column-content-only")
</div>
</div>
<div class="row">
<div class="col col-md-6" id="column-2" style="border:1px solid red;"><br><br>
$processor.processColumn("column-2", "portlet-column-content portlet-column-content-first")
</div>
<div class="col col-md-6" id="column-3" style="border:1px solid red;"><br><br>
$processor.processColumn("column-3", "portlet-column-content portlet-column-content-last")
</div>
</div>
</div>

Conflict class fixes - Liferay 6.2 with Boostrap 3
.signed-in .collapse { display:block; }
.lfr-edit-layout-panel .collapse{ display:block; }
.dockbar.navbar-static-top .collapse { display: block; }
.navbar-inner .collapse{ display:block; }
.dockbar-ready #wrapper { margin-top: 149px; }
.dockbar-ready section#content { padding: 0 0 0 0; }
It seems to work fine, though there are often issues for anything that we use in the
control panel as it is its own theme altogether. For example, the "+Add" "preview"
"Edit" for a piece of content doesn't look right unless we do some CSS magic to
override the BS3 styles with new settings.
.dockbar.navbar-static-top {
background-color: transparent;
padding: 0px;
}
.dockbar-messages{ display:none;}
.lfr-device-preview{ z-index: 1000; }
.modal{ display:block;}
.modal-hidden{ display:none; }
 class to override:

Bootstrap with liferay

Related slideshows

Recommended for you

Recommended for you

Recommended for you

Recommended for you

More Related Content

Similar to Bootstrap with liferay

Similar to Bootstrap with liferay (20)

Recently uploaded

Recently uploaded (20)

Bootstrap with liferay