Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Joomladagen 2016 - Zelf snelle responsive Joomla templates bouwen

Het is leuk, handig, leerzaam en helemaal niet zo moeilijk om zelf templates te bouwen; zeker als je Bootstrap inzet en zelf een soort basis raamwerk als vertrekpunt gebruikt.
by

Joris Lange

on 4 May 2016

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Joomladagen 2016 - Zelf snelle responsive Joomla templates bouwen

Zelf templates bouwen

snelle
responsive
Joomla

Joris Lange, Smart Joomla Websites
Joomladagen, april 2016
http://www.smartjoomlawebsites.nl

Joomla webdevelopment
http://www.streamteamvideo.nl

Streaming webvideo
Templates en template frameworks
Meestal veel overbodige code
Meestal veel server calls en veel bestanden
Vaak complex
Soms conflicterend
Soms problemen bij updates (Joomla en extensies)
Afhankelijkheid van template bouwer
Vaak veel gepuzzel bij aanpassingen
Kant-en-klare template is vooral fijn als deze:
meteen helemaal klopt en past bij jouw wensen
en redelijk 'schoon' is

Doelen voor eigen template
Compacte code
Gebundeld, gecompileerd en geminificeerd
Betrouwbare code
Functioneel op vele devices, platforms en browsers
Responsive raamwerk
Herbruikbaar in volgende projecten
Templates liever zelf bouwen
Alles in eigen hand
Alleen code die nodig is
De weg kennen in eigen code
Wijzer worden op vele terreinen
Tijdrovend maar leuk en leerzaam
Op den duur juist tijdbesparend
Kale templates info
Gelukkig niet de eerste en enige die hiermee bezig is.
Schatplichtig aan:
Alexander Schmidt, Blank Template, http://blank.vc
Sander Potjer, Basic Template, https://github.com/perfectwebteam/basic-template
Hans Kuijpers, This Template, https://github.com/hans2103/ThisTemplate
Henk Rijneveld, Kaal Bootstrap, http://henkrijneveld.nl
Gonzalo Suez, Master Bootstrap, http://www.masterbootstrap.com
...
Middelen voor eigen template
Bootstrap 3 (of 2 of 4)
jQuery
Less
Font Awesome
Systeem voor inzetten/uitschakelen onderdelen
Basis module raamwerk
Bootstrap versie 2 of 3 (of 4)
Bootstrap 2
is makkelijk maar beperkt functioneel
Al geïntegreerd in Joomla
Responsive niet vanzelfsprekend
Desktop first als vertrekpunt
Eén variant mobiel met gestapelde kolommen
Bootstrap 3
is moeilijk maar bijzonder functioneel
Zelf implementeren
Puzzelen met Joomla overrides
Puzzelen met extensies
Responsive van grond af aan
Mobile first als vertrekpunt
Veelzijdig herschikken op bredere schermen
Compactere code
Bootstrap 4
als 3 maar beter (nu nog alpha)
Extra breekpunt, Flexbox (!), meer responsive e.d.
^^^
Bootstrap info
Mark Otto and Jacob Thornton, Bootstrap, http://getbootstrap.com
Erik Flowers: Bootstrap 3 Grid Introduction, http://www.helloerik.com/bootstrap-3-grid-introduction
Erik Flowers: The Subtle Magic Behind Why the Bootstrap 3 Grid Works, http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works
Bootply, http://www.bootply.com/
...
Bouwen maar!
Zelf templates bouwen

snelle
responsive
Joomla

Template onderdelen
templateDetails.xml
/framework
index.php
logic.php
/css
/js
/html
/fonts
/images
titel/bestandenset/modules/opties
module raamwerk
basis
functionaliteit (aan/uit)
less van Bootstrap, FA en template
Bootstrap, jQuery e.a. scripts
joomla-overrides
FA (font awesome) e.a. font files
template afbeeldingen
En diverse andere files:
favicon.ico, template_preview.png, template_thumbnail.png,
component.php, error.php, offline.php,
print.css, error.css, offline.css, editor.css e.a.
Head 'normaal'
Head kaal na aanpassingen
Head eigen template
index.php
logic.php - variabelen en metadata
Framework/file.php
Basis:
template.css
HTML override files
Voor Bootstrap3 zijn veel aanpassingen nodig.
Zie http://www.bootply.com/bootstrap-3-migration-guide

Veel standaard aanpassingen zijn met eigen JavaScript of bijv. NoNumber ReReplacer te regelen.
Niet alle (bijvoorbeeld lastig met meerkoloms content).
Bijvoorbeeld 'span-x' vervangen door 'col-md-x'.
Voorbeeld JavaScript in template files.

Aantal zaken echt zelf maken in template overrides.
Paar voorbeelden in template files.

Wie bouwt er mee?
templateDetails.xml
Framework modules
<jdoc:include type="modules" name="
header
" style="xhtml" />
<jdoc:include type="modules" name="
navbar
" />
<jdoc:include type="modules" name="
top
" style="xhtml" />
<jdoc:include type="modules" name="
left
" style="xhtml" />
<jdoc:include type="message" />
<jdoc:include type="modules" name="
above-content
" style="xhtml" />
<jdoc:include type="
component
" />
<jdoc:include type="modules" name="
below-content
" style="xhtml" />
<jdoc:include type="modules" name="
right
" style="xhtml" />
<jdoc:include type="modules" name="
bottom
" style="xhtml" />
<jdoc:include type="modules" name="
footer
" style="xhtml" />
<jdoc:include type="modules" name="debug" />

Framework/file.php
Details:
Framework/file.php
Menu via extensie regelen
of in raamwerk integreren:
logic.php - add scripts
logic.php - unset scripts
logic.php - add css/less
template.less
less css
Less is pre-processor voor css. Voordelen o.a.:

mixins
variabelen
geneste selectors
rekenen met waarden

less variables
Allround framework
Nostalgie (een van de eerste goede instructies voor basis template bouw): Barrie North, Joomla 1.5 Tutorial for Creating a Simple Blank Template,
http://www.compassdesigns.net/joomla-15-template-tutorial/
less mixins
Zelf templates bouwen

snelle
responsive
Joomla

http://www.smartjoomlawebsites.nl/sjtemplate
Veel modules
=
pré-Bootstrap
Joris Lange, mail@smartjoomlawebsites.nl
Modules in Bootstrap row
Bootstrap variables
Bootstrap 3 grid basics
container of container-fluid bepaalt breedte
container heeft 15 pixels marge (padding)
rows steken 15 pixels uit (negatieve marge)
cols hebben ieder 15 pixels marge (padding)
buitenste cols daarom binnen container rand
dus combi container-row-col(s) gaat goed
Framework/file.php
Full transcript