Skip to content

Boilerplate

Jump to bottom
Andrea Campi edited this page Oct 17, 2012 · 7 revisions

Use the following markup for as a base for a page using Treesaver. If this is your first time trying Treesaver, you should read through the Walkthrough:

HTML 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.10.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>

Notes:

  • Make sure the Treesaver <script> tag is the final element in the <head>, after the link to the Resources file and any stylesheets. This is required in order to ensure the IE8 and below properly process HTML5 tags. Additionally, this improves the user experience by letting the library download scripts in resources in parallel.
  • Do not remove the <meta name="viewport">, otherwise you will end up with very strange results on iPhone and Android
  • Always Declare the HTML5 doctype: The XHTML doctype is also usable, as long as Quirks mode processing is not triggered
  • Place content within an <article> tag: Any content outside the tag is ignored, and will be completely removed when performing layout. You can use that in order to present to content to older browsers, if desired (see Content Format for alternatives).

HTML 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>

Notes:

  • <head>, <title> and other contents are optional. They are not used by Treesaver and can be omitted completely.

CSS

  .treesaver body {
    /* Hide scrollbars */
    overflow: hidden;
    /* Use full body canvas */
    margin: 0;
    border: 0;
    padding: 0;
  }

  .chrome, .viewer, .grid, .column, .container {
    /* Manually position everything */
    position: absolute;
    /* Make sure seams aren't visible */
    overflow: hidden;
    /* Set the base vertical grid */
    line-height: 20px;
  }

  /* Stretch the viewer to fill the screen */
  .viewer {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .grid {
    width: 300px;
    border: 1px solid #ccc;
    margin: 9px;
  }

  .column {
    width: 280px;
    top: 5px;
    bottom: 5px;
    left: 5px;
  }

Notes:

  • This is a bare-bones starting point, it will look quite ugly
Clone this wiki locally