@version    0.7.0
@date       2016-05-23
@stability  2 - Unstable


A small JavaScript framework for building single-page applications with declarative programming and less code.

Weighing in at just 23KB (10KB gzipped), it includes

No dependencies

See a working example with a source code in 60 lines.

It also supports SVG elements, so it is possible to build full SVG single-page applications.
See a example with a source code in 60 lines.


It has a template engine with CSS selectors syntax for describing elements and attributes.

  li Item A
  li Item B


  <li>Item A</li>
  <li>Item B</li>
</ul>[href="#A"][title=go] My link


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

Child combinators can be used and you can leave off the tag to get a div.

  a>i text


<div class="my-class">

Inline templates

  @template row
      a > b Row


  <li class="my-row first"><a><b>Row</b></a></li>
  <li class="my-row last"><a><b>Row</b></a></li>


Organize views into a hierarchy with built-in router.

View(name, element, parent, contentSelector)

How to use

// Optional path for views, default = ""
View.base = "/js/views/"

// Define starting point in DOM
View("body", document.body)

// Create first simple view
View("home", ".home", "body")

// Create another view
View("work", ".work", "body")

// Start
View.main = "home"

// call manualy

Style Guidelines

All code in any code-base should look like a single person typed it, no matter how many people contributed.

Arguments over style are pointless.
There should be a style guide, and you should follow it.
-- Rebecca Murphey

General Style Guide

JavaScript Style Guide

var foo, bar
, MAX_AGE = 120
, baz = "baz"
, quux = 123

function Person(name, sex) {
    var person = this = name
    for (var i = 100; --i; ) {
        person.sing(i + " bottles of beer on the wall")
    switch (sex) {
    case "male":
        person.wear("bow tie")
    case "female":"makeup")
    ;["healthy", "pretty", "wise"].map(person._setFlags, person)
Person.prototype._setFlags = function(flag) {
    this[flag] = true
// Bad
var a = function() {}

// Good
function a() {}

CSS Style Guide

/* icon.css */
.icon {
    width:  16px;
    height: 16px;
    background-image: url(sprite.png);
        1px 1px 1px #000,
        2px 2px 1px 1px #ccc inset;

    -webkit-transition: all 4s ease;
       -moz-transition: all 4s ease;
        -ms-transition: all 4s ease;
         -o-transition: all 4s ease;
            transition: all 4s ease;

.icon--person   { background-position: -16px   0  ; }
.icon--files    { background-position:   0   -16px; }
.icon--settings { background-position: -16px -16px; }



Certain tags are used in comments to assist in indexing common issues:

There is a risk that tags accumulate over time; it is advisable to include the date and the tag owner in the comment to ease tracking.

// TODO:2008-12-06:johnc: Add support for negative offsets.
// While it is unlikely that we get a negative offset, it can
// occur if the garbage collector runs out of space.
// THANKS: Ralf Holly - TODO or not TODO []


Please clean up logs when they are no longer helpful. In particular, logging the same object over and over again is not helpful. Logs should report what’s happening so that it’s easier to track down where a fault occurs.

Setup Git

git config --global 'Real Name'
git config --global <me>@<email>
# To prevent accidental pushes to branches which you’re not ready to push yet
git config --global push.default tracking
# Do not conflict with compiled files specified in .gitattributes
git config --global merge.ours.driver true
# setup rebase for every tracking branch
git config --global branch.autosetuprebase always
# Store passwords permanently in plaintext to ~/.git-credentials file
git config --global credential.helper store
# ... or cache for an hour
git config --global credential.helper 'cache --timeout=3600'


Copyright (c) 2013-2016 Lauri Rooden <[email protected]>
The MIT License

Since 2013 to 2015