-
Notifications
You must be signed in to change notification settings - Fork 107
Home
Filipe Fortes edited this page Feb 3, 2011
·
31 revisions
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.
- 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.
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, and 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
- Content Format: How to create content
- Resources: Package of design assets
- 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