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