Skip to content

Home

Jump to bottom
Andrea Campi edited this page Oct 17, 2012 · 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, an 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

WARNING: the walkthrough is based on Treesaver 0.9.x. The upcoming 0.10.0 release contains several changes that are not backward compatible. The documentation is being updated to reflect that.

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

Reference

  • Treesaver Content Format
  • 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
    • Templates: For replacing metadata into grids and other elements
  • Analytics: Hooking up Treesaver to Google Analytics, and others
  • Requirements: For targeting content and functionality to the browser capabilities
  • Restrictions: Things not currently supported by Treesaver
  • FAQ: Common questions and issues
Clone this wiki locally