Make better response mail templates
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
src
.gitignore
README.md
gulpfile.js
package.json

README.md

responsive-email-template

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

responsive-email-template

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

About Me

License

MIT

Copyright (c) 2017-present, nicejade