ZenCoding 2.0

by BinaryAcid

HTML

<script src="http://jslib.dotcloud.com/fiddle-require.js"></script>
<script src="https://raw.github.com/seriousmoth/zen-markup/master/zen-markup.js"></script>

<h1>Zen Coding Training</h1><br>

<div class="example">
    <h2>Rule: Use '.' to indicate the class of the element being created.</h2>
    <p>Zen: ul#my-list > li.elem + li.elem</p>
    <div>HTML:<span id="output1"></span></div>
    <h2>DOM:</h2>
    <div id="output2">boo</div><br>
</div>

<h2>Use '#' to indicate the id of the element being created.</h2>
<p>Example: ul#my-list > li.elem + li.elem</p>
<textarea id="field2" rows="2" cols="55"></textarea>

<h2>Use '>' to indicate the next elements should be created as children.</h2>
<p>Example: ul#my-list > li.elem + li.elem</p>
<textarea id="field3" rows="2" cols="55"></textarea>

<h2>Use '+' to indicate the next elments should be created as siblings</h2>
<p>Example: ul#my-list > li.elem + li.elem</p>
<textarea id="field4" rows="2" cols="55"></textarea>

CSS

.example {
 border: 2px solid gray;   
}

.parent {
    border: 1px solid red;
    height: 50px;
    width: 50px;
}

.child {
    border: 1px solid blue;
    height: 10px;
    width: 10px;
    margin: auto;
    margin-top: 10px;
}

JavaScript

var zenSnippet1 = ZenHTML('ul#my-list > li.elem + li.elem');
$("#field1").val(zenSnippet1);

var zenSnippet2 = ZenHTML('ul#my-list > li.elem + li.elem');
$("#field2").val(zenSnippet2);

var zenSnippet3 = ZenHTML('ul#my-list > li.elem + li.elem');
$("#field3").val(zenSnippet3);

var zenSnippet4 = ZenHTML('ul#my-list > li.elem + li.elem');
$("#field4").val(zenSnippet4);

$("#output1").text(zenSnippet4);

// var zenSnippet = ZenHTML('ul#my-list > li.elem + li.elem');
var zenSnippet = ZenHTML('div.parent>div.child');


// alert(zenSnippet);
$("#output2").html(zenSnippet);