A new breed of mobile devices led by the Apple iPad are changing the way we think about web layout. Applications like Flipboard and Feedly have led the charge in a resurgence of magazine-style layouts both on the web and on the tablet.
The Treesaver wiki has a nice walkthrough to get you started and the project ships with an HTML boilerplate for both your content:
<!doctype html> <html class="no-js no-treesaver"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,maximum-scale=1"> <title>Sample Treesaver Page</title> <link rel="stylesheet" href="style.css"> <link rel="resources" href="resources.html"> <script src="treesaver-0.9.0.js"></script> </head> <body> <article> <p>This markup is an example of a page using Treesaver for layout. It is not very exciting right now.</p> </article> </body> </html>
and your resources:
<!doctype html> <html> <body> <div class="chrome"> <div class="viewer"></div> </div> <div class="grid"> <div class="column"></div> </div> <div class="loading"> Loading </div> <div class="error"> Error </div> </body> </html>
Be sure and check out the impressive demos, especially on the iPad. With this first public release, Filipe admits the project still needs a lot of work. But the GitHub repo has a deep wiki and is very active. If you’re interested in contributing, you can help knock out the growing list of bugs and features.
Sign in or Join to comment or subscribe