elements-lite

@version    0.5.0
@date       2015-01-13
@stability  1 - Experimental

Elements –

Syntax follows CSS Selectors where possible.

Usage

<script src=elements-lite.js></script> should place inside body.

Create elements one by one

El("div", "test").to(document.body)
//<div>test</div>

El("a#link[href='/home']", "Home").to(document.body)
//<a id="link" href="/home">Home</a>

El("a", {id:"link", href:"/home"}).append("Home").to(document.body)
//<a id="link" href="/home">Home</a>

El(".custom", "test").to(document.body)
//<div class="custom">test</div>

Templates

It is a template engine inspired by Haml but uses CSS selectors like syntax for describing elements and attributes.

Tags

By default, text at the start of a line (or after only white space) represents an html tag. Indented tags are nested, creating the tree like structure of html.

ul
  li Item A
  li Item B

becomes

<ul>
  <li>Item A</li>
  <li>Item B</li>
</ul>

From CSS Class selectors, ID selectors, Pseudo-classes selectors and Attribute selectors are supported.

a#123.link.bold[href="#A"][title=go] link
button:disabled

becomes

<a id="123" class="link bold" href="#A" title="go">link</a>
<button disabled="disabled"></button>

To save space you can use an inline syntax for nested tags.

a>i text

becomes

<a><i>text</i></a>

Inline templates

ul.list
  @template my-row
    li.my-row > b row
  my-row
  my-row

becomes

<ul class="list">
  <li class="my-row"><b>row</b></li>
  <li class="my-row"><b>row</b></li>
</ul>

Browser Support

It should work IE6 and up but automated testing is currently broken.

External links

• Source-code on Github
• Package on npm

Licence

Copyright (c) 2012-2014 Lauri Rooden <[e-mail]>
The MIT License