[Gozar]

шаблоны какого-то уже известного формата или что-то новое?

Нельзя назвать это новым, т.к. это готовый html с возможностью вставки в него конструкции foreach, для многократного повторения внутренних частей html. Кроме % foreach % ничего нет и наверное не будет. Есть еще три типа фиг. скобок {MyName} {this.id} и {data.MyDataName}

{MyName} - пишем туда что-нужно и называем как удобно {title}, {btnName} ...
(есть еще {style} {cls} {name} нужны проге дя работы) и {this.id} нужно программе, поэтому просто копипастим
{data.name} {data.id} ... это дата данные обычно то, что летит с сервера: [{id: "1", name:"Вася"}, {id: "2", name:"Петя"} ...]

То, что вставляется находиться в фигурных скобках. {MyPersoanlValue}
При создании элемента на странице указывается значение

g.ui({
MyPersonalValue: 'Тут мой текст'
})

Вот так можно сделать свой alert

app.alert('Вы не заполнили поле Имя!')

var app={};

    /*
     * add Elements
     */
    gui.addElement({
        alert: {
            tpl: '<div class="fj-alert {cls}" data-fj-id="{this.id}" data-fj-name="{name}">\
                  <div class="fj-alert__wrap"></div>\
                      <div class="fj-alert__box" style="{style}">\
                          <div class="fj-line"><div class="fj-alert__msg">{msg}</div></div>\
                          <div class="fj-line"><div class="fj-btn fj-alert__btn" data-fj-item="btn">{btnTitle}</div></div>\
                      </div>\
                  </div>',
            methods: {
                delete: function (fjID) {
                    this.remove(fjID);
                }
            }
        }
    });

app.alert = function (msg) {

        var uid = app.uniqId(), //функция возвращает уникальный (int)
            w = 600,
            h = 200;

        gui.ui({
            type: 'alert',
            name: 'alert'+uid,
            btnTitle: 'закрыть',
            msg: msg,
            style: {
                width: w+'px',
                height: h+'px'
            },
            events: {
                click: function (e) {
                    gui.method('delete', 'alert'+uid);
                }
            }
        });
    }

как вложить 2 или больше элемента внутри одного?

У каждого элемента есть name и parent, указываем parent и элемент вставиться как append внутрь родителя. Если parent не указан, то добавиться к body - удобно для разметки SPA

Теперь в качестве parent можно указывать не только name(fj-name /[a-z0-9]+/) родителя, css selector вида className, id, сложные селекторы(если в строке parent есть точка, решетка или пробел, то это css selector /[\.# ]/), но также и DOM node

1. name
2. .class, #id, body :first-child ... //если класс или id иначе лучше 3.
3. DOM node element (ссылка на дом элемент)

можно ли отрендерить разметку на сервере?

Нельзя и наверное никогда не будет можно. Только если ты сможешь показать мне что это нужно.

Я не понимаю смысла рендерить на сервере, даже на допотопном ноуте элементы строятся без зависаний. Если же в backgroundImage напихать картинок размером в 1мб штук 500 и построить любым способом на странице то тормоза будут гарантированны, но не из-за способа создания элементов.

Фреймворк в первую очередь создавался для того, чтобы быстро создавать нужные HTML элементы, которых очень мало в HTML или совсем нет. И для того, чтобы в будущем можно было рулить этим добром, без запарок. Сервер в данную концепцию не вписывается.