https://github.com/hunterliu1003/rwd-html-email
📨使用 Zurb Foundation 針對 Responsive HTML Email 解決各家 Email (e.g. gmail, outlook, inbox, mobile) 跑版問題
https://github.com/hunterliu1003/rwd-html-email
gulp html putsmail responsive-email-inliner rwd zurb-foundation
Last synced: about 1 month ago
JSON representation
📨使用 Zurb Foundation 針對 Responsive HTML Email 解決各家 Email (e.g. gmail, outlook, inbox, mobile) 跑版問題
- Host: GitHub
- URL: https://github.com/hunterliu1003/rwd-html-email
- Owner: hunterliu1003
- Created: 2017-09-21T07:04:04.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2020-05-15T01:42:25.000Z (over 5 years ago)
- Last Synced: 2025-08-23T23:18:29.942Z (about 1 month ago)
- Topics: gulp, html, putsmail, responsive-email-inliner, rwd, zurb-foundation
- Language: CSS
- Homepage:
- Size: 45.9 KB
- Stars: 10
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# RWD - HTML - Email
## 目的
各家 Email (e.g. gmail, outlook, inbox, mobile) 對於 HTML Email 的 CSS 解讀不盡相同，為了讓任何接收的Email不跑版，需要花很多時間維護。
### Zurb Foundation
[Zurb Foundation](http://foundation.zurb.com) 針對 Responsive HTML Email 做了很多整合，只要按照官方的教學文件就可以達成各家 Email 不跑版，不僅相容了大部分的 Email，更可以把 Inline Style 的 HTML 拆分成好維護的 HTML 和 CSS。許多細節有興趣的話還是建議到官網細讀。
#### HTML Email 教學文件
- [Emails Docs](https://get.foundation/emails/docs/)
#### 官方的 Inliner
- [Responsive Email Inliner](https://get.foundation/emails/inliner)
## 安裝
若要自動化的Inliner和分離的 HTML 和 CSS 則需要使用 Gulp。
Zurb Foundation官方的安裝實際上遇到了許多困難，因為需要安裝許多東西。
另外對於已經很習慣使用gulp的人，仍然可嘗試這個簡單的範例，因為此範例不需要額外安裝 Ruby, gem, SASS，更不會看到複雜的目錄結構，對於快速理解有很大的幫助。
### 本範例需安裝 Node < 12
[https://nodejs.org/en/download/](https://nodejs.org/en/download/)
### 全域安裝 Gulp
```
$ npm install -g gulp
```
### 下載此範例並進入該資料夾
```
$ git clone https://github.com/hunterliu1003/rwd-html-email.git
$ cd rwd-html-email
```
### 安裝所需的 node_modules
```
$ npm install
```
### 執行 gulp
```
$ gulp
```
### 網址
執行 gulp 後可到 [http://localhost:8080/](http://localhost:8080/) 查看範例。
## 測試
- 順利安裝並執行 gulp 之後，轉換以及壓縮過後的 html 會存在 build 資料夾中。
- 可利用 [Putsmail](https://putsmail.com/tests/new) 進行較有效率的測試。
- Putsmail 可一次寄多個 Email 地址，並將壓縮過後的HTML程式碼貼上寄出。