Clone this wiki locally
What is Treesaver?
Key features and aspects:
- 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.
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).
- Walkthrough: Building a basic Treesaver experience, step-by-step
- How Treesaver Works: A conceptual overview of how Treesaver performs layout.
- 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
- Field: For displaying repeated content
- 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