Atto Tao Example

Tao is not a widget; rather, it's a helper function, in the same vein as Outliner. It's intended to be a lightweight replacement for the standard DOM method of creating new HTML structures, without the huge overhead of a full-blown templating system like Mustache or Dust or the like. Its syntax (and inspiration for its name) come from the popular Zen Coding abbreviation engine plugin available for many programming IDEs.


“#” operator – specifies the ID for an element (ignores multiple operands; an element can only have one ID):

div#main <div id="main"></div>


“.” operator – specifies the class for an element (multiple operands allowed):

blockquote.fancy.gothic <blockquote class="fancy gothic"></blockquote>


“>” operator – makes the following element a child of the preceding one:

ul>li <ul>
  <li></li>
</ul>


“+” operator – makes the following element a sibling of the preceding one:

div>p#intro+p#main <div>
  <p id="intro"></p>
  <p id="main"></p>
</div>


“<” operator – makes the following element a sibling of the preceding one's parent (i.e goes up one level in the tree):

header>h1<section.main <header>
  <h1></h1>
</header>
<section class="main"></section>


“{ }” operators – specifies the contents of a text node:

p>{A }+em{simple}+{ example} <p>
  "A "
  <em>simple</em>
  " example"
</p>


“[ ]” operators – specifies attributes other than class and id (comma-separated if more than one):

a#myId.myClass[href=http://foo.com,data-type=permalink] <a
  href="foo.com"
  data-type="permalink"
  id="myId"
  class="myClass"
/>


Two output options:
  1. DOM Fragment (default)
  2. Serialized/string (specify TRUE for the optional second argument to atto.Tao())

So far, this is more or less a subset of Zen Coding's power — I haven't yet added support for abbreviation groups (body>(header>h1)+(div#main)+(footer>span)), element multiplication (li*5>a), or item numbering (li#item$*3). I expect if this project proves useful, I'll probably add those features, as well as simple Supplant-style templating.

Try your own: