From 847c2fb960e65a2f72394c4c9765d84c16e452ab Mon Sep 17 00:00:00 2001 From: Dan Mindru Date: Sun, 18 Oct 2015 22:29:36 +0200 Subject: [PATCH] Add gulp, automate template building #WIP --- .gitignore | 3 +- README.md | 21 +++-- fadeit/full-mail.html | 49 ----------- fadeit/signature-reply.html | 38 --------- fadeit/signature.html | 17 ---- gulpfile.js | 17 ++++ package.json | 33 ++++++++ src/fadeit/base.css | 140 ++++++++++++++++++++++++++++++++ src/fadeit/full-mail.html | 63 ++++++++++++++ src/fadeit/signature-reply.html | 24 ++++++ src/fadeit/signature.html | 52 ++++++++++++ tasks/build.js | 36 ++++++++ tasks/watch.js | 12 +++ 13 files changed, 394 insertions(+), 111 deletions(-) delete mode 100644 fadeit/full-mail.html delete mode 100644 fadeit/signature-reply.html delete mode 100644 fadeit/signature.html create mode 100644 gulpfile.js create mode 100644 package.json create mode 100644 src/fadeit/base.css create mode 100644 src/fadeit/full-mail.html create mode 100644 src/fadeit/signature-reply.html create mode 100644 src/fadeit/signature.html create mode 100644 tasks/build.js create mode 100644 tasks/watch.js diff --git a/.gitignore b/.gitignore index 3416836..64242f3 100644 --- a/.gitignore +++ b/.gitignore @@ -2,4 +2,5 @@ /node_modules/ /build/ /application/ -.DS_Store \ No newline at end of file +.DS_Store +/dist/ \ No newline at end of file diff --git a/README.md b/README.md index a8cd5f4..7de7e73 100644 --- a/README.md +++ b/README.md @@ -1,17 +1,26 @@ # Responsive HTML email signatures Responsive templates for email signatures. +**Disclaimer**: super basic layout. -**Disclaimer**: not very advanced. +## Get started -# Preview +## Preview +@todo Here's an example of what's inside: ![Signature preview](http://danmind.ru/img/fadeit-sign.png) - - There are a few other variations too, but they need some polishing. -# Usage with different e-mail clients -## Thunderbird +## CSS Support +See [this table](https://www.campaignmonitor.com/css/). Using gulp-inline-css (link). + + +## TODOs +fix inline-css issue, preprocessor support (simpler BEM)? + + +## Usage with different e-mail clients + +### Thunderbird There are several Thunderbird plugins which can automatically insert signatures when composing e-mails. We recommend [SmartTemplate4](https://addons.mozilla.org/en-us/thunderbird/addon/smarttemplate4) as one of the options. It can use different templates for new e-mails, replies and forwarded e-mails. diff --git a/fadeit/full-mail.html b/fadeit/full-mail.html deleted file mode 100644 index 87241dd..0000000 --- a/fadeit/full-mail.html +++ /dev/null @@ -1,49 +0,0 @@ - - - - - - - - - - - - -
- Hi there, -
- Thanks for writing up this email.
- We are delighted to reply with a custom footer template. -
- - - - - - - - -
- Med venlig hilsen / best regards,
- The fadeit team
- Always here to help -
-
- -
- Call 81100200 or email us at info@fadeit.dk
- Anelystparken 31D  ●  DK-8381 Tilst  ●  Aarhus
-
- - - -
- - fadeit logo - -
-
- - - diff --git a/fadeit/signature-reply.html b/fadeit/signature-reply.html deleted file mode 100644 index 0ce6837..0000000 --- a/fadeit/signature-reply.html +++ /dev/null @@ -1,38 +0,0 @@ -
- - - - - -
- - - - - - - - -
- Med venlig hilsen / best regards,
- The fadeit team
- Always here to help -
-
- -
- Call 81100200 or email us at info@fadeit.dk
- Anelystparken 31D  ●  DK-8381 Tilst  ●  Aarhus
-
- - - -
- - fadeit logo - -
-
- - - diff --git a/fadeit/signature.html b/fadeit/signature.html deleted file mode 100644 index 08b2ef6..0000000 --- a/fadeit/signature.html +++ /dev/null @@ -1,17 +0,0 @@ -
- - - - - - -
- - - - -
- Med venlig hilsen / best regards,
- Lars Normark Holmgaard -
-
diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..e50fe7e --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,17 @@ +'use strict'; + +var gulp = require('gulp'), + wrench = require('wrench'); + +var options = { + src: 'src', + dist: 'dist' +}; + +wrench.readdirSyncRecursive('./tasks').filter(function(file) { + return (/\.(js|coffee)$/i).test(file); +}).map(function(file) { + require('./tasks/' + file)(options); +}); + +gulp.task('default', ['build', 'watch']); \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..acb12ec --- /dev/null +++ b/package.json @@ -0,0 +1,33 @@ +{ + "name": "responsive-html-email-signature", + "version": "2.1.0", + "description": "Responsive template for email signatures", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/fadeit/responsive-html-email-signature.git" + }, + "keywords": [ + "responsive", + "template", + "email", + "signature" + ], + "author": "Dan Mindru (http://mindrudan.com/)", + "license": "MIT", + "bugs": { + "url": "https://github.com/fadeit/responsive-html-email-signature/issues" + }, + "homepage": "https://github.com/fadeit/responsive-html-email-signature#readme", + "devDependencies": { + "gulp": "^3.9.0", + "gulp-inline-css": "^3.0.0", + "gulp-minify-html": "^1.0.4", + "gulp-preprocess": "^1.2.0", + "run-sequence": "^1.1.4", + "wrench": "^1.5.8" + } +} diff --git a/src/fadeit/base.css b/src/fadeit/base.css new file mode 100644 index 0000000..8fefddf --- /dev/null +++ b/src/fadeit/base.css @@ -0,0 +1,140 @@ +/* Solving https://github.com/jonkemp/inline-css/issues/8 would make things nicer. */ + +/* + * ===================================== + * 1. Common styles for general table things. + * ===================================== + */ + +td{ + font-family: sans-serif; +} + +.main{ + /* @todo gulp-inline-css can't use width in percentages */ + /* This style property fucks up the width on OS X, needs to be *JUST* attribute -> + width:100%; */ + /* @todo gulp-inline-css doesn't parse background-color -> bgcolor */ + background-color: #ffffff; +} + +.rbcc{ + /* + * rbcc -> reset - border - cellspacing - cellpading + * + * Resets table attributes. + */ + border:0; + cellpadding:0; + cellspacing:0; +} + +.sp{ + /* Separator tr */ + /* @todo gulp-inline-css doesn't add height attrs */ + height: 30px; +} + +.gray-hr{ + border-bottom:1px solid #E4E4E4; + border-top:none; + margin-bottom:20px; + margin-top:20px; +} + +a{ + text-decoration: none; + color: #0fade1; +} + +/* + * ================= + * 2. Content styles. + * ================== + */ +.main__welcome{ + color: #000; + padding: 10px 30px 0 30px; + font-family: sans-serif; + font-size: 16px; + line-height: 22px; +} + +.main__content{ + color: #000; + padding: 10px 30px 0 30px; + font-family: sans-serif; + font-size: 14px; +} + + +/* + * ================ + * 3. Footer styles. + * ================ + */ +.footer{ + /* @todo gulp-inline-css doesn't parse background-color -> bgcolor */ + background-color: #f5f5f5; + padding: 20px 30px 0px 30px; + color: #888; + border-top: 8px solid #EAEAEA; +} + +.footer a{ + color: #888; +} + +.footer--simple{ + padding-bottom: 20px; + /* @todo gulp-inline-css doesn't parse background-color -> bgcolor */ + background-color: #FFFFFF; +} + +.footer__main{ + /* @todo gulp-inline-css can't use width in percentages */ + /* This style property fucks up the width on OS X, needs to be *JUST* attribute -> + width:100%; */ +} + +.footer__main__signature{ + font-size: 14px; + color: #888; + /* @todo gulp-inline-css doesn't parse align */ + align:left; +} + +.footer__main__col1{ + /* @todo gulp-inline-css can't use width in percentages */ + width:80%; + margin-bottom:30px; + /* @todo gulp-inline-css doesn't parse align */ + align:left; +} + +.footer__main__col1__td{ + font-size: 14px; + color: #888; + /* @todo gulp-inline-css doesn't parse align */ + align:left; +} + +.footer__main__col2{ + /* @todo gulp-inline-css can't use width in percentages */ + width:20%; + /* @todo gulp-inline-css doesn't parse align */ + align:right; +} + +.footer__main__col2__td{ + font-size: 14px; + color: #888; +} + +.footer__main__col2__td__img{ + border: 0; + padding-left:10px; + max-width: 100%; + max-height:38px; + height: auto; +} \ No newline at end of file diff --git a/src/fadeit/full-mail.html b/src/fadeit/full-mail.html new file mode 100644 index 0000000..9336f97 --- /dev/null +++ b/src/fadeit/full-mail.html @@ -0,0 +1,63 @@ + + + + + + + + + + + + + + + + + + + + +
+ +
+ +
+ + + + + + + + + + + +
+
+
+
+
+ +
+ + + +
+ +
+ + + + + +
+ + <!-- @echo logoAlt --> + +
+
+ + + diff --git a/src/fadeit/signature-reply.html b/src/fadeit/signature-reply.html new file mode 100644 index 0000000..dfb9bf4 --- /dev/null +++ b/src/fadeit/signature-reply.html @@ -0,0 +1,24 @@ + + + + + +
+ + + + + + + +
+ + + + + +
+
+
+
+
\ No newline at end of file diff --git a/src/fadeit/signature.html b/src/fadeit/signature.html new file mode 100644 index 0000000..c192e6a --- /dev/null +++ b/src/fadeit/signature.html @@ -0,0 +1,52 @@ + + + + + +
+ + + + + + + +
+ + + + + + + + + + + +
+
+
+
+
+ +
+ + + +
+ +
+ + + + + +
+ + <!-- @echo logoAlt --> + +
+
+ + + diff --git a/tasks/build.js b/tasks/build.js new file mode 100644 index 0000000..3392bc0 --- /dev/null +++ b/tasks/build.js @@ -0,0 +1,36 @@ +'use strict'; + +var gulp = require('gulp'), + inlineCss = require('gulp-inline-css'), + minifyHTML = require('gulp-minify-html'), + preprocess = require('gulp-preprocess'); + +function buildTask(options){ + gulp.task('build', function() { + + gulp.src('./src/**/*.html') + .pipe(preprocess({ + context: { + signature: 'Med venlig hilsen / best regards,', + name: 'Lars Normark Holmgaard', + welcome: 'Hi there,', + introParagraph: 'Thanks for writing up this email.
We are delighted to reply with a custom footer template.', + contactMain: 'Call 81100200 or email us at', + contactMail: 'info@fadeit.dk', + contactSecondary: 'Anelystparken 31D  ●  DK-8381 Tilst  ●  Aarhus
', + logoUrl: 'http://fadeit.dk/!email/fadeit-logo.png', + logoAlt: 'fadeit logo', + website: 'http://fadeit.dk' + } + })) + .pipe(inlineCss({ + applyTableAttributes: true, + applyWidthAttributes: true, + preserveMediaQueries: true + })) + .pipe(minifyHTML({quotes: true})) + .pipe(gulp.dest('./dist/')) + }); +} + +module.exports = buildTask \ No newline at end of file diff --git a/tasks/watch.js b/tasks/watch.js new file mode 100644 index 0000000..59131c1 --- /dev/null +++ b/tasks/watch.js @@ -0,0 +1,12 @@ +'use strict'; + +var gulp = require('gulp'); + +function watchTask(options){ + //@todo watch CSS + gulp.task('watch', function(){ + gulp.watch([options.src + '/**/*.html'], ['build']); + }); +}; + +module.exports = watchTask \ No newline at end of file