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 (isset($var)) echo htmlentities($var);?>

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

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

**will result into this**

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

The same as deleteAllButFirst but will keep the first element (child element) for each set, all parent elements will keep only one child element in contrast with deleteAllButFirst that works globally.

This is used for loops when you only need one item to iterate

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

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

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

Class and attribute helpers

/* add / remove css classes */
div.alert|addClass = "show"
div.alert|removeClass = "hidden"

/* add a new attribute (fails if it already exists) / remove one */
input|addNewAttribute = "required"
a|removeAttribute = "title"

/* set element text (alias: innerText) */
span.name|text = $user['name']

You can also use variables directly in the attributes

 
<img alt="$image.alt" src="">
 
<a href="$this.product.url">link</a>
 
<span title="$date_modified"></span>

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)

Optional parameters

import(crud.tpl, {"type":"return_status"})

then in crud.tpl you can use the parameters as follows

[data-v-{{type}}] [data-v-name] = $this->{{type}}['name'] //{{type}} will be replaced with return_status
[data-v-{{type}}] [data-v-*] = $this->{{type}}[''@@__data-v-(*)__@@'']//catch all

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.