概述
新课题研究:响应式邮件框架Formerly Ink(Formerly Ink官网:http://foundation.zurb.com/emails.html)
姐妹篇: EDM响应式邮件框架:Formerly Ink
介绍
打开官网,就能看到Formerly Ink的主标题是Foundation for Emails2
Foundation大家再熟悉不过,是和bootstrap齐名的响应式框架
所以可以放心使用Formerly Ink~~
不知道大家怎么看待响应式框架,像之前那个姐妹篇MJML一样,Formerly Ink也有标记语言Inky。鉴于标记语言都差不多,今天就不用Inky作为讲解主体了。
安装
有两种方法
方法一 CSS Version
下载压缩包:Download Foundation for Emails
-
方法二 Sass Version
npm install --global foundation-cli foundation new --framework emails
使用
以css版本为例,说说怎么用
基础模板
默认邮件模板
栅格or网格?(不知道怎么翻译好- -!!!)
因为是响应式,所以少不了栅格~
容器 container
就放在上面那个基础模板的center里,里面放你的邮件代码
行 row
放在容器内
列 columns
放在行内,一行最多12列
像bootstrap一样,用类名控制在行内的大小和位置
small类是手机显示 large类是电脑显示
首列需要添加.first类名,末列需要添加.last类名
Column One
Column Two
其他
和bootstrap一样,还有其他的样式类名,与响应式邮件不直接相关就不在此多说了,有兴趣的话可以自行了解
官方文档: Bring Your Email Styles Inline
行内样式转换
由于有的邮件客户端会忽略
|