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.

1. Bootstrap
& Joomla UI
Andrea Tarr
MetaScale /Sears Holdings
Joomla Day New England 2013

2. The Problem
Using Bootstrap
Bootstrap in Joomla
April 13, 2013 JDNE: Bootstrap & Joomla UI 2

3. The Problem
April 13, 2013 JDNE: Bootstrap & Joomla UI 3

4. Not everything is in core
Extensions make up UI
Templates must be coded
for specific extensions
Patchwork
April 13, 2013 JDNE: Bootstrap & Joomla UI 4

5. Bootstrap
Consistency
CSS layout styles
CSS UI elements
CSS responsive styles
Integrated JavaScript
Full set of icons
April 13, 2013 JDNE: Bootstrap & Joomla UI 5

6. Bootstrap
Fast & Flexible
Minified CSS
Minified JavaScript
CSS preprocessor, LESS
April 13, 2013 JDNE: Bootstrap & Joomla UI 6

7. Using
Bootstrap
April 13, 2013 JDNE: Bootstrap & Joomla UI 7

8. Download the CSS &
JavaScript files
Call the files plus jQuery
in your program
April 13, 2013 JDNE: Bootstrap & Joomla UI 8

9. <link href="css/
bootstrap.min.css"
rel="stylesheet">
<script src="js/
jquery.min.js"></script>
<script src="js/
bootstrap.min.js">
</script>
April 13, 2013 JDNE: Bootstrap & Joomla UI 9

10. 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.
April 13, 2013 JDNE: Bootstrap & Joomla UI 10

11. Documentation
Examples & Downloads
http://twitter.github.com/
bootstrap
April 13, 2013 JDNE: Bootstrap & Joomla UI 11

12. Full Source
(Includes .LESS files)
http://github.com/twitter/
bootstrap
April 13, 2013 JDNE: Bootstrap & Joomla UI 12

13. Grid System - Static
.spanx
.row
.offsetx
April 13, 2013 JDNE: Bootstrap & Joomla UI 13

14. Grid System - Static
<div class="row">
<div class="span4">
...</div>
<div class="offset2
span6">...</div>
</div>
April 13, 2013 JDNE: Bootstrap & Joomla UI 14

15. Grid System - Fluid
.spanx
.row-fluid
.offsetx
April 13, 2013 JDNE: Bootstrap & Joomla UI 15

16. Grid System - Fluid
<div class="row-fluid">
<div class="span4">
...</div>
<div class="offset2
span6">...</div>
</div>
April 13, 2013 JDNE: Bootstrap & Joomla UI 16

17. <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>
April 13, 2013 JDNE: Bootstrap & Joomla UI 17

18. Responsive classes
.hidden-phone
.visible-phone
.hidden-tablet
.visible-tablet
.hidden-desktop
.visible-desktop
April 13, 2013 JDNE: Bootstrap & Joomla UI 18

19. Text classes
.muted
.text-warning
.text-error
.text-info
.text-success
April 13, 2013 JDNE: Bootstrap & Joomla UI 19

20. Useful classes
.pull-right
.pull-left
.clearfix
.element-invisible (JUI)
April 13, 2013 JDNE: Bootstrap & Joomla UI 20

21. <table> classes
.table
.table-striped
.table-condensed
.table-border
.table-hover
April 13, 2013 JDNE: Bootstrap & Joomla UI 21

22. <tr> classes
.success .warning
.error .info
April 13, 2013 JDNE: Bootstrap & Joomla UI 22

23. .btn
.btn-primary
.btn-info
.btn-success
.btn-warning
.btn-danger
.btn-inverse
.btn-link
April 13, 2013 JDNE: Bootstrap & Joomla UI 23

24. Size is optional
.btn-large
.btn-small
.btn-mini
<div> size
.btn-block
April 13, 2013 JDNE: Bootstrap & Joomla UI 24

25. Downloads
twitter.github.com/bootstrap
github.com/twitter/bootstrap
Tutorial
webdesign.tutsplus.com/series/
twitter-bootstrap-101
Video Tutorial
youtube.com/watch?
v=DgwtRpf60xI
April 13, 2013 JDNE: Bootstrap & Joomla UI 25

26. Bootstrap
in Joomla
April 13, 2013 JDNE: Bootstrap & Joomla UI 26

27. Three Options
1. Use Bootstrap files in
Joomla
2. Download customized
Bootstrap files
3. Create template.css
file from Joomla
Bootstrap LESS files
April 13, 2013 JDNE: Bootstrap & Joomla UI 27

28. 1. Use Bootstrap files in
Joomla
media
jui
css
fonts
img
js
less
April 13, 2013 JDNE: Bootstrap & Joomla UI 28

29. media/jui/css
bootstrap.css
bootstrap.min.css
bootstrap-responsive.css
bootstrap-
responsive.min.css
bootstrap-extended.css
bootstrap-rtl.css
April 13, 2013 JDNE: Bootstrap & Joomla UI 29

30. media/jui/css
chosen-sprite.png
chosen.css
icomoon.css
sortablelist.css
April 13, 2013 JDNE: Bootstrap & Joomla UI 30

31. Load CSS automatically
<?php
JHtml::_('bootstrap.loadCss');
?>
April 13, 2013 JDNE: Bootstrap & Joomla UI 31

32. 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); ?>
April 13, 2013 JDNE: Bootstrap & Joomla UI 32

33. 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); ?>
April 13, 2013 JDNE: Bootstrap & Joomla UI 33

34. Load JavaScript
<?php
JHtml::_('bootstrap.framework');
?>
April 13, 2013 JDNE: Bootstrap & Joomla UI 34

35. 2. Download customized
Bootstrap files
http://twitter.github.com/
bootstrap
Customize
April 13, 2013 JDNE: Bootstrap & Joomla UI 35

36. Be safe: use the same
version
Extensions may need
components so include
them
Change variables to suit
Download and include as
normal CSS files
April 13, 2013 JDNE: Bootstrap & Joomla UI 36

37. 3. Create template.css
file from Joomla
Bootstrap LESS files
Come to my LESS talk
this afternoon
April 13, 2013 JDNE: Bootstrap & Joomla UI 37

38. Questions?
April 13, 2013 JDNE: Bootstrap & Joomla UI 38