Home

New: Version 2.0 Tentative Features are here. Please feel free to suggest your own or edit what is already there.

Implemented:

• E#name – element id
• E.name – element class
• E>E – child
• E+E – sibling
• E[attr] – attributes
• nested groups
• automatic div assumption

NOT Implemented:

• E*N – N repeats of E
• E*N$ – N repeats of E with $ as index starting at 1
• E+ – special sets of elements such as tables and lists
• filters

A little discussion:

My intention with this project is to not recreate the Zen-Coding project in its entirety. Instead, I want to make this into a templating solution for jQuery in which a derivation of the Zen-Coding syntax can be used along with a data object to automatically make and insert snippets of HTML into the DOM. With this in mind, here is what I am currently thinking in these early stages of development:

$.zc("div#name>ul>li{Hello &myArray[*].personName&!}",
  { myArray: ['Bob','Jill'] }
);

would produce the following HTML:

<div id="name">
  <ul>
    <li>Hello Bob!</li>
    <li>Hello Jill!</li>
  </ul>
</div>

Assuming I stick to this syntax, it would mean that javascript variables within the data object are referenced by ampersands, [*] loops the element through an array or collection, and cearly braces are used to specify the innerHTML of an element.