Skip to content

Home

Jump to bottom
Filipe Fortes edited this page Feb 3, 2011 · 31 revisions

Treesaver Documentation

What is Treesaver?

Treesaver is a JavaScript framework for creating magazine-style layouts that dynamically adapt to a wide variety of browsers and devices. Designers use standards-compliant HTML and CSS for both content and design, no JavaScript programming is required.

Key features and aspects:

  • Fast and compact: The JavaScript is under 25K gzipped (important for mobile).
  • Highly compatible: Works with most modern browsers, and degrades gracefully for older browsers (or those with JavaScript disabled).
  • Liberally licensed: Dual-licensed as MIT and GPL.

What Treesaver is not

  • Complete: The framework is still quite immature. There are still a lot of bugs that need to be fixed.
  • WYSIWYG: Treesaver is not designed to provide designers with the ability to create pixel-perfect layouts -- quite the opposite in fact. Treesaver is designed to give designers the ability to create general design guidelines, which are then used to quickly construct a layout appropriate to the current browser and device.
  • Suited for all content: Treesaver currently works best with simply-formatted text and images. Complex tables, videos, and JavaScript widgets might work, or they might not. Once again, the framework is not yet complete.

Using Treesaver

Here is a markup example for a page using Treesaver (see Treesaver Boilerplate for the full code):

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

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

In the markup above, there are a few key elements that are required for using Treesaver:

  • <link rel="resources" href="resources.html">: This is a reference to the Resources File, and HTML file that provides design elements (such as Grids and Chrome) used when creating page layouts. Conceptually, the resource file is similar to a CSS stylesheet.
  • <script src="treesaver.js"></script>: This loads the Treesaver framework, and should always be placed within the <head> of the document.
  • <article>: Treesaver looks for an <article> tag and displays its contents, anything outside of that tag is ignored (this is useful when providing alternate content for browsers that do not support Treesaver).

Tutorials

  • Walkthrough: Building a basic Treesaver experience, step-by-step

Reference

  • How Treesaver Works: A conceptual overview of how Treesaver performs layout.
  • FAQ: Common questions and issues
  • Treesaver Content Format ** Content Format: How to create content ** Resources: Package of design assets
  • Treesaver UI/Layout ** Chrome: Control the UI around content ** LightBox: Provide an interface for zooming Figures ** Grid: Specify structure used for page layout ** Article Order: Set up continous reading ** Figure: For displaying content outside of the main flow ** Container: For positioning images and other non-flowing content ** Column: For flowing content ** Field: For displaying repeated content
  • Requirements: For targeting content and functionality to the browser capabilities
  • Restrictions: Things not currently supported by Treesaver
Clone this wiki locally