A list with all Psttt! features
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
div#id > span.class a = “lorem ipsum”
div#id > span.class a = $variable
div#id > span.class a = <?php if ($var) echo ?some text?;?>
/* 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)
/* 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 */
/* Inserts the code before the elements */ div#id > span.class a|outerHTML = “lorem ipsum” /* this will result in “lorem ipsum”
/* Inserts the code after the elements */ div#id > span.class a|outerHTML = “lorem ipsum” /* this will result in “lorem ipsum”
/* 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> */
/*removes the specified elements if the variable is false*/ div.articles|if_exists = $articles
/* removes the specified elements*/ div.articles|delete
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”
import(profile/activity_tab.pst)
includes additional files, usefull to separate logic when things get bigger and harder to maintain in one file
Psttt! can have comments //single line /* Or multiple line comments */
/* 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 source code with examples can be found on github
Share this with the world
Related
Comments
No comments at this timeMake yourself heard