Presentatie: Basis template door joomill.nl

layout: true
<div class="footer"><div class="title">Basis template</div></div>

---
class: start
count: false

<div class="image"><div class="overlay"></div></div>
<div class="joomill"><div class="tagline">Samen maken we van jouw Joomla! website een succes</div></div>
# Een eigen template maken met de Basis template

---
class: center, middle
count: false

### deze presentatie is ook te vinden op:
## https://www.joomill.nl/slides

---
# Jeroen Moolenschot
<p>
<i class="fal fa-home fa-fw"></i>Waalwijk (Noord-Brabant)
<br>
--
count: false
<br>
<i class="fab fa-joomla fa-fw"></i> Werkzaam met het Joomla cms sinds 2006<br>
<i class="fal fa-globe fa-fw"></i>
<a href="https://www.joomill.nl" target="_blank">https://www.joomill.nl</a>
<br>
<i class="fal fa-code fa-fw"></i>
<a href="https://www.joomill-extensions.com" target="_blank">https://www.joomill-extensions.com</a>
<br>
--
count: false
<br>
<i class="fab fa-joomla fa-fw"></i> Werkzaam voor Joomla sinds 2015<br>
<i class="fal fa-user-cog fa-fw"></i> Ontwikkelaar bij het <a href="https://showcase.joomla.org" target="_blank">Showcase Directory</a> team van 2015 tot 2017 <br>
<i class="fal fa-user-cog fa-fw"></i> Ontwikkelaar bij het <a href="https://templates.joomla.org" target="_blank">Template Directory</a> team sinds 2017 <br>
<i class="fal fa-user-tie fa-fw"></i> Assistant Team Leader bij het <a href="https://certification.joomla.org" target="_blank">Certification Exam & Platform</a> team sinds 2017
<br><br>
</p>

---
# Onderwerpen

- <strong>Basis template</strong>
- Het ontstaan
- Wat is de basis template?
--
count: false
- <strong>Maestro template</strong>
- Achtergrond en inspiratie
- Verschillen met basis template
- Performance
--
count: false
- <strong>Basis template v2</strong>
- Nieuwe mogelijkheden uitgelicht
- De toekomst

---
## Het ontstaan van de Basis template
- <a href="https://github.com/Bloggerschmidt/Blank" target="_blank"> blank.vc </a> (Alexander Schmidt)
- Jan 2017: Rachel Walraven geeft een presentatie bij JUG Arnhem
- Basis template op <a href="https://www.joomlacommunity.nl/downloads/divers" target="_blank">joomlacommunity.nl</a>
- <a href="https://github.com/conconnl/joomla-basictemplate" target="_blank">Github versie </a> door Wilco Alsemgeest 
- Aanpassingen door: Hans Kuipers, Rene Kreijveld, Jeroen Moolenschot, Marc Pliester

---
## Wat is de Basis template?
- Een installeerbaar pakketje met bestanden waarmee je je eigen template kunt gaan bouwen.
--
count: false
- Bootstrap 3
--
count: false
- Fontawesome 5 (Free version)
--
count: false
- Less compiler
--
count: false
- Posities: Navbar, component, enkele moduleposities.
--
count: false
- Parameters: Logo/Titel, Google Analytics, Scroll to top, Container/Fluid.
--
count: false
- Het is dus geen kant en klaar template.

---
## Maestro template - achtergrond

- Voorheen - <a href="https://yootheme.com/themes/master2" target="_blank">Yootheme</a>
- Versie 1 - <a href="http://demov3.joostrap.com/" target="_blank">Joostrap</a>
- Versie 2 - Basis template

---
## Maestro template - inspiratie

- Perfect Web Team - <a href="https://github.com/perfectwebteam/basic-template" target="_blank">Basic Template</a>
- Stichting Sympathy - <a href="https://github.com/stichtingsympathy/joomlacommunity.nl" target="_blank">Joomlacommunity Website</a>
- Rene Kreijveld - <a href="https://github.com/renekreijveld/dsdTemplate" target="_blank">DSD Template</a>
- Patrick Smits - <a href="https://github.com/pjasmits/jifunza-template" target="_blank">Jifunza Template</a>
- Hans Kuipers - <a href="https://github.com/hans2103/ThisTemplate" target="_blank">This Template</a>
- Gonzalo Suez - <a href="https://www.masterbootstrap.com/" target="_blank">Master Bootstrap</a>
- Roland Dalmulder - <a href="https://github.com/joomla-extensions/boilerplate/tree/master/template" target="_blank">Joomla Boilerplate</a>

---
## Verschillen met de basis template
- Fontawesome 5 (PRO version)
- Verschillende LESS-bestanden (maestro, template, hikashop)
- Posities: toolbar-l, toolbar-r, logo, menu, slideshow, breadcrumbs, top-a/b/c/d, content-top, component, left, right, content-bottom, bottom-a/b/c/d, footermenu, copyright, cookies.
- Parameters: Te veel voor deze dia!

- Het is dus iets meer een kant en klaar template.

---
## Performance zonder demo-inhoud

- .titel[Basis template:] 79% - 1.9 sec	- 337kb	- 9 requests
- .titel[maestro:]		76% - 1.6 sec - 495kb - 9 requests
--
count: false
- .titel[Protostar:] 79% - 1.7 sec - 345kb - 12 requests	
- .titel[Beez3:] 68% - 2.0 sec - 576kb - 25 requests
--
count: false
- .titel[Yootheme PRO:] 68%	- 1.8 sec - 659kb - 12 requests
- .titel[Helix Ultimate:] 73% - 1.9 sec - 481kb - 16 requests
- .titel[Helix 3:] 71% - 2.0 sec	- 607kb - 27 requests	
- .titel[Joomlart T3:] 62% - 2.1 sec - 753kb - 28 requests
- .titel[RSJoomla:]	56%	- 1.8 sec - 0.96MB - 27 requests
- .titel[Rockettheme Ganty5:]	38% - 2.9 sec - 2.83MB - 47 requests
    
---
## Performance met demo-inhoud

- .titel[Basis template:] 79% - 1.9 sec	- 337kb	- 9 requests
- .titel[maestro:]		76% .red[(68%)] - 1.6 .red[(1.9)] sec -	495kb .red[(616kb)] - 9 .red[(19)] requests
- .titel[Protostar:] 79% .red[(69%)] - 1.7 .red[(2.1)] sec - 345kb .red[(469kb)] - 12 .red[(23)] requests	
- .titel[Beez3:] 68% .red[(69%)] - 2.0 .red[(3.8)] sec - 576kb .red[(601kb)] - 25 .red[(25)] requests
- .titel[Yootheme PRO:] 68% .red[(58%)] - 1.8 .red[(2.4)] sec -	659kb .red[(4.72MB)] - 12 .red[(42)] requests
- .titel[Helix Ultimate:] 73% .red[(23%)] -  1.9 .red[(2.2)] sec - 481kb .red[(3.99MB)] - 16 .red[(51)] requests
- .titel[Helix 3:] 71% .red[(32%)] - 2.0 .red[(7.3)] sec - 607kb .red[(1.63MB)] - 27 .red[(202)] requests	
- .titel[Joomlart T3:] 62% .red[(64%)] - 2.1 .red[(2.8)] sec - 753kb .red[(5.51MB)] - 28 .red[(71)] requests
- .titel[RSJoomla:]	56% .red[(60%)] - 1.8 .red[(3.2)] sec -	0.96MB .red[(2.65MB)] - 27 .red[(88)] requests
- .titel[Rockettheme Ganty5:] 38% .red[(5%)] -  2.9 .red[(3.2)] sec - 2.83MB .red[(14.4MB)] - 47 .red[(105)] requests
    
---

## Google Fonts

1. <a href="https://google-webfonts-helper.herokuapp.com/fonts" target="_blank">Google-webfonts-helper</a>
--
count: false
2. <a href="https://jaicab.com/localFont" target="_blank">.woff naar Base64</a>
--
count: false
3. Base64 Regels kopiëren naar css/fonts.css
--
count: false
4. in template.less bijv.
```css
body {font-family: 'Open Sans';}
```
---

## Pagina styling

- Code in /helpers/helper.php

- In de browser ziet dit eruit als:
```xml
<body class="option-com-content 
                 view-article 
                 no-layout 
                 no-task 
                 itemid-101 
                 en-GB 
                 parent-downloads 
                 path-home-blog-artikel-over-jugbreda 
                 member">
```

---

## Module Styling
- Code in /html/modules.php
- notitle
- standard

---
# Van parameter naar weergave in de frontend

---
## 1. Parameter aanmaken
 Code in /templateDetails.xml
```xml
				<field
					name="topapadding"
					type="radio"
					class="btn-group"
					default="padding-normal"
					label="Top A Padding"
					>
					<option value="padding-none">None</option>
					<option value="padding-normal">Normal</option>
					<option value="padding-large">Large</option>
				</field>
```
<a href="https://docs.joomla.org/Standard_form_field_types/nl" target="_blank">Meer info over formulierveld types</a>

---
## 2. Parameter ophalen via helper

- Code in /helpers/params.php
```xml
$topapadding = $this->params->get('topapadding', '');
```

---
## 3. Parameter gebruiken in template

- Code in /index.php
```xml
		<?php if ($this->countModules('top-a')): ?>
		<div id="top-a" class="top-a <?php echo $topapadding; ?>">
			<jdoc:include type="modules" name="top-a" style="standard" />
		</div>
		<?php endif; ?>
```

---
## Output
- In de browser
```xml
		<div id="top-a" class="top-a padding-normal">
			<jdoc:include type="modules" name="top-a" style="standard" />
		</div>
```

---
## 4. Styling in less-bestand
- In de template.less
```css
.padding-none {
	padding-bottom: 0px;
	padding-top: 0px;
}
.padding-normal {
	padding-bottom: 20px;
	padding-top: 20px;
}
.padding-large {
	padding-bottom: 50px;
	padding-top: 50px;
}
```

---
## Component breedte
- Code in /helpers/helper.php
```php
$grid = 12;
if ($this->countModules('left') && $this->countModules('right'))
{
	$componentwidth = ($grid - ( $leftwidth + $rightwidth ));
}
elseif ($this->countModules('left') && !$this->countModules('right'))
{
	$componentwidth = ($grid - $leftwidth);
}
elseif (!$this->countModules('left') && $this->countModules('right'))
{
	$componentwidth = ($grid - $rightwidth);
}
elseif (!$this->countModules('left') && !$this->countModules('right'))
{
	$componentwidth = $grid;
}
```

---
## Component op Homepage
- Code in index.php
```php
<?php
	$app = Factory::getApplication();
	$menu = $app->getMenu();
	$lang = Factory::getLanguage();

if ($homepagecomponent){ // show on all pages ?>
	<div id="content-area">
		<jdoc:include type="component" />
	</div>
	<?php } else {
	if ($menu->getActive() !== $menu->getDefault($lang->getTag())) { // show on all pages but not the homepage ?>
	<div id="content-area">
		<jdoc:include type="component" />
	</div>
<?php
	}
} 
?>
```
---
## Back to Top
- Code in /index.php
.center[![](images/backtotop.jpg)]

---
## Back to Top - CSS 
- Code in  /less/maestro.less
.center[![](images/backtotop-css.jpg)]

---
background-image: url(images/future.jpg)

---
##Deze presentatie

Gebouwd met <a href="https://github.com/gnab/remark" target="_blank">remark</a>

.blue[<i class="fa fa-long-arrow-right" ></i> <i class="fa fa-long-arrow-down" ></i>] volgende

.blue[<i class="fa fa-long-arrow-up" ></i> <i class="fa fa-long-arrow-left" ></i>] vorige

.blue[Home] naar eerste slide

.blue[End] naar laatste slide

.blue[b] wissel blank

.blue[m] spiegel

.blue[f] fullscreen

.blue[p] presentatie mode