Foundation

Foundation for Emails 2 遷移指南

本指南說明將 Foundation for Emails 範本從版本 1 (以前稱為 Ink) 遷移到 Foundation for Emails 2 所需的變更。

新增功能？

  • 簡化且更新的回應式網格：我們簡化了新版本的標記，讓編寫程式碼更快速、更簡單。Emails 2 中的新回應式網格需要較少的標籤和類別。現在它也支援 Android Native 的回應式功能！
  • Inky 範本語言：使用 Inky，您可以撰寫較少的程式碼，完成更多工作。Inky 語言讓您可以擺脫表格，使用更簡單、更類似網頁的 HTML。
  • 使用 Sass 建置：現在比以往更快，您可以輕鬆地對電子郵件進行全面性的視覺變更，以反映您的品牌風格 - 全部都在一個設定檔中。
  • ZURB Stack：各種任務自動化 - Panini、我們的 Handlebars 範本、編譯 Sass、BrowserSync、影像壓縮和自動內嵌都內建於其中，以加速您的工作流程。

概觀

首先，您需要選擇一個版本來開始使用。
CSS 版本 或 使用 Inky 的 Sass 版本

在遷移時，下列項目可以輕鬆地從 1 翻譯到 2

  • 樣板
  • 可見度
  • 字體排印
  • 文字輔助類別
  • 容器
  • 面板
  • 媒體查詢

其他區域可能需要更多變更才能正常運作，包括

  • 格線
  • 子格線（現在是格線的一部分）
  • 按鈕類別

您可能想要使用的最新功能

  • 選單 - 水平
  • 選單 - 垂直

HTML

使用 Foundation for Emails 2，令人困惑且繁瑣的表格已成過去。新的 Inky 標記將節省您編寫電子郵件的時間和精力。它看起來像

<container>
  <row>
    <column small="12" large="4">
      Content
    </column>
    <column small="12" large="8">
      Content
    </column>
  </row>
</container>

您可以使用它來建立格線結構、按鈕和其他元件。我們將在元件部分詳細說明這一點。我們將在 格線部分 中做進一步說明。

CSS 和 Sass

Foundation for Emails 2 提供 Sass 版本，讓您可以在設定中使用一些簡單的變數快速變更常見的 CSS 值。

以下是一些不再需要用於適當間距的 CSS 類別

  • .wrapper
  • .wrapper-last
  • .text-pad
  • .text-pad-left
  • .text-pad-right

一些輔助類別已變更

.center 在版本 1 中用於置中文字。

版本 2 現在有更多對齊類別

  • .text-center：置中文字
  • .text-left：將文字靠左對齊
  • .text-right：將文字靠右對齊
  • .small-text-center：在小型斷點上置中文字
  • .small-text-left：在小型斷點上靠左對齊文字
  • .small-text-right：在小型斷點上靠右對齊文字
  • float-center：置中圖片（請參閱 對齊文件 以了解最佳實務。）

Ink 1.0 元件

格線

舊標記

在 Ink 1.0 中，我們需要額外的標籤來支援包裝元素。這用於控制欄的間距和外邊距。

<table class="container">
  <tr>
    <td>

      <table class="row">
        <tr>
          <td class="wrapper last">

            <table class="twelve columns">
              <tr>
                <td class="text-pad">

                </td>
                <td class="expander"></td>
              </tr>
            </table>

          </td>
        </tr>
      </table>

    </td>
  </tr>
</table>

新標記

在 Foundation for Emails 2 中，我們刪除了另一個標籤，以簡化您的標記。間距現在直接套用於欄元素本身。我們仍然需要使用 .last 類別識別最後一欄，現在使用 .first 類別識別第一個欄元素。如果您在第一欄和最後一欄中間有欄，則不需要 .first 或 .last 類別。

此外，我們將 <td> 縫合到 <th>，因為這樣允許 Android 4 原生具有回應能力 - 贏！

<table class="container">
  <tr>
    <td>
      <table class="row">
        <tr>
          <th class="first last small-12 large-12 columns">

          </th>
        </tr>
      </table>
    <th class="expander"></th>
    </td>
  </tr>
</table>

新標記（Inky HTML）

<container>
  <row>
    <columns small="12" large="12">

    </columns>
  </row>
</container>

子格線

為了統一基金會家族的思考，我們移除了子欄，並轉向功能齊全的小格線。

舊標記

<table class="container">
  <tr>
    <td class="wrapper last">

      <table class="twelve columns">
        <tr>
          <td class="six sub-columns">

          </td>
          <td class="six sub-columns last">

          </td>
          <td class="expander"></td>
        </tr>
      </table>

    </td>
  </tr>
</table>

新標記（純 HTML）

<table class="container">
  <tr>
    <td>

      <table class="row">
        <tr>
          <th class="first large-6 small-6 columns">

          </th>

          <th class="last large-6 small-6 columns">

          </th>
          <th class="expander"></th>
        </tr>
      </table>

    </td>
  </tr>
</table>

新標記（Inky HTML）

<container>
  <row>
    <columns small="6">

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

    </columns>
  </row>
</container>

區塊格線

區塊格線在識別列中顯示的元素數量方面有輕微的語法變更。我們已轉移到 .up-x 的慣例，而不是 .x-up。

舊標記

<table class="block-grid three-up">
  <tr>
    <td>
      Thing 1
    </td><td> <!-- Make sure the tags are directly next to each other -->
      Thing 2
    </td><td> <!-- Make sure the tags are directly next to each other -->
      Thing 3
    </td>
  </tr>
</table>

新標記（純 HTML）

<table class="block-grid up-3">
  <tr>
    <th class="column first">
      Thing 1
    </th><th class="column"> <!-- Make sure the tags are directly next to each other -->
      Thing 2
    </th><th class="column last"> <!-- Make sure the tags are directly next to each other -->
      Thing 3
    </th>
  </tr>
</table>

新標記（Inky HTML）

<block-grid up="3">
  <column>Thing 1</column>
  <column>Thing 2</column>
  <column>Thing 3</column>
</block-grid>

偏移欄

由於我們已經消除了包裝器，因此偏移量現在直接應用於欄本身。

舊標記

<table class="row">
  <tr>
    <td class="wrapper offset-by-four">

      <table class="eight columns">
        <tr>
          <td class="panel">

          </td>
          <td class="expander"></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

新標記（純 HTML）

<table class="row">
  <tr>
    <th class="small-4 small-offset-8 large-4 large-offset-8 columns">

    </th>
   </tr>
</table>

新標記（Inky HTML）

<row>
  <columns small="4" large="4" class="small-offset-8 large-offset-8">

  </columns>
</row>

偏移量現在可以在小斷點或大斷點上使用，或同時使用。它們將從左側移過一組欄。

按鈕

在 F4E 的先前版本中，按鈕內的文字是唯一可點擊的元素。在 F4E 2 中，我們採用了使用內距和邊框來增加可點擊區域的混合方法。它需要更多一個表格，但結果是一個更大的觸摸目標，這對可用性很有好處。

舊標記

<table class="button">
  <tr>
    <td>
      <a href="#">Button Label</a>
    </td>
  </tr>
</table>

新標記（純 HTML）

<table class="button">
  <tr>
    <td>
      <table>
        <tr>
          <td>
            <a href="https://zurb.com">I am successful</a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

新標記（Inky HTML）

<button href="https://zurb.com"></button>

現在更容易將按鈕置中，只需使用 <center> 標籤包裝按鈕即可。

面板

為了統一基金會家族的術語，面板現在稱為 標注。

舊標記

<table class="twelve columns">
  <tr>
    <td class="panel">
      Panel content
    </td>
    <td class="expander"></td>
  </tr>
</table>

新標記（純 HTML）

<table class="callout">
  <tr>
    <td class="callout-inner">

    </td>
    <td class="expander"></td>
  </tr>
</table>

新標記（Inky HTML）

<row>
  <columns small="6">
    <p>One Word</p>
  </columns>
  <columns small="6">
    <callout class="secondary">
      <p>I'm in a callout!</p>
    </callout>
  </columns>
</row>

<callout class="primary">
  <row>
    <columns small="12">
      <row>
        <columns small="6">
          <p>This whole row is in a callout!</p>
        </columns>
        <columns small="6">
          <p>This whole row is in a callout!</p>
        </columns>
      </row>
    </columns>
  </row>
</callout>

您可以在 <row> 或 <column> 內的內容周圍包裝標注。

新元件

舊標記（純 HTML）

<table class="container">
  <tr>
    <td>

      <table class="menu">
        <tr>
          <td>
            <table>
              <tr>
                <th class="menu-item">
                  <a href="https://google.com">Nav 1</a>
                </th>
                <th class="menu-item">
                  <a href="https://google.com">Nav 2</a>
                </th>
                <th class="menu-item">
                  <a href="https://google.com">Nav 3</a>
                </th>
              </tr>
            </table>
          </td>
        </tr>
      </table>

    </td>
  </tr>
</table>

新標記（Inky HTML）

<menu>
  <item href="one.html">Item One</item>
  <item href="one.html">Item Two</item>
  <item href="one.html">Item Three</item>
</menu>

選單元件可用於建立一組簡單的連結，通常用於標頭、社群圖示或頁尾。加入 .vertical 類別將會變更方向。您甚至可以使用 .small-vertical 僅在小斷點上垂直顯示。

間隔

新標記（Inky HTML）

<spacer size="100"></spacer>

間隔元件在元素之間或元素內部建立一致的垂直間距。大小 size="x" 屬性允許您設定所需的垂直間距高度（以像素為單位）。

包裝器

新標記（Inky HTML）

<wrapper>
  content here
</wrapper>

包裝器元件允許您包裝內容以在其中鎖定 CSS。您可以加入類別，以便輕鬆建立一個具有背景的完整內容。

相依性

CSS 版本與我們在 Ink 1.0 中發布的版本功能完全相同。查看我們的 入門指南 以進一步了解。

若要將 Sass 版本與 Inky 標記語言搭配使用，您需要安裝 Foundation for Emails 專案範本。我們有另一個 入門指南，專門針對 Sass 版本的 Foundation。

ZURB 大師課程 回應式電子郵件

在此線上課程中，您將學習如何快速設計和開發回應式電子郵件，讓這些電子郵件在幾乎所有螢幕、瀏覽器和電子郵件客戶端上都看起來很漂亮，甚至包括 Outlook。

了解 Foundation for Emails

Foundation for Emails

Foundation for Emails 是由 ZURB（一家位於加州坎貝爾的產品設計公司）所建立的回應式 HTML 電子郵件架構。此架構是自 1998 年以來建立網路產品與服務的成果。

想要更多嗎？

與我們交談

在 Twitter 上發推文給我們
@ZURBfoundation

參與
我們令人驚豔的社群。

保持最新資訊

掌握 Foundation 的最新資訊。在 Github 找到我們。

保持聯繫

© 1998‐2018 ZURB, Inc. 保留所有權利。