Unlike most template engines that work by editing html code and inserting pieces of code or variables Vtpl uses css selectors to specify where to insert php code or variables into the html code with the goal to keep the html clean and untouched so you don't end up with html interwinded with php or other template language logic, keeping things clean and separate increases maintainability.

Vtpl templates are just lists of php code and variable names to insert into html, to specify the elements where to insert the code css selectors are used.

With Vtpl when the frontend template design of your app is changed you don’t have to change anything, the logic for the html file will be automatically applied for these new html files.

Vtpl ensures proper separations of concerns, the frontend logic is separated from presentation.

Vtpl makes it possible to build CMS's like Vvveb where any html page of the CMS can be changed to the last element without affecting the rendering of dynamic content from the database.

Documentation

Vtpl is just a list of key = value pairs.

On the left you need to specify the CSS selector and on the right the code that must be inserted for the selector.

The code to be inserted can be one of the following

Simple strings
div#id > span.class a = "lorem ipsum"
Php variables
div#id > span.class a = $variable
Php code for complex logic
div#id > span.class a = <?php if ($var) echo $var;?>

Note It's a good practice to use a standard for the css selectors, for example use data attributes like [data-product-name] instead of generic id's or css classes.

Include external html sections for better reuse by using from
/*
from, a special command that copies html from other templates,
useful to include up to date html code into all templates from the currently maintained template 
for the specified section a common use is to apply the header from homepage to all other other html templates
*/

div#top > div.header = from(homepage.html|div#top > div.header)

/*
Or you can skip the selector part, in this case the same selector (eg div#top > div.header) is assumed.
*/
div#top > div.header = from(homepage.html)

List of modifiers

innerHTML
/*
by default code is inserted into the specified elements without replacing the current elements (innerHTML) 
to replace the entire elements with the specified code use outerHTML modifier
*/

div#id > span.class a|innerHTML = "lorem ipsum"
Before
/*
Inserts the code before the element(s)
*/
div#id > span.class a|before = "lorem ipsum"
Prepend
/*
Inserts the code at the beginning inside the element(s)
*/
div#id > span.class a|prepend = "lorem ipsum"
After
/*
Inserts the code after the element(s)
*/
div#id > span.class a|after = "lorem ipsum"
Append
/*
Inserts the code at the end in the element(s)
*/
div#id > span.class a|append = "lorem ipsum"
deleteAllButFirst
/* Deletes all elements for the specified selector except for the first elements, usually in mockups front end developers add multiple elements to better show the final page look, the programmer just needs one element to iterate and fill data*/
div#id > span.class a|deleteAllButFirst

/*

<!-- this -->
<div id="id">
<span class="class">
<a>link 1</a>
<a>link 2</a>
<a>link 3</a>
</span>
</div

**wil result into this**

<div id="id">
<span class="class">
<a>link 1</a>
</span>
</div>
*/

hide

/*removes the specified elements if the variable ($articles) is false*/
div.articles|if_exists = $articles

delete

/* removes the specified elements*/
div.articles|delete

attributes

attributes
/*
to inject code into a tag's attribute you must specify the attribute as an modifier
*/
div#id > span.class a|href = "www.thewebsite.com"

div#id > span.class a|title = "The website"

Additional commands

Import

Includes additional files, usefull to separate logic when things get bigger and harder to maintain in one file

import(profile/activity_tab.tpl)

Comments

Vtpl can have comments 

 //single line  
 /* Or multiple line  
 comments  
 */

Debugging

/*
just on some portions with the following directive directly into the Vtpl files
/*
you can turn on debug with
*/
debug = true
/*
or turn it off with
*/
debug = false

When in debug mode, you will have a list of all template injections made on the html to visualize.