Foundation

Foundation for Emails 2 迁移指南

本指南介绍将 Foundation for Emails 模板从版本 1（以前称为 Ink）迁移到 Foundation for Emails 2 所需的更改。

有什么新特性？

  • 简化且更新的响应式网格: 我们在最新版本中简化了标记，因此编码速度更快、更简单。Emails 2 中的最新响应式网格需要更少的标记和类。现在它还可以在 Android 原生系统上响应！
  • Inky 模板语言: 使用 Inky，你编写更少的代码，完成更多工作。Inky 语言帮助你摆脱表格，进入更简单、更接近网络的 HTML。
  • 使用 Sass 构建: 现在比以往更快，你可以轻松地对电子邮件进行全面的视觉更改，以反映你的品牌样式 - 所有这一切都在一个设置文件中。
  • ZURB 堆栈: 可以构建各种任务自动化 - 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>

子网格

为了统一 Foundation 系列的思维，我们已经去掉了子列，并朝着一个功能齐全的小网格前进。

旧标记

<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> 标签包裹按钮。

面板

为了统一 Foundation 系列中的术语，面板现在称为 标注。

旧标记

<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 是一款自适应 HTML 电子邮件框架，由位于加利福尼亚州坎贝尔的产品设计公司 ZURB 创建。该框架是自 1998 年以来构建 Web 产品和服务的结果。

是否想要了解更多信息？

与我们交谈

在
@ZURBfoundation

与我们互动
我们的杰出社区。

保持更新

了解 Foundation 的最新信息。在 Github 上关注我们。

保持连接

© 1998-2018 ZURB, Inc. 版权所有。