Join GitHub today
GitHub is home to over 31 million developers working together to host and review code, manage projects, and build software together.Sign up
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
- Changes from 0.9.x to 0.10: Important information on changes in the latest version
- 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
- Requirements: For targeting content and functionality to the browser capabilities
- More information