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).