Skip to content

Home

Jump to bottom
Andrea Campi edited this page Oct 17, 2012 · 31 revisions

Treesaver Documentation

WARNING: the current documentation 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.

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

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

Reference

  • FAQ: Common questions and issues
  • 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
Clone this wiki locally