Zen grid 2.0 基本用法 for drupal

前言

這是以drupal 為開發環境，使用zen grid 的 東西，寫下這篇是為了讓未來的我忘記時，能有東西可以參考，不想浪費太多時間～

Zen grid 基本 mixin 介紹

1. zen-grid-container()

這個mixin 就像是 bootstrap 或是 flexboxgrid 的 row 一樣的概念。 當你要宣告 columns 時，它們的父元素必須使用此 mixin。 如果你對 bootstrap 和 flexboxgrid 這些知名的css framework 不熟 ， 其實你們可以去玩玩看，對你們會很有幫助。

2. zen-grid-item-base()

使用預設的 gutters 變數的值; 那預設的 gutter 值是從何而來呢？它來自 zen 的子版型裡有一個 scss 檔專門放 zen grid 所需要用到的變數，都會放在那個檔案裡。

3. zen-apply-gutter-padding()

這個參數需要搭配 zen-respond-to 來達到針對某個尺寸下 會有多少 gutters 。上方的 zen-grid-item-base 則無針對某個尺寸做變化。

4. zen-grid-item()

這是 zen grid 要宣告某個元素需要使用幾個 columns 時，會用到的 mixin ; 這個 mixin 就像是 bootstrap 或是 flexboxgrid 的 columns 一樣的概念。 在這些 framework 中 ， 總 columns 的 total 為 12 ， 但在 zen grid 中， columns 的 total 能按照你想要有多少就有多少。

Example :
html~

<div class ="row">
  <div class= "column_16">
  </div>
  <div class = "column_8">
  </div>
</div>

css ~

.row {
  // 如 我上面所說當你要宣告 column 時 ， 父元素必須使用此mixin
  zen-grid-container();
}

.column_16 {
  zen-grid-item(16,1);
}

.column_8 {
  zen-grid-item(8,17);
}

column_16 這個 class 放的參數意義 如下：
16 : 代表當前的元素會有 16 columns
1 : 從最左邊第 1 個 column 為起點算起

column_8 這個 class 放的參數意義 如下：
8 : 代表當前的元素會有 8 columns
17 : 從最左邊第 17 個 column 為起點算起

1. 為何 column_8 為從第 17 個算起呢？因為 column_16 這個 class 已經佔了 16 個 columns 所以另一個 column 必須從第 17 個算起

2. 那 一個 row 裡面的 總 columns 是多少？ 該去哪裡定義呢？ 要定義 columns 數 可以在 _variables.scss 裡進行定義。

3. zen-grid-item 還有第三個參數; 從哪一個方向算 column 數 參數有：right、left(default)

5. zen-respond-to

這個是 zen grid 在做 rwd 最重要的一個 mixin; 它需要搭配 add-breakpoint mixin 來定義 media query 的值 ， 而且 zen 的 column 及 gutter 都可以依照此 mixin 變動。

Example:

我在 variables.scss 中 定義了這兩個 media query 的值
分別是 769px 980px

我在 variables.scss 中 分別對上面兩個 media query 來改變 zen grid 的 column 及 gutter

html :

<div id="content">
  <div id="main">
  </div>
  <div id="left-sidbar">
  </div>
</div>

css:

#content {
  // 如 我上面所說當你要宣告 column 時 ， 父元素必須使用此mixin
  zen-grid-container();
  //將剛剛定義的 add-breakpoint 定義好的變數帶進來
  @include zen-respond-to(custom2) {
    zen-grid-container();
  }

  @include zen-respond-to(custom3) {
    zen-grid-container();
  }
}

#content #main {
  //在zen-respond-to都不成立的強況下，使用預設的值

  @include zen-grid-item-base();
  @include zen-grid-item(1, 1);

  //將剛剛定義的 add-breakpoint 定義好的變數帶進來
  @include zen-respond-to(custom2) {
    @include zen-grid-item(8,1,right);
    @include zen-apply-gutter-padding();
  }

  @include zen-respond-to(custom3) {
    @include zen-grid-item(18,1,right);
    @include zen-apply-gutter-padding();
  }
}

#content #left-sidbar {
  //在zen-respond-to都不成立的強況下，使用預設的值

  @include zen-grid-item-base();
  @include zen-grid-item(1, 1);

  //將剛剛定義的 add-breakpoint 定義好的變數帶進來
  @include zen-respond-to(custom2) {
    @include zen-grid-item(4,1);
    @include zen-apply-gutter-padding();
  }

  @include zen-respond-to(custom3) {
    @include zen-grid-item(6,1);
    @include zen-apply-gutter-padding();
  }
}