TreeSaver 使用教程整理——Step 3: Creating Grids

请首先阅读前几篇教程，才能对本篇文章了解比较深入：

TreeSaver 使用教程整理——Step 1: Getting Started

TreeSaver 使用教程整理——Step 2: Adding Basic UI

我们在第二步的基础上，copy到 step3 作为我们 step3 初始的基础。

 

Step 3: Creating Grids

模板文件 resources.html 的变化

在原先

    <div class="grid">
      <div class="column"></div>
    </div>

后面添加如下模板信息：

<div class="grid cols-2">
  <div class="column"></div>
  <div class="column col-2"></div>
</div>
<div class="grid cols-3">
  <div class="column"></div>
  <div class="column col-2"></div>
  <div class="column col-3"></div>
</div>

说明：

杂志化的排版，分栏是必需的，这时候我们就要用到Grid，每一栏填满后，就继续填充下一栏。
A Grid is like an empty page skeleton, Treesaver searches for Columns within a grid (a column is any element with the column class), and automatically fills the column with text until full. When all the columns within a grid have been filled, the page is complete.

 

样式文件的变化

把原先如下两节样式

.grid {
  width: 300px;
  border: 1px solid #ccc;
  margin: 9px;
  opacity: .25
}
.column {
  width: 280px;
  top: 5px;
  bottom: 5px;
  left: 5px;
}

修改为：

.grid {
  width: 310px;
  border: 1px solid #ccc;
  margin: 9px;
  opacity: .25;
  min-height: 30px;
}
.cols-2 {
  width: 620px;
}
.cols-3 {
  width: 940px;
}
.column {
  width: 280px;
  top: 15px;
  bottom: 15px;
  left: 10px;
}
.col-2 {
  left: 320px;
}
.col-3 {
  left: 630px;
}

说明：

我们对CSS做了如下修改：

• 重新定义分栏，Treesaver 是通过绝对定位来控制布局的，为了页面和分栏的空白，我们设置.column 的 bottom: 15px;top: 15px; 设置.column 的left: 10px; 是为了避免重叠。
  Positioning Columns: Treesaver gives designers complete control over column sizing and placement, via absolute positioning. In the .column clause, we set top and bottom to 15px in order to give a bit of whitespace between the columns and the page border. The left property is used to horizontally position each column, otherwise the columns would overlap each other.
• 分栏的宽度，假设我们希望每栏的宽度是 280px，则第二列的宽度应该是：(280 * 2 + 30 + 15 * 2 = 620),30 是两列间的缝隙，15是边框的距离。
  Setting Grid width: By adding the CSS class cols-2 or cols-3 to the grids, it is relatively simple to adjust the grid width in order to have space to place each column. We have calculated the width based on the number of columns, and the amount of whitespace we want around each column. For instance, the two-column grid has two columns that are 280px wide, plus a 30px gutter and 15px between the columns and the outer page border (280 * 2 + 30 + 15 * 2 = 620).

 

 

演示效果：

我们每页都采用了分三栏的方式。

 

参考资料：

https://github.com/Treesaver/treesaver/wiki/Walkthrough