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