Minimal.js, Treesaver, Respond

18 Feb 2011 | By Alex Young | Tags design templating ui

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.

<h1></h1>
<p></p>
<p id="footer"></p>

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:

<ul>
    <li></li>
</ul>

And:

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

Results in:

<ul>
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>

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.


blog comments powered by Disqus