Wynn Netherland changelog.com/posts

treesaver: HTML5, JavaScript library for creating magazine style layouts for iPad and web

A new breed of mobile devices led by the Apple iPad are changing the way we think about web layout. Applications like Flipboard and Feedly have led the charge in a resurgence of magazine-style layouts both on the web and on the tablet.

Treesaver from Filipe Fortes is a new JavaScript framework for creating magazine-style layouts using standards-compliant HTML and CSS. Weighing in at just 25KB, Treesaver’s feature set is impressive providing support for grid and column layouts, custom UI’s, repeating content, cover pages, figures and illustrations, and analytics.

Demo 1 Demo 2

The Treesaver wiki has a nice walkthrough to get you started and the project ships with an HTML boilerplate for both your content:

<!doctype html>
<html class="no-js no-treesaver">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,maximum-scale=1">
    <title>Sample Treesaver Page</title>
    <link rel="stylesheet" href="style.css">
    <link rel="resources" href="resources.html">
    <script src="treesaver-0.9.0.js"></script>
  </head>

  <body>
    <article>
      <p>This markup is an example of a page using Treesaver for layout. It is not very exciting right now.</p>
    </article>
  </body>
</html>

and your resources:

<!doctype html>
<html>
  <body>
    <div class="chrome">
      <div class="viewer"></div>
    </div>

    <div class="grid">
      <div class="column"></div>
    </div>

    <div class="loading">
      Loading
    </div>

    <div class="error">
      Error
    </div>
  </body>
</html>

Be sure and check out the impressive demos, especially on the iPad. With this first public release, Filipe admits the project still needs a lot of work. But the GitHub repo has a deep wiki and is very active. If you’re interested in contributing, you can help knock out the growing list of bugs and features.

iPad screenshot

[Source on GitHub] [Homepage]


Discussion

Sign in or Join to comment or subscribe

Player art
  0:00 / 0:00