bootstrap with liferay

CIGNEX Datamatics Confidential www.cignex.com

Bootstrap with LiferayVer : 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: FluidUI Tools: Lots of widgets; good for rapid prototyping

Grids: Fluid and FixedUI 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 3Grids and Responsiveness


Base widthFluid (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 3Grids 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 changesBootstrap 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 newElement DescriptionPanels .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapseList groups .list-group .list-group-item .list-group-item-text .list-group-item-headingResponsive utility classes (≥1200px) .visible-lg .hidden-lgOffsets .col-sm-offset-* .col-md-offset-* .col-lg-offset-*Contextual table rows .success .danger .warning .active .infoContextual panels .panel-success .panel-danger .panel-warning .panel-infoInput height sizes .input-sm .input-lgInput groups .input-group .input-group-addon .input-group-btnForm controls .form-control .form-groupButton group sizes .btn-group-xs .btn-group-sm .btn-group-lgGlyphicons .glyphiconJumbotron .jumbotronExtra small grid (<768px) .col-xs-*Small grid (≥768px) .col-sm-*Medium grid (≥992px) .col-md-*Large grid (≥1200px) .col-lg-*Navbar text .navbar-textNavbar header .navbar-headerJustified tabs / pills .nav-justified

-------------------------------------------------------------Element DescriptionResponsive images .img-responsivePush .col-sm-push-* .col-md-push-* .col-lg-push-*Pull .col-sm-pull-* .col-md-pull-* .col-lg-pull-*Modal .modal-dialog .modal-contentThumbnail image .img-thumbnailWell sizes .well-sm .well-lgAlert 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-levelNo 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 removedElement 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-headerNo direct equivalent, but list groups and .panel-groups are similar.

Inline help for form controls .help-inlineNo 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 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 - 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 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 7 a: Download Bootstrap 3 CSS file and place it inside _diffs - cssStep 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.xBasic 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

Internet