DailyJS

Minimal.js, Treesaver, Respond

Introduction

Alex R. Young

Subscribe

@dailyjs

Facebook

Google+

ui design templating

Minimal.js, Treesaver, Respond

Posted by Alex R. Young on .
Featured

ui design templating

Minimal.js, Treesaver, Respond

Posted by Alex R. Young on .

minimal.js

minimal.js by Rui Lopes is a HTML/JSON template engine, for use with client-side JavaScript or Node.
In minimal.js there's no new template language to learn -- the templates
are HTML and the data is JSON. It doesn't depend on frameworks like
jQuery, but can work alongside them.

Which gets populated by using minimal.js like this:

$m({
  h1: "this is a title",
  p: "this is a paragraph",
  footer: "this is a footer"
});

Iteration can be used, there's a good example of this using unordered
lists:

And:

$m({
  ul: ["foo", "bar", "baz"]
});

Results in:

  foo
  bar
  baz

This library has a lot more features, but the simple idea of cleanly
separating templates from data got me wondering about combining it with
Backbone.js.

Treesaver

Treesaver (GitHub: Treesaver / treesaver, MIT and GPLv2) by
Filipe Fortes and Bram Stein is a framework for creating magazine-style
layouts. There's a Treesaver
tutorial
which
demonstrates creating the above example.

Respond

Respond (MIT or GPL Version 2) by Scott Jehl helps with creating responsive web
designs
--
essentially CSS3 media query support for Internet Explorer 8 and under.
Scott has worked at making the script fast and lightweight.

JavaScript is typically my ultimate solution for fixing IE6+ behaviour,
so I don't have a problem with Respond sitting in my toolkit next to
Modernizr.