![CIGNEX Datamatics Confidential www.cignex.com15
Working with Liferay 6.2 and Bootstrap 2.3.2
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>](https://image.slidesharecdn.com/bootstrapwithliferay-160412095924/85/Bootstrap-with-liferay-15-320.jpg)
![CIGNEX Datamatics Confidential www.cignex.com17
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>](https://image.slidesharecdn.com/bootstrapwithliferay-160412095924/85/Bootstrap-with-liferay-17-320.jpg)
Bootstrap with liferay
- 1. CIGNEX Datamatics Confidential www.cignex.com Bootstrap with Liferay Ver : 1.0 Name: Sendhil Kumar K Title: Bootstrap with Liferay
- 2. CIGNEX Datamatics Confidential www.cignex.com • 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
- 3. CIGNEX Datamatics Confidential www.cignex.com • 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?
- 4. CIGNEX Datamatics Confidential www.cignex.com 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 Bootstrap 3 Bootstrap 2.3.2 Reset Normalize.css Normalize.css LESS Yes Yes Sass/Scss Yes No
- 5. CIGNEX Datamatics Confidential www.cignex.com5 Overview of Bootstrap 2.3.2 and 3 Grids and Responsiveness Bootstrap 3 Bootstrap 2.3.2 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
- 6. CIGNEX Datamatics Confidential www.cignex.com6 Overview of Bootstrap 2.3.2 and 3 Grids and Responsiveness Bootstrap 3 Bootstrap 2.3.2 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>
- 7. CIGNEX Datamatics Confidential www.cignex.com 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
- 8. CIGNEX Datamatics Confidential www.cignex.com 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 │ │ │ │
- 9. CIGNEX Datamatics Confidential www.cignex.com 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...
- 10. CIGNEX Datamatics Confidential www.cignex.com 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.
- 11. CIGNEX Datamatics Confidential www.cignex.com 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...
- 12. CIGNEX Datamatics Confidential www.cignex.com 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.
- 13. CIGNEX Datamatics Confidential www.cignex.com 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
- 14. CIGNEX Datamatics Confidential www.cignex.com 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 Working with Liferay 6.2 and Bootstrap 2.3.2 Creating Layout
- 15. CIGNEX Datamatics Confidential www.cignex.com15 Working with Liferay 6.2 and Bootstrap 2.3.2 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>
- 16. CIGNEX Datamatics Confidential www.cignex.com 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 - 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.
- 17. CIGNEX Datamatics Confidential www.cignex.com17 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>
- 18. CIGNEX Datamatics Confidential www.cignex.com 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: