1. A short introduction to Joomla 3 - templates: bootstrap and less. 2. A simple way to easily convert a template to RTL

1. Yair Lahav

2. 
Joomla 3 templating



Bootstap
Less
Templates and RTL



Core code changing
CSS handling
Less handling

3. •
•
•
•
•
•
12-column grid
width of 940 pixels
row / span*
span1 = 60px
span12 = 940px
Space between columns are 20px
Example:
<div class="row">
<div class="span4">…</div>
<div class="span8">…</div>
</div>

4. 
Fluid Grid System
uses %for column
widths instead of pixels
<div class="row-fluid">
<div
class="span4">…</div>
<div class="span8">
…
</div>
</div>

Offsetting Columns
<div class="row">
<div class="span4">…</div>
<div class="span4 offset4">
…
</div>
</div>

5. <div class="row">
<div class="span6">
Level 1 of column
<div class="row">
<div class="span3">Level 2</div>
<div class="span3">Level 2</div>
</div>
</div>
</div>

6. 
Nesting with a fluid grid:


Sum of nested rows should be 12
Not the parent column
<div class="row-fluid">
<div class="span6">
Level 1 of column
<div class="row-fluid">
<div class="span6">Level 2</div>
<div class="span6">Level 2</div>
</div>
</div>
</div>

7. Label
Layout width
Column width
Gutter width
Smartphones
480 pixels and
lower
Fluid columns,
no fixed widths
Portrait tablet PCs
767 pixels and
lower
Fluid columns,
no fixed widths
Landscape tablet
PCs
768 pixels and
higher
42 pixels
20 pixels
Default
980 pixels and
higher
60 pixels
20 pixels
Wide-screen
monitor
1200 pixels and
higher
70 pixels
30 pixels

8. 
Variables
@nice-blue: #5B83AD;
@light-blue: (@nice-blue + #111);
#header { color: @light-blue; }
#header { color: #6c94be; }

9. 
Mixins
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;
.bordered;
}
.post a {
color: red;
.bordered;
}
#menu a {
color: #111;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
.post a {
color: red;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}

10. 
Parametric Mixins
.border-radius (@radius: 5px) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
#header {
.border-radius(4px);
}
.button {
.border-radius(6px);
}
#header-2 {
.border-radius;
}
#header {
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
.button {
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
#header -2{
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

11. 
Nested rules
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
&:hover { text-decoration: none }
}
}
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
&:hover { text-decoration: none }
}

12. 
Nested Media Queries
.one {
@media (width: 400px) {
font-size: 1.2em;
@media print and color {
color: blue;
}
}
}
@media (width: 400px) {
.one { font-size: 1.2em; }
}
@media (
width: 400px) and
print and color {
.one { color: blue; }
}

13. 
Core code changing

<root>/libraries/joomla/document/ document.php
public function addStyleSheet($url, $type = 'text/css', $media = null, $attribs = array())
{
if ($this->direction == 'rtl') {
$file = new SplFileInfo($url);
$rtlFileName = $file->getPath() . '/rtl/' . $file->getBasename();
if (JFile::exists (JPATH_ROOT . str_replace(JURI::Base(true), '',
$rtlFileName))) {
$url = $rtlFileName;
}
}
$this->_styleSheets[$url]['mime'] = $type;
$this->_styleSheets[$url]['media'] = $media;
$this->_styleSheets[$url]['attribs'] = $attribs;
return $this;
}

14. 






Zipped CSS or LESS files
Goto http://www.ahmadh.com/cssmirror/
You will get a new zip file
Create ‘rtl’ directory under the original
Extract the filesa from the new archive
Translate to Hebrew menus etc.
Insert your content

16. 

Be part of official Joomla code
Online (inline) convertor