Key features and aspects:
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).
Last edited by Andrea Campi,