Download pdf - Bootstrap & Joomla UI

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


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


Bootstrap Fast & Flexible Minified CSS Minified JavaScript CSS preprocessor, LESS


Using Bootstrap


Download the CSS & JavaScript files Call the files plus jQuery in your program


<link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"> </script>


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.


Documentation Examples & Downloads http://twitter.github.com/bootstrap


Full Source (Includes .LESS files) http://github.com/twitter/bootstrap


Grid System - Static .row


.offsetx

.spanx

Grid System - Static <div class="row"> <div class="span4"> ...</div> <div class="offset2 span6">...</div> </div>


Grid System - Fluid .row-fluid


.offsetx

.spanx

Grid System - Fluid <div class="row-fluid"> <div class="span4"> ...</div> <div class="offset2 span6">...</div> </div>


<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>


Responsive classes .hidden-phone .visible-phone .hidden-tablet .visible-tablet .hidden-desktop .visible-desktop


Text classes .muted .text-warning .text-error .text-info .text-success


Useful classes .pull-right .pull-left .clearfix .element-invisible (JUI)


<table> classes .table .table-striped .table-condensed .table-border .table-hover


<tr> classes .success .error


.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


Downloads twitter.github.com/bootstrap github.com/twitter/bootstrap Tutorial webdesign.tutsplus.com/series/twitter-bootstrap-101 Video Tutorial youtube.com/watch?v=DgwtRpf60xI


Bootstrap in Joomla


Three Options 1. Use Bootstrap files in

Joomla 2. Download customized

Bootstrap files 3. Create template.css

file from Joomla Bootstrap LESS files


1. Use Bootstrap files in Joomla media jui css fonts img js less


media/jui/css bootstrap.css bootstrap.min.css bootstrap-responsive.css bootstrap-responsive.min.css bootstrap-extended.css bootstrap-rtl.css


media/jui/css chosen-sprite.png chosen.css icomoon.css sortablelist.css


Load CSS automatically <?php JHtml::_('bootstrap.loadCss'); ?>


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); ?>


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); ?>


Load JavaScript <?php JHtml::_('bootstrap.framework'); ?>


2. Download customized Bootstrap files http://twitter.github.com/bootstrap Customize


Be safe: use the same version Extensions may need components so include them Change variables to suit Download and include as normal CSS files


3. Create template.css file from Joomla Bootstrap LESS files Come to my LESS talk this afternoon


Questions?
