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

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