Grid

Grid

A Grid is an HTML skeleton used as a template for pages. Grids specify the size and position of Column and Container elements, along with Field or other design elements.

Markup Example

A Grid containing a single Column and one Container

  <div class="grid">
    <div class="container" data-sizes="pullquote"></div>
    <div class="column"></div>
  </div>

Sizing / Stretching

When using a Grid, the height of the page is calculated by finding the largest value of x that satisfies the following formula:

(Grid minHeight) + x * (Grid lineHeight) <= availableHeight - (Grid margin+border+padding)

In plain English, this is the minimum height of the Grid plus the highest multiple of line height that will fit in the available space. Height is calculated this way in order to maintain the Vertical Grid.

In practice, this is used in order to account for the positioning of columns within the grid. For example:

  .mygrid .column {
    /* Columns have more space above than below */
    top: 40px;
    bottom: 15px;
  }

  .mygrid {
    line-height: 20px;
    /* Column top + column bottom */
    min-height: 55px;
  }

In the example above, we use a min-height of 55 pixels, which guarantees that we always maintain the correct vertical grid when increasing the size of the page.

Imagine instead that .mygrid had a min-height of 100 pixels, and was stretched to fit into 510 pixels of height. Treesaver would compute a total height of 500 pixels for the page. The column would then end up with a height of 445 pixels (500 - 40 - 15), which gets rounded down to the nearest line height multiple of 440 pixels. Now instead of having 15 pixels of space between the bottom of the page and the column, there will be 20 (since the 440px height overrides the bottom declaration).

Fixed Size Grids

Specifying class=fixed on a Grid will prevent an automatic height stretching. This is required when desigining layouts that require specific page dimensions.

Page Flags

The following special CSS classes can be used to modify the behavior of each Grid:

• odd: Only use the Grid on odd pages of the story
• even: Only use the Grid on even pages of the story
• page-2, page-3, etc: Only use the grid on the given page numbers. If class=page-2 page-4, then the grid can only be used for page two or page four, and never anywhere else
• no-page-2, no-page-3, etc: Never use the grid on those given page numbers
• onlypage: If used, will be the first and only page in the entire article, even if there is still leftover content. Used for cover pages
• sizetocontainer: Make the page the height of the first Container found in the Grid. Used for slideshows
• fixed: Do not stretch the height of the grid (see section on sizing for details)

You can mix and match these at will, for example:

  <div class="grid page-3 sizetocontainer">
    <div class="container" data-sizes="fullpage"></div>
  </div>

Grid Selection

When creating a page, Treesaver does the following:

• Theme: If the Article specifies a Theme via the data-theme property, any Grid that does not have that theme name as one of the CSS classes will automatically be rejected from consideration
• Size: If the minimum or maximum size of the Grid falls outside of the current size range, it will be rejected
• Flags: Page flags are used to either boost or reject Grids

Once all non-qualifying grids have been filtered, Treesaver performs a quick calculation to guess what the page layout might look like using the template, checking to see if containers can be filled, and how much text can be placed into columns. Treesaver then chooses the Grid that provides the "best" fit and creates the page using that Grid as the page skeleton.

Templates

Use templates to bind to data provided by the contents JSON. For example, you can bind an element to the current article's title with the data-ts-template attribute, as in the following example:

  <div class="grid">
    <div data-ts-template="document">{{title}}</div>
    <div class="column"></div>
  </div>