兩種入門方式

電子郵件的 Foundation 可與純粹的 CSS 或 Sass 搭配使用。

CSS 版本

最快的入門方式!電子郵件的 Foundation 的 CSS 版本具備您開始撰寫回應式 HTML 電子郵件所需的一切,沒有多餘的東西。您可以取得我們的樣板 HTML、我們的入門電子郵件範本,以及經過實戰考驗的電子郵件的 Foundation CSS。

開始使用 CSS 版本
下載入門套件

這些是您會在入門指南中使用的檔案。

Sass 版本

進一步簡化您的工作流程。電子郵件的 Foundation 的 Sass 版本讓您可以更靈活地控制 Framework 的視覺樣式。它也受到 ZURB 堆疊 的支援,這是一個由 Node 提供技術支援的建置系統,具備 HTML 範本、Sass 編譯、影像壓縮和內嵌功能。需要 Node.js 才能開始使用。

開始使用 Sass 版本
檢視範本檔案

這是您將在「開始使用」指南中使用的專案範本。



尋找 Ink 1.0 嗎?

Ink 1.0 已不再由 ZURB 維護,但我們仍擁有您使用它所需的所有檔案,以及文件。或者,如果您想將您的專案升級到 Foundation for Emails 2,請查看我們的 移轉指南

下載 檢視文件

大師課程適用於回應式電子郵件

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

學習 Foundation for Emails

取得 Foundation for Emails 認證電子郵件的五個步驟

遵循這五個步驟,以確保您的電子郵件看起來很棒。

1

下載樣板

下載我們的 基本樣板,其中包含 Foundation CSS。或者,如果您是 Sass 使用者,請使用 Foundation CLI 安裝 ZURB Email Stack。

2

編寫您的電子郵件

使用 文件 建立您的格線,並在需要時加入按鈕和標註等元件。如果您剛開始使用,請遵循我們的 CSS 版本指南Sass 版本指南

3

將 CSS 內嵌到 HTML 中

一旦您的電子郵件看起來很棒且包含回應式樣式,請將您的 CSS 內嵌到電子郵件中。我們的 網路內嵌器 讓這變得容易。或者,如果您使用的是 ZURB Email Stack,只需執行 npm run build

4

測試您的電子郵件

別急著寄出!請務必在盡可能多的平台上測試它。我們使用 Litmus 在許多裝置上進行測試,您也應該這麼做!

如需支援的客戶端清單,請查看文件中的 相容性頁面

5

寄出!

您的電子郵件已準備好寄出!我們建議使用電子郵件服務供應商,例如 MailchimpCampaign Monitor,因為當您寄送電子郵件時,某些電子郵件客戶端會移除回應式格式。

有很棒的電子郵件嗎?請寄一份副本到 contact@get.foundation 給我們。