Responsive Email Template

Make better response mail templates Through mjml. mjml: The only framework that makes responsive email easy

Story & Background

When all you need is a really simple responsive HTML email template, you can do like this: responsive-html-email-template. It looks really simple, But it is not simple and unfriendly to do it. Of course you can use some tools，such as gulp & gulp-inline-css. The code is as follows：

let gulp = require('gulp'),
  inlineCss = require('gulp-inline-css')

gulp.task('inline-css', function() {
  return gulp.src('./src/**/*.html')
    .pipe(inlineCss())
    .pipe(gulp.dest('build/'))
})

gulp.task('watch', function () {
    gulp.watch('./src/**/*.html', ['inline-css'])
})

gulp.task('default', ['watch'])

It can help you make mail templates like write a web page. but you have to support responsive by yourself. oh, opps. You may be very helpless until you meet her before. mjml, She may be your savior, for how to make a simple set of mail templates. A fly in the ointment ，she also has some problems. So, I provided this tool so that you can use her more easily.

git clone https://github.com/nicejade/responsive-email-template
npm i (yarn)
./node_modules/.bin/mjml --watch src/index.mjml -o dist/index.html
gulp // If you need custom style to support dynamic content.

note: In order to operate easily, you can also use the following methods to run mjml:

Or with the shortcut using npm bin

$(npm bin)/mjml --watch src/index.mjml -o dist/index.html

Or by using npx

note: npx is included with npm > v5.2 or can be installed separately.

npx mjml --watch src/index.mjml -o dist/index.html

For more information on how to execute binary files in NPM packages, see :执行 npm 包的二进制文件 please.

Advantage

• Easy and quick: Write less code, save time and code more efficiently with MJML’s semantic syntax.
• Responsive: MJML is responsive by design on most-popular email clients, even Outlook.
• Component based: Write high-level code thanks to reusable and extensible components.
• Support for customization: Replace the mjmi default style by gulp.
• Dynamic support: Introduce custom styles to support dynamic content by gulp.

More Links

• Try it live
• Responsive Email Templates
• Mjml Resources
• How to Code HTML Email Newsletters

相关链接

• 倾城之链
• About Me
• 个人博客
• 静轩之别苑
• 静晴轩别苑
• 吾意静晴轩
• 天意人间舫
• 新浪微博
• 知乎主页
• 简书主页
• SegmentFault
• Twitter
• Facebook

微信公众号	前端微信群	推荐 Web 应用	推荐小程序
😉 静晴轩	✨ 大前端联盟	🎉 倾城之链	🌊 倾城之链

License

MIT

Copyright (c) 2017-present, nicejade