mshillam
/
responsive-html-email-signature
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add gulp, automate template building #WIP

This commit is contained in:
Dan Mindru 2015-10-18 22:29:36 +02:00
parent b2c1ef855a
commit 847c2fb960
13 changed files with 394 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -2,4 +2,5 @@
/node_modules/
/build/
/application/
.DS_Store
.DS_Store
/dist/

21
README.md
View File

@ -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.

49
fadeit/full-mail.html
View File

@ -1,49 +0,0 @@
<table width="100%" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0">
<tr border="0" cellspacing="0" cellpadding="0">
<td style="color: #000; padding: 10px 30px 0 30px; font-family: sans-serif; font-size: 16px; line-height: 22px">
<b>Hi there,</b>
</td>
</tr>
<tr border="0" cellspacing="0" cellpadding="0">
<td style="color: #000; padding: 10px 30px 0 30px; font-family: sans-serif; font-size: 14px;">
Thanks for writing up this email.<br/>
We are delighted to reply with a custom footer template.
</td>
</tr>
<tr height="30"></tr>
<tr border="0" cellspacing="0" cellpadding="0">
<td class="footer" bgcolor="#f5f5f5" style="padding: 20px 30px 0px 30px; color: #888; border-top: 8px solid #EAEAEA;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" style="font-family: sans-serif; font-size: 14px; color: #888;">
Med venlig hilsen / best regards,<br />
The fadeit team <br />
<b>Always here to help</b>
</td>
</tr>
<tr>
<td width="100%">
<hr style="border-bottom:1px solid #E4E4E4; border-top:none; margin-bottom:20px; margin-top:20px;" /></td>
</tr>
<tr>
<table width="80%" align="left" border="0" cellpadding="0" cellspacing="0" style="margin-bottom:30px;">
<td align="left" style="font-family: sans-serif; font-size: 14px; color: #888;">
<strong>Call 81100200 or email us at <a href="mailto:info@fadeit.dk" target="_blank" style="text-decoration: none;color: #888">info@fadeit.dk</a></strong><br />
Anelystparken 31D&nbsp;&nbsp;&#9679;&nbsp;&nbsp;DK-8381 Tilst&nbsp;&nbsp;&#9679;&nbsp;&nbsp;Aarhus<br />
</td>
</table>
<table width="20%" align="right" border="0" cellpadding="0" cellspacing="0">
<td align="right" style="font-family: sans-serif; font-size: 14px; color: #888;">
<a href="http://fadeit.dk">
<img class="fix" src="http://fadeit.dk/!email/fadeit-logo.png" border="0" alt="fadeit logo" style="padding-left:10px; max-width: 100%; max-height:38px; height: auto;"/>
</a>
</td>
</table>
</tr>
</table>
</td>
</tr>
</table>

38
fadeit/signature-reply.html
View File

@ -1,38 +0,0 @@
<br/>
<table width="100%" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0">
<tr height="30"></tr>
<tr border="0" cellspacing="0" cellpadding="0">
<td class="footer" bgcolor="#f5f5f5" style="padding: 20px 30px 0px 30px; color: #888; border-top: 8px solid #EAEAEA;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" style="font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color: #888; line-height:20px;">
Med venlig hilsen / best regards,<br />
The fadeit team <br />
<b>Always here to help</b>
</td>
</tr>
<tr>
<td width="100%">
<hr style="border-bottom:1px solid #E4E4E4; border-top:none; margin-bottom:20px; margin-top:20px;" /></td>
</tr>
<tr>
<table width="80%" align="left" border="0" cellpadding="0" cellspacing="0" style="margin-bottom:30px;">
<td align="left" style="font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color: #888;">
<strong>Call 81100200 or email us at <a href="mailto:info@fadeit.dk" target="_blank" style="text-decoration: none;color: #888">info@fadeit.dk</a></strong><br />
Anelystparken 31D&nbsp;&nbsp;&#9679;&nbsp;&nbsp;DK-8381 Tilst&nbsp;&nbsp;&#9679;&nbsp;&nbsp;Aarhus<br />
</td>
</table>
<table width="20%" align="right" border="0" cellpadding="0" cellspacing="0">
<td align="right" style="font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color: #888;">
<a href="http://fadeit.dk">
<img class="fix" src="http://fadeit.dk/!email/fadeit-logo.png" border="0" alt="fadeit logo" style="padding-left:10px; max-width: 100%; max-height:38px; height: auto;"/>
</a>
</td>
</table>
</tr>
</table>
</td>
</tr>
</table>

17
fadeit/signature.html
View File

@ -1,17 +0,0 @@
<br/>
<table width="100%" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0">
<tr height="30"></tr>
<tr border="0" cellspacing="0" cellpadding="0">
<td class="footer" style="padding: 20px 30px 0px 30px; color: #888; border-top: 8px solid #EAEAEA;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" style="font-family: sans-serif; font-size: 14px; color: #888; line-height:20px;">
Med venlig hilsen / best regards,<br />
Lars Normark Holmgaard
</td>
</tr>
</table>
</td>
</tr>
</table>

17
gulpfile.js Normal file
View File

@ -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']);

33
package.json Normal file
View File

@ -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 <mindrudan@gmail.com> (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"
}
}

140
src/fadeit/base.css Normal file
View File

@ -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;
}

63
src/fadeit/full-mail.html Normal file
View File

@ -0,0 +1,63 @@
<!-- Solving https://github.com/jonkemp/inline-css/issues/8 would make things nicer. -->
<link rel="stylesheet" href="base.css">
<!-- Actual template below, link tag will be removed & compiled tp inline CSS. -->
<!-- @todo gulp-inline-css can't use width in percentages, doesn't parse background-color -> bgcolor -->
<table class="main rbcc" width="100%" bgcolor="#ffffff";>
<tr class="rbcc">
<td class="main__welcome">
<b><!-- @echo welcome --></b>
</td>
</tr>
<tr class="rbcc">
<td class="main__content">
<!-- @echo introParagraph -->
</td>
</tr>
<!-- @todo gulp-inline-css doesn't add height attrs -->
<tr class="sp" height="30px"></tr>
<tr class="rbcc">
<!-- @todo gulp-inline-css doesn't parse background-color -> bgcolor -->
<td class="footer" bgcolor="#f5f5f5">
<!-- @todo gulp-inline-css can't use width in percentages -->
<table class="rbcc footer__main" width="100%">
<tr>
<!-- @todo gulp-inline-css doesn't parse align -->
<td class="footer__main__signature" align="left">
<!-- @echo signature --><br />
<!-- @echo name --><br />
</td>
</tr>
<tr>
<td width="100%">
<hr class="gray-hr"/></td>
</tr>
<tr>
<!-- @todo gulp-inline-css can't use width in percentages, doesn't parse align -->
<table class="rbcc footer__main__col1" width="80%" align="left">
<td class="footer__main__col1__td" align="left">
<strong>
<!-- @echo contactMain -->
<a href="mailto:<!-- @echo contactMail -->" target="_blank"><!-- @echo contactMail --></a>
</strong><br />
<!-- @echo contactSecondary -->
</td>
</table>
<!-- @todo gulp-inline-css can't use width in percentages, doesn't parse align -->
<table class="rbcc footer__main__col2" width="20%" align="right">
<!-- @todo gulp-inline-css doesn't parse align -->
<td class="footer__main__col2__td" align="right">
<a href="<!-- @echo website -->">
<img class="fix" src="<!-- @echo logoUrl -->" alt="<!-- @echo logoAlt -->" class="footer__main__col2__td__img"/>
</a>
</td>
</table>
</tr>
</table>
</td>
</tr>
</table>

24
src/fadeit/signature-reply.html Normal file
View File

@ -0,0 +1,24 @@
<!-- Solving https://github.com/jonkemp/inline-css/issues/8 would make things nicer. -->
<link rel="stylesheet" href="base.css">
<!-- Actual template below, link tag will be removed & compiled tp inline CSS. -->
<br/>
<table class="main rbcc" width="100%" bgcolor="#ffffff";>
<tr class="sp" height="30px"></tr>
<tr class="rbcc">
<!-- @todo gulp-inline-css doesn't parse background-color -> bgcolor -->
<td class="footer footer--simple" bgcolor="#ffffff">
<table class="rbcc footer__main" width="100%">
<tr>
<!-- @todo gulp-inline-css doesn't parse align -->
<td class="footer__main__signature" align="left">
<!-- @echo signature --><br />
<!-- @echo name --><br />
</td>
</tr>
</table>
</td>
</tr>
</table>

52
src/fadeit/signature.html Normal file
View File

@ -0,0 +1,52 @@
<!-- Solving https://github.com/jonkemp/inline-css/issues/8 would make things nicer. -->
<link rel="stylesheet" href="base.css">
<!-- Actual template below, link tag will be removed & compiled tp inline CSS. -->
<br/> <!-- <br/> Makes it easier to add text when composing -->
<!-- @todo gulp-inline-css can't use width in percentages, doesn't parse background-color -> bgcolor -->
<table class="main rbcc" width="100%" bgcolor="#ffffff";>
<tr class="sp" height="30px"></tr>
<tr class="rbcc">
<!-- @todo gulp-inline-css doesn't parse background-color -> bgcolor -->
<td class="footer" bgcolor="#f5f5f5">
<!-- @todo gulp-inline-css can't use width in percentages -->
<table class="rbcc footer__main" width="100%">
<tr>
<!-- @todo gulp-inline-css doesn't parse align -->
<td class="footer__main__signature" align="left">
<!-- @echo signature --><br />
<!-- @echo name --><br />
</td>
</tr>
<tr>
<td width="100%">
<hr class="gray-hr"/></td>
</tr>
<tr>
<!-- @todo gulp-inline-css can't use width in percentages, doesn't parse align -->
<table class="rbcc footer__main__col1" width="80%" align="left">
<td class="footer__main__col1__td" align="left">
<strong>
<!-- @echo contactMain -->
<a href="mailto:<!-- @echo contactMail -->" target="_blank"><!-- @echo contactMail --></a>
</strong><br />
<!-- @echo contactSecondary -->
</td>
</table>
<!-- @todo gulp-inline-css can't use width in percentages, doesn't parse align -->
<table class="rbcc footer__main__col2" width="20%" align="right">
<!-- @todo gulp-inline-css doesn't parse align -->
<td class="footer__main__col2__td" align="right">
<a href="<!-- @echo website -->">
<img class="fix" src="<!-- @echo logoUrl -->" alt="<!-- @echo logoAlt -->" class="footer__main__col2__td__img"/>
</a>
</td>
</table>
</tr>
</table>
</td>
</tr>
</table>

36
tasks/build.js Normal file
View File

@ -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.<br/> We are delighted to reply with a custom footer template.',
contactMain: 'Call 81100200 or email us at',
contactMail: 'info@fadeit.dk',
contactSecondary: 'Anelystparken 31D&nbsp;&nbsp;&#9679;&nbsp;&nbsp;DK-8381 Tilst&nbsp;&nbsp;&#9679;&nbsp;&nbsp;Aarhus<br />',
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

12
tasks/watch.js Normal file
View File

@ -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