格線

如果您熟悉 Foundation for Sites 格線，那麼您會很習慣使用 Foundation for Emails。

格線有兩個核心元素：列和欄。列定義內容的水平區段，而欄則將列切割成並排的區段。

容器

所有電子郵件都應該有一個容器元素。這會為電子郵件在較大螢幕上的電子郵件用戶端提供最大寬度。它也會將電子郵件置中。

容器是一個完整的表格，因此它需要標籤 <table>、<tr>，最後是 <td>。類別 .container 出現在 <table> 上。

HTML

<container>All the rows go here</container>

<html>

<head></head>

<body>
  <table align="center" class="container">
    <tbody>
      <tr>
        <td>All the rows go here</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

示範

列

列是一個 <table>，包含 <tbody> 和 <tr>。在這個 <tr> 內，您會放置每個單獨的欄。<table> 也有類別 .row。

在 Inky HTML 中，使用 <row> 標籤來建立列。

HTML

<container>
  <row>
    Columns go here
  </row>
</container>

<html>

<head></head>

<body>
  <table align="center" class="container">
    <tbody>
      <tr>
        <td>
          <table class="row">
            <tbody>
              <tr>
                Columns go here
              </tr>
            </tbody>
          </table>&zwj;
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

示範

欄

欄的結構稍微複雜一些。在頂層，欄是一個 <th>，類別為 .columns。

在 <th> 內是另一個完整的表格。欄的內容會出現在 <th> 內。就在該表格標題下方應該有另一個 <th>，類別為 .expander。這個空元素有助於欄在小螢幕上擴展為全寬。

以下為我們目前完整的欄位語法

<th class="columns first last">
  <table>
    <tr>
      <th>This is a column. Columns contain your content.</th>
      <th class="expander"></th>
    </tr>
  </table>
</th>

在 Inky HTML 中，使用 <columns> 類別建立欄位。

HTML

<columns>This is a column. Columns contain your content.</columns>

<html>

<head></head>

<body>
  <th class="small-12 large-12 columns first last">
    <table>
      <tbody>
        <tr>
          <th>This is a column. Columns contain your content.</th>
          <th class="expander"></th>
        </tr>
      </tbody>
    </table>
  </th>
</body>

</html>

示範

調整大小

欄位有 1 到 12 之間的大小，表示元素的欄位寬度。Foundation 使用 12 欄位格線，因此 6 個欄位為整列寬度的一半。

使用類別 .large-n 和 .small-n 設定欄位大小，其中 n 為欄位寬度。.small- 大小套用於行動裝置電子郵件客戶端，而 .large- 大小套用於桌上型電腦電子郵件客戶端。

在 Inky HTML 中，在 <columns> 標籤上設定屬性 small 或 large，並指定您要的大小。如果您未填寫 small，預設會使用 12。如果您填寫 small 但未填寫 large，large 會使用與 small 相同的值。

<columns small="12" large="6"></columns>

第一個和最後一個類別

.first 類別會加入適當的左邊距，以將內容與容器邊緣隔開。.last 類別會加入到列中的最後一組欄位，以在欄位中加入右邊距。如果您在 .first 和 .last 之間有欄位，則中間欄位不需要這些類別。

這些類別存在的理由是，:last-child 等 CSS 屬性無法在大部分電子郵件客戶端中使用，因此需要一個類別。

在 Inky HTML 中，這些類別會自動加入給您。

HTML

<columns large="4">One</columns>
<columns large="4">Two</columns>
<columns large="4">Three</columns>

<html>

<head></head>

<body>
  <th class="small-12 large-4 columns first">
    <table>
      <tbody>
        <tr>
          <th>One</th>
        </tr>
      </tbody>
    </table>
  </th>
  <th class="small-12 large-4 columns">
    <table>
      <tbody>
        <tr>
          <th>Two</th>
        </tr>
      </tbody>
    </table>
  </th>
  <th class="small-12 large-4 columns last">
    <table>
      <tbody>
        <tr>
          <th>Three</th>
        </tr>
      </tbody>
    </table>
  </th>
</body>

</html>

示範

擴充器

.expander 可防止 Outlook 中的渲染錯誤，有時會導致欄位無法擴充到全寬。擴充器 <th> 的存在會導致內容 <th> 變得「貪婪」，並佔用給它的所有空間，最高可達寬度中指定的值 (為 100%)，而不是忽略寬度屬性並禮貌地僅佔用內容指示的空間 (預設 <th> 行為)。它們設定為不顯示，但會將總寬度提高到超過 100%，這會強制其同層 <th> 完全擴充。

摺疊

摺疊列會移除每一個欄之間的間距，也就是它們之間的間距。將 class .collapse 加入列中以啟用此功能。

HTML

<row class="collapse">
  <columns large="6"><img src="https://placehold.it/300x150/777777/&text=These columns touch" alt=""></columns>
  <columns large="6"><img src="https://placehold.it/300x150/999999/&text=These columns touch" alt=""></columns>
</row>

<html>

<head></head>

<body>
  <table class="row collapse">
    <tbody>
      <tr>
        <th class="small-12 large-6 columns first">
          <table>
            <tbody>
              <tr>
                <th><img src="https://placehold.it/300x150/777777/&amp;text=These columns touch" alt></th>
              </tr>
            </tbody>
          </table>
        </th>
        <th class="small-12 large-6 columns last">
          <table>
            <tbody>
              <tr>
                <th><img src="https://placehold.it/300x150/999999/&amp;text=These columns touch" alt></th>
              </tr>
            </tbody>
          </table>
        </th>
      </tr>
    </tbody>
  </table>&zwj;
</body>

</html>

示範

偏移

偏移會在欄的左側新增間距。如果列中的所有欄加起來小於 12，而且你想要調整它們之間的間距，請使用此功能。

使用 class .large-offset-n 來建立偏移，其中 n 是要偏移的欄數。例如，.large-offset-3 會將欄位偏移為列寬度的 25%。可以將其視為從左側將欄位推開。

HTML

<row>
  <columns large="3" class="large-offset-3"><img src="https://placehold.it/150x150/999999/&text=offset column" alt=""></columns>
  <columns large="3"><img src="https://placehold.it/150x150/999999" alt=""></columns>
</row>

<html>

<head></head>

<body>
  <table class="row">
    <tbody>
      <tr>
        <th class="large-offset-3 small-12 large-3 columns first">
          <table>
            <tbody>
              <tr>
                <th><img src="https://placehold.it/150x150/999999/&amp;text=offset column" alt></th>
              </tr>
            </tbody>
          </table>
        </th>
        <th class="small-12 large-3 columns last">
          <table>
            <tbody>
              <tr>
                <th><img src="https://placehold.it/150x150/999999" alt></th>
              </tr>
            </tbody>
          </table>
        </th>
      </tr>
    </tbody>
  </table>&zwj;
</body>

</html>

示範

Sass 參考

變數

可以在專案的設定檔中使用這些 Sass 變數來自訂此元件的預設樣式。

名稱	類型	預設值	說明
`$grid-column-count`	數字	`12`	電子郵件的預設欄位數。
`$column-padding-bottom`	數字	`$global-padding`	欄位底部的預設內距。
`$container-radius`	數字	`0`	容器的預設邊框半徑。請使用 px 值

格線

容器

列

欄

調整大小

第一個和最後一個類別

擴充器

摺疊

偏移

Sass 參考

變數

ZURB MASTER CLASS 回應式電子郵件

電子郵件基礎

想要更多嗎？

與我們交談

保持最新狀態