Embed Size (px)
DESCRIPTION
One of Joomla's greatest strengths is all the great extensions that can be integrated to add functionality to your website. From the point of view of the designer, this has always been one of the biggest problems -- How to make all these different extensions look like they are on the same site. Joomla UI, with the included Bootstrap, is a way that Joomla 3.x fixes that. It is a stylesheet of UI -- the markup, the CSS, and the JavaScript behaviors, that extension & template developers can share. When templates and developers use the same UI, your site will look united. This presentation will be an introduction to Bootstrap and JUI, what it is, what it can do, and how it will affect templates in Joomla. This talk will continue in the session on LESS, the CSS pre-compiler, that is used with Bootstrap.
Citation preview
Bootstrap & Joomla UI
Andrea Tarr MetaScale /Sears Holdings
Joomla Day New England 2013
The Problem Using Bootstrap Bootstrap in Joomla
JDNE: Bootstrap & Joomla UI April 13, 2013 2
The Problem
JDNE: Bootstrap & Joomla UI April 13, 2013 3
Not everything is in core Extensions make up UI Templates must be coded for specific extensions
Patchwork JDNE: Bootstrap & Joomla UI April 13, 2013 4
Bootstrap Consistency CSS layout styles CSS UI elements CSS responsive styles Integrated JavaScript Full set of icons
JDNE: Bootstrap & Joomla UI April 13, 2013 5
Bootstrap Fast & Flexible Minified CSS Minified JavaScript CSS preprocessor, LESS
JDNE: Bootstrap & Joomla UI April 13, 2013 6
Using Bootstrap
JDNE: Bootstrap & Joomla UI April 13, 2013 7
Download the CSS & JavaScript files Call the files plus jQuery in your program
JDNE: Bootstrap & Joomla UI April 13, 2013 8
<link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"> </script>
JDNE: Bootstrap & Joomla UI April 13, 2013 9
Notice we used CSS & JavaScipt files. No LESS files. LESS is used to help create Bootstrap CSS files but isn't need to use Bootstrap.
JDNE: Bootstrap & Joomla UI April 13, 2013 10
Documentation Examples & Downloads http://twitter.github.com/bootstrap
JDNE: Bootstrap & Joomla UI April 13, 2013 11
Full Source (Includes .LESS files) http://github.com/twitter/bootstrap
JDNE: Bootstrap & Joomla UI April 13, 2013 12
Grid System - Static .row
JDNE: Bootstrap & Joomla UI April 13, 2013 13
.offsetx
.spanx
Grid System - Static <div class="row"> <div class="span4"> ...</div> <div class="offset2 span6">...</div> </div>
JDNE: Bootstrap & Joomla UI April 13, 2013 14
Grid System - Fluid .row-fluid
JDNE: Bootstrap & Joomla UI April 13, 2013 15
.offsetx
.spanx
Grid System - Fluid <div class="row-fluid"> <div class="span4"> ...</div> <div class="offset2 span6">...</div> </div>
JDNE: Bootstrap & Joomla UI April 13, 2013 16
<div class="row-fluid"> <div class="span4"> <div class="row-fluid"> <div class="span3">...</div> <div class="span9">...</div> </div> </div> <div class="offset2 span6">... </div> </div>
JDNE: Bootstrap & Joomla UI April 13, 2013 17
Responsive classes .hidden-phone .visible-phone .hidden-tablet .visible-tablet .hidden-desktop .visible-desktop
JDNE: Bootstrap & Joomla UI April 13, 2013 18
Text classes .muted .text-warning .text-error .text-info .text-success
JDNE: Bootstrap & Joomla UI April 13, 2013 19
Useful classes .pull-right .pull-left .clearfix .element-invisible (JUI)
JDNE: Bootstrap & Joomla UI April 13, 2013 20
<table> classes .table .table-striped .table-condensed .table-border .table-hover
JDNE: Bootstrap & Joomla UI April 13, 2013 21
<tr> classes .success .error
JDNE: Bootstrap & Joomla UI April 13, 2013 22
.warning
.info
.btn
.btn-primary
.btn-info
.btn-success
.btn-warning
.btn-danger
.btn-inverse
.btn-link JDNE: Bootstrap & Joomla UI April 13, 2013 23
Size is optional .btn-large .btn-small .btn-mini <div> size .btn-block
JDNE: Bootstrap & Joomla UI April 13, 2013 24
Downloads twitter.github.com/bootstrap github.com/twitter/bootstrap Tutorial webdesign.tutsplus.com/series/twitter-bootstrap-101 Video Tutorial youtube.com/watch?v=DgwtRpf60xI
JDNE: Bootstrap & Joomla UI April 13, 2013 25
Bootstrap in Joomla
JDNE: Bootstrap & Joomla UI April 13, 2013 26
Three Options 1. Use Bootstrap files in
Joomla 2. Download customized
Bootstrap files 3. Create template.css
file from Joomla Bootstrap LESS files
JDNE: Bootstrap & Joomla UI April 13, 2013 27
1. Use Bootstrap files in Joomla media jui css fonts img js less
JDNE: Bootstrap & Joomla UI April 13, 2013 28
media/jui/css bootstrap.css bootstrap.min.css bootstrap-responsive.css bootstrap-responsive.min.css bootstrap-extended.css bootstrap-rtl.css
JDNE: Bootstrap & Joomla UI April 13, 2013 29
media/jui/css chosen-sprite.png chosen.css icomoon.css sortablelist.css
JDNE: Bootstrap & Joomla UI April 13, 2013 30
Load CSS automatically <?php JHtml::_('bootstrap.loadCss'); ?>
JDNE: Bootstrap & Joomla UI April 13, 2013 31
Load main CSS files JHtml::_('bootstrap.loadCss'); Main CSS files plus RTL files <?php $doc=JFactory::getDocument(); $this->direction=$doc->direction; JHtml::_('bootstrap.loadCss', true, $this->direction); ?>
JDNE: Bootstrap & Joomla UI April 13, 2013 32
Only RTL file If you loaded Bootstrap CSS separately or it's included in your template.css file as in options 2&3. <?php $doc=JFactory::getDocument(); $this->direction=$doc>direction; JHtml::_('bootstrap.loadCss', false, $this->direction); ?>
JDNE: Bootstrap & Joomla UI April 13, 2013 33
Load JavaScript <?php JHtml::_('bootstrap.framework'); ?>
JDNE: Bootstrap & Joomla UI April 13, 2013 34
2. Download customized Bootstrap files http://twitter.github.com/bootstrap Customize
JDNE: Bootstrap & Joomla UI April 13, 2013 35
Be safe: use the same version Extensions may need components so include them Change variables to suit Download and include as normal CSS files
JDNE: Bootstrap & Joomla UI April 13, 2013 36
3. Create template.css file from Joomla Bootstrap LESS files Come to my LESS talk this afternoon
JDNE: Bootstrap & Joomla UI April 13, 2013 37
Questions?
JDNE: Bootstrap & Joomla UI April 13, 2013 38
