src
└─ ejs
├─ index.ejs
└─ partial
└─ _inc_css.ejs
node_modules
└─ 各パッケージ
dist
└─ index.html
package.json
config.json
gulpfile.js
Last active
August 29, 2015 14:18
-
-
Save shimakyohsuke/bb2fb690df8b93bf9c45 to your computer and use it in GitHub Desktop.
HTML MAIL TEMPLATE
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <style type="text/css"> | |
| body { | |
| font-family: 'Helvetica Neue', 'Segoe UI', 'Lucida Grande', 'Lucida Sans', Lucida, Arial, "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif; | |
| padding: 0; | |
| margin: 0; | |
| -webkit-text-size-adjust: 100%; | |
| -ms-text-size-adjust: 100%; | |
| background-color: #F2F2F2; | |
| } | |
| table, td { | |
| border-collapse: collapse; | |
| mso-table-lspace: 0; | |
| mso-table-rspace: 0; | |
| } | |
| a { | |
| text-decoration: underline; | |
| } | |
| img { | |
| border: 0 none; | |
| height: auto; | |
| line-height: 1; | |
| outline: none; | |
| text-decoration: none; | |
| } | |
| a img { | |
| border: 0 none; | |
| text-decoration: none; | |
| } | |
| h1, h2, h3, h4, h5, h6, p, div, span { | |
| margin: 0; | |
| padding: 0; | |
| font-family: 'Helvetica Neue', 'Segoe UI', 'Lucida Grande', 'Lucida Sans', Lucida, Arial, "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif; | |
| } | |
| /* font-size */ | |
| h1 { | |
| font-size: 42px; | |
| } | |
| h2 { | |
| font-size: 30px; | |
| } | |
| h3 { | |
| font-size: 24px; | |
| } | |
| h4 { | |
| font-size: 20px; | |
| } | |
| h5 { | |
| font-size: 18px; | |
| } | |
| h6 { | |
| font-size: 14px; | |
| } | |
| p { | |
| font-size: 16px; | |
| } | |
| /* color */ | |
| h1,h2 { | |
| color: #808080; | |
| } | |
| h3,h4,h5 { | |
| color: #666; | |
| } | |
| h6 { | |
| color: #585858; | |
| } | |
| p { | |
| color: #585858; | |
| } | |
| /* font-weight */ | |
| h1, h2, h3, h4 { | |
| font-weight: 300; | |
| } | |
| h5,h6 { | |
| font-weight: 700; | |
| } | |
| /* line-height */ | |
| h1, h2, h3, h4, h5, h6 { | |
| line-height: 1.4em; | |
| } | |
| p { | |
| line-height: 1.8em; | |
| } | |
| /* responsive */ | |
| @media only screen and (max-width: 640px) and (min-width: 320px) { | |
| table[class="wrap"] { | |
| margin: 0 auto; | |
| width: 100% !important; | |
| box-sizing: border-box; | |
| } | |
| img[class="img-responsive"] { | |
| width: 100% !important; | |
| max-width: 100%; | |
| } | |
| td[class="column-responsive"] { | |
| width: 100% !important; | |
| display: block; | |
| box-sizing: border-box; | |
| margin: 20px 0; | |
| padding: 0 16px; | |
| } | |
| td[class="column-responsive"] img { | |
| width: 100% !important; | |
| max-width: 100%; | |
| margin: 0 auto; | |
| } | |
| } | |
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "site":{ | |
| "siteTitle": "YOUR SITE TITLE" | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 'use strict'; | |
| var gulp = require('gulp') | |
| ,browserSync = require('browser-sync') | |
| ,reload = browserSync.reload | |
| ,ejs = require('gulp-ejs') | |
| ,plumber = require('gulp-plumber') | |
| ,fs = require('fs') | |
| ,del = require('del') | |
| ,paths = { | |
| srcDir : './src/', | |
| distDir : './dist/' | |
| } | |
| ; | |
| gulp.task('default', function () { | |
| browserSync({ | |
| notify: false, | |
| port: 3000, | |
| server: { | |
| baseDir: [paths.distDir] | |
| } | |
| }); | |
| gulp.watch(['./src/ejs/*.ejs','./src/ejs/**/*.ejs','./src/ejs/**/_*.ejs'],['ejs']); | |
| }); | |
| gulp.task('ejs', function() { | |
| var json = JSON.parse(fs.readFileSync("./config.json")); | |
| gulp.src(["./src/ejs/**/*.ejs","./src/ejs/**/*.ejs","!./src/ejs/**/_*.ejs"]) | |
| .pipe(plumber()) | |
| .pipe(ejs(json)) | |
| .pipe(gulp.dest(paths.distDir)) | |
| .on('end', reload); | |
| }); | |
| gulp.task('del', function(cb) { | |
| del([paths.distDir], cb); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><% | |
| var title = site.siteTitle | |
| var ph = 'http://www.placehold.it/' | |
| %> | |
| <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> | |
| <meta name="viewport" content="width=device-width,initial-scale=1.0" /> | |
| <title><%= title %></title> | |
| <% include partial/_inc_css %> | |
| </head> | |
| <body> | |
| <table width="640" cellpadding="0" cellspacing="0" align="center" class="wrap"> | |
| <tr> | |
| <td> | |
| <table width="640" cellpadding="0" cellspacing="0" align="center"> | |
| <tr> | |
| <td> | |
| <img src="<%= ph %>140x70.jpg&text=LOGO" alt="" /> | |
| </td> | |
| </tr> | |
| </table> | |
| <table width="640" cellpadding="0" cellspacing="0" align="center"> | |
| <tr> | |
| <td> | |
| <img src="<%= ph %>1280x400.jpg&text=HERO" alt="" width="640" height="200" /> | |
| </td> | |
| </tr> | |
| </table> | |
| </td> | |
| </tr> | |
| </table> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "HTML_MAIL_TEMPLATE", | |
| "version": "0.1.0", | |
| "url": "http://example.com/", | |
| "main": "index.js", | |
| "private": true, | |
| "author": "shimakyohsuke", | |
| "author_uri": "http://shimakyohsuke.com/", | |
| "license": "MIT", | |
| "devDependencies": { | |
| "gulp": "^3.8.11", | |
| "browser-sync": "^1.7.0", | |
| "gulp-ejs": "^1.1.0", | |
| "fs": "0.0.2", | |
| "del": "^1.1.1", | |
| "gulp-plumber": "^1.0.0" | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment