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