Psttt! is kind of a template engine but it does not alter original html files it just uses original mockups from the initial development stage, allowing continuous mockup development and leaving front end developers and programmers living in peace by excluding the possibility to step on each others toes.

With Psttt! when the developer changes the layout you don’t have to change anything you already wrote, the logic for the html file that will be automatically be injected in his new html files.
That’s the power of keeping things clean and separated, no more html + logic hard to maintain bloat, that just doesn’t cut it in an continuous changing living and breathing website.

full article

Documentation

Psttt! 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 injected for the selector.
The code to be injected can be one of the following

simple strings

p(=syntax).
div#id > span.class a = “lorem ipsum”

h2. php variables

div#id > span.class a = $variable

Php code for complex logic

div#id > span.class a = 

External html includes, “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
*/
div#top > div.header = from(homepage.html|div#top > div.header)
/*
Or you can skip the selector part, in this case the same selector is assumed.
*/
div#top > div.header = from(homepage.html)

List of modifiers
h3. outerHTML

/*
by default code is injected into the specified elements without replacing the elements (innerHTML) to replace the entire elements with the specified code use outerHTML modifier
*/
div#id > span.class a|outerHTML = "lorem ipsum"
/*
now the entire "": will be replaced with "lorem ipsum" text instead of the default behaviour of inserting the text like this "lorem ipsum":
*/

before

/*
Inserts the code before the elements
*/
div#id > span.class a|outerHTML = "lorem ipsum"
/* this will result in "lorem ipsum"":"

after

/*
Inserts the code after the elements
*/
div#id > span.class a|outerHTML = "lorem ipsum"
/* this will result in """: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

%
"link 1":
"link 2":
"link 3":
%
 span.class a = $variable

Php code for complex logic

div#id > span.class a =  <?php if ($var) echo ?some text?;?>

External html includes, “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
*/
div#top > div.header = from(homepage.html|div#top > div.header)
/*
Or you can skip the selector part, in this case the same selector is assumed.
*/
div#top > div.header = from(homepage.html)

List of modifiers
h3. outerHTML

/*
by default code is injected into the specified elements without replacing the elements (innerHTML) to replace the entire elements with the specified code use outerHTML modifier
*/
div#id > span.class a|outerHTML = "lorem ipsum"
/*
now the entire "": will be replaced with "lorem ipsum" text instead of the default behaviour of inserting the text like this "lorem ipsum":
*/

before

/*
Inserts the code before the elements
*/
div#id > span.class a|outerHTML = "lorem ipsum"
/* this will result in "lorem ipsum"":"

after

/*
Inserts the code after the elements
*/
div#id > span.class a|outerHTML = "lorem ipsum"
/* this will result in """: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 is false*/
div.articles|if_exists = $articles

delete

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

outerHTML

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"

additional commands
h3. import

import(profile/activity_tab.pst)

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

Comments

Psttt! can have comments
//single line
/* Or multiple line
comments
*/

Debugging

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

Or by setting the class property debug to true;
When in debug mode, you will have a list of all template injections made on the html to visualize.

Psttt! is very simple but very powerfull, new features will be added when new templating problems will show that can’t be solved with the current ones.

It’s used in production in my projects and it evolves by real world needs.
If you have any suggestions, critics or feedback don’t keep it for yourself it may help make Psttt! better.

full documentation