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

Load multiple configs and build templates keeping the dir

This commit is contained in:
Dan Mindru 2015-10-19 03:25:38 +02:00
parent 1d4ec41c8f
commit 78a039b68c
20 changed files with 528 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
dist/fadeit/full-mail-dan.html vendored Normal file
View File

@ -0,0 +1,28 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="viewport" content="width=device-width"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><style type="text/css">
img {
max-width: 100%;
}
body {
-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; width: 100% !important; height: 100%; line-height: 1.4em;
}
@media only screen and (max-width:480px){
.footer td{
font-size: 12px!important;
}
.footer__main__col1{
width: 100%!important;
}
.footer__main__col2{
width: 100%!important;
}
.footer__main__col2__td{
text-align: left;
padding-bottom:20px;
}
}
</style><body style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; height: 100%; line-height: 1.4em; width: 100%;"><table class="main rbcc" width="100%" bgcolor="#ffffff" ; style="background-color: #ffffff; border: 0; cellpadding: 0; cellspacing: 0;" border="0" cellpadding="0" cellspacing="0"><tr class="rbcc" style="border: 0; box-sizing: border-box; cellpadding: 0; cellspacing: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px;"><td class="main__welcome" style="color: #000; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 22px; padding: 10px 30px 0 30px;"><b>Hi adsadsada,</b></td></tr><tr class="rbcc" style="border: 0; box-sizing: border-box; cellpadding: 0; cellspacing: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px;"><td class="main__content" style="color: #000; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; padding: 10px 30px 0 30px;">MAAAN</td></tr><tr class="sp" height="30px" style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; height: 30px;"></tr><tr class="rbcc" style="border: 0; box-sizing: border-box; cellpadding: 0; cellspacing: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px;"><td class="footer" bgcolor="#f5f5f5" style="background-color: #f5f5f5; border-top: 8px solid #EAEAEA; color: #888; padding: 20px 30px 0px 30px;"><table class="rbcc footer__main" width="100%" style="border: 0; cellpadding: 0; cellspacing: 0;" border="0" cellpadding="0" cellspacing="0"><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px;"><td class="footer__main__signature" align="left" style="align: left; color: #888; font-size: 14px;">Med venlig hilsen / best regards,<br>Dan Mindru<br></td></tr><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px;"><td width="100%"><hr class="gray-hr" style="border-bottom: 1px solid #E4E4E4; border-top: none; margin-bottom: 20px; margin-top: 20px;"></td></tr><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px;"><table class="rbcc footer__main__col1" width="70%" align="left" style="align: left; border: 0; cellpadding: 0; cellspacing: 0; margin-bottom: 30px; width: 70%;" border="0" cellpadding="0" cellspacing="0"><td class="footer__main__col1__td" align="left" style="align: left; color: #888; font-size: 14px;"><strong>Call <a href="tel:dsadasdazzzz" style="color: #888; text-decoration: none;"><span style="color: #888; text-decoration: none;">dsadasdazzzz</span></a> or email us at <a href="mailto:info@fadeit.dk" target="_blank" style="color: #888; text-decoration: none;">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 class="rbcc footer__main__col2" width="30%" align="right" style="align: right; border: 0; cellpadding: 0; cellspacing: 0; width: 30%;" border="0" cellpadding="0" cellspacing="0"><td class="footer__main__col2__td" align="right" style="color: #888; font-size: 14px;"><a href="http://fadeit.dk" style="color: #888; text-decoration: none;"><img class="fix" src="http://fadeit.dk/!email/fadeit-logo.png" alt="fadeit logo" style="max-width: 100%;"></a></td></table></tr></table></td></tr></table></body></html>

0
dist/fadeit/full-mail.html → dist/fadeit/full-mail-lars.html vendored
View File

28
dist/fadeit/signature-dan.html vendored Normal file
View File

@ -0,0 +1,28 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="viewport" content="width=device-width"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><style type="text/css">
img {
max-width: 100%;
}
body {
-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; width: 100% !important; height: 100%; line-height: 1.4em;
}
@media only screen and (max-width:480px){
.footer td{
font-size: 12px!important;
}
.footer__main__col1{
width: 100%!important;
}
.footer__main__col2{
width: 100%!important;
}
.footer__main__col2__td{
text-align: left;
padding-bottom:20px;
}
}
</style><body style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; height: 100%; line-height: 1.4em; width: 100%;"><br><table class="main rbcc" width="100%" bgcolor="#ffffff" ; style="background-color: #ffffff; border: 0; cellpadding: 0; cellspacing: 0;" border="0" cellpadding="0" cellspacing="0"><tr class="sp" height="30px" style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; height: 30px;"></tr><tr class="rbcc" style="border: 0; box-sizing: border-box; cellpadding: 0; cellspacing: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px;"><td class="footer" bgcolor="#f5f5f5" style="background-color: #f5f5f5; border-top: 8px solid #EAEAEA; color: #888; padding: 20px 30px 0px 30px;"><table class="rbcc footer__main" width="100%" style="border: 0; cellpadding: 0; cellspacing: 0;" border="0" cellpadding="0" cellspacing="0"><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px;"><td class="footer__main__signature" align="left" style="align: left; color: #888; font-size: 14px;">Med venlig hilsen / best regards,<br>Dan Mindru<br></td></tr><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px;"><td width="100%"><hr class="gray-hr" style="border-bottom: 1px solid #E4E4E4; border-top: none; margin-bottom: 20px; margin-top: 20px;"></td></tr><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px;"><table class="rbcc footer__main__col1" width="70%" align="left" style="align: left; border: 0; cellpadding: 0; cellspacing: 0; margin-bottom: 30px; width: 70%;" border="0" cellpadding="0" cellspacing="0"><td class="footer__main__col1__td" align="left" style="align: left; color: #888; font-size: 14px;"><strong>Call <a href="tel:dsadasdazzzz" style="color: #888; text-decoration: none;"><span style="color: #888; text-decoration: none;">dsadasdazzzz</span></a> or email us at <a href="mailto:info@fadeit.dk" target="_blank" style="color: #888; text-decoration: none;">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 class="rbcc footer__main__col2" width="30%" align="right" style="align: right; border: 0; cellpadding: 0; cellspacing: 0; width: 30%;" border="0" cellpadding="0" cellspacing="0"><td class="footer__main__col2__td" align="right" style="color: #888; font-size: 14px;"><a href="http://fadeit.dk" style="color: #888; text-decoration: none;"><img class="fix" src="http://fadeit.dk/!email/fadeit-logo.png" alt="fadeit logo" style="max-width: 100%;"></a></td></table></tr></table></td></tr></table></body></html>

0
dist/fadeit/signature.html → dist/fadeit/signature-lars.html vendored
View File

28
dist/fadeit/signature-reply-dan.html vendored Normal file
View File

@ -0,0 +1,28 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="viewport" content="width=device-width"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><style type="text/css">
img {
max-width: 100%;
}
body {
-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; width: 100% !important; height: 100%; line-height: 1.4em;
}
@media only screen and (max-width:480px){
.footer td{
font-size: 12px!important;
}
.footer__main__col1{
width: 100%!important;
}
.footer__main__col2{
width: 100%!important;
}
.footer__main__col2__td{
text-align: left;
padding-bottom:20px;
}
}
</style><body style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; height: 100%; line-height: 1.4em; width: 100%;"><br><table class="main rbcc" width="100%" bgcolor="#ffffff" ; style="background-color: #ffffff; border: 0; cellpadding: 0; cellspacing: 0;" border="0" cellpadding="0" cellspacing="0"><tr class="sp" height="30px" style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; height: 30px;"></tr><tr class="rbcc" style="border: 0; box-sizing: border-box; cellpadding: 0; cellspacing: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px;"><td class="footer footer--simple" bgcolor="#ffffff" style="background-color: #FFFFFF; border-top: 8px solid #EAEAEA; color: #888; padding: 20px 30px 0px 30px; padding-bottom: 20px;"><table class="rbcc footer__main" width="100%" style="border: 0; cellpadding: 0; cellspacing: 0;" border="0" cellpadding="0" cellspacing="0"><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px;"><td class="footer__main__signature" align="left" style="align: left; color: #888; font-size: 14px;">Med venlig hilsen / best regards,<br>Dan Mindru<br></td></tr></table></td></tr></table></body></html>

0
dist/fadeit/signature-reply.html → dist/fadeit/signature-reply-lars.html vendored
View File

28
dist/play/full-mail-play-lars.html vendored Normal file
View File

@ -0,0 +1,28 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="viewport" content="width=device-width"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><style type="text/css">
img {
max-width: 100%;
}
body {
-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; width: 100% !important; height: 100%; line-height: 1.4em;
}
@media only screen and (max-width:480px){
.footer td{
font-size: 12px!important;
}
.footer__main__col1{
width: 100%!important;
}
.footer__main__col2{
width: 100%!important;
}
.footer__main__col2__td{
text-align: left;
padding-bottom:20px;
}
}
</style><body style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; height: 100%; line-height: 1.4em; width: 100%;"><table class="main rbcc" width="100%" bgcolor="#ffffff" ; style="background-color: #ffffff; border: 0; cellpadding: 0; cellspacing: 0;" border="0" cellpadding="0" cellspacing="0"><tr class="rbcc" style="border: 0; box-sizing: border-box; cellpadding: 0; cellspacing: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px;"><td class="main__welcome" style="color: #000; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 22px; padding: 10px 30px 0 30px;"><b>Hi there,</b></td></tr><tr class="rbcc" style="border: 0; box-sizing: border-box; cellpadding: 0; cellspacing: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px;"><td class="main__content" style="color: #000; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; padding: 10px 30px 0 30px;">Thanks for writing up this email.<br>We are delighted to reply with a custom footer template.</td></tr><tr class="sp" height="30px" style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; height: 30px;"></tr><tr class="rbcc" style="border: 0; box-sizing: border-box; cellpadding: 0; cellspacing: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px;"><td class="footer" bgcolor="#f5f5f5" style="background-color: #f5f5f5; border-top: 8px solid #EAEAEA; color: #888; padding: 20px 30px 0px 30px;"><table class="rbcc footer__main" width="100%" style="border: 0; cellpadding: 0; cellspacing: 0;" border="0" cellpadding="0" cellspacing="0"><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px;"><td class="footer__main__signature" align="left" style="align: left; color: #888; font-size: 14px;">Med venlig hilsen / best regards,<br>Lars Normark Holmgaard<br></td></tr><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px;"><td width="100%"><hr class="gray-hr" style="border-bottom: 1px solid #E4E4E4; border-top: none; margin-bottom: 20px; margin-top: 20px;"></td></tr><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px;"><table class="rbcc footer__main__col1" width="70%" align="left" style="align: left; border: 0; cellpadding: 0; cellspacing: 0; margin-bottom: 30px; width: 70%;" border="0" cellpadding="0" cellspacing="0"><td class="footer__main__col1__td" align="left" style="align: left; color: #888; font-size: 14px;"><strong>Call <a href="tel:81100200" style="color: #888; text-decoration: none;"><span style="color: #888; text-decoration: none;">81100200</span></a> or email us at <a href="mailto:info@fadeit.dk" target="_blank" style="color: #888; text-decoration: none;">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 class="rbcc footer__main__col2" width="30%" align="right" style="align: right; border: 0; cellpadding: 0; cellspacing: 0; width: 30%;" border="0" cellpadding="0" cellspacing="0"><td class="footer__main__col2__td" align="right" style="color: #888; font-size: 14px;"><a href="http://fadeit.dk" style="color: #888; text-decoration: none;"><img class="fix" src="http://fadeit.dk/!email/fadeit-logo.png" alt="fadeit logo" style="max-width: 100%;"></a></td></table></tr></table></td></tr></table></body></html>

28
dist/play/signature-play-lars.html vendored Normal file
View File

@ -0,0 +1,28 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="viewport" content="width=device-width"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><style type="text/css">
img {
max-width: 100%;
}
body {
-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; width: 100% !important; height: 100%; line-height: 1.4em;
}
@media only screen and (max-width:480px){
.footer td{
font-size: 12px!important;
}
.footer__main__col1{
width: 100%!important;
}
.footer__main__col2{
width: 100%!important;
}
.footer__main__col2__td{
text-align: left;
padding-bottom:20px;
}
}
</style><body style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; height: 100%; line-height: 1.4em; width: 100%;"><br><table class="main rbcc" width="100%" bgcolor="#ffffff" ; style="background-color: #ffffff; border: 0; cellpadding: 0; cellspacing: 0;" border="0" cellpadding="0" cellspacing="0"><tr class="sp" height="30px" style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; height: 30px;"></tr><tr class="rbcc" style="border: 0; box-sizing: border-box; cellpadding: 0; cellspacing: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px;"><td class="footer" bgcolor="#f5f5f5" style="background-color: #f5f5f5; border-top: 8px solid #EAEAEA; color: #888; padding: 20px 30px 0px 30px;"><table class="rbcc footer__main" width="100%" style="border: 0; cellpadding: 0; cellspacing: 0;" border="0" cellpadding="0" cellspacing="0"><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px;"><td class="footer__main__signature" align="left" style="align: left; color: #888; font-size: 14px;">Med venlig hilsen / best regards,<br>Lars Normark Holmgaard<br></td></tr><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px;"><td width="100%"><hr class="gray-hr" style="border-bottom: 1px solid #E4E4E4; border-top: none; margin-bottom: 20px; margin-top: 20px;"></td></tr><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px;"><table class="rbcc footer__main__col1" width="70%" align="left" style="align: left; border: 0; cellpadding: 0; cellspacing: 0; margin-bottom: 30px; width: 70%;" border="0" cellpadding="0" cellspacing="0"><td class="footer__main__col1__td" align="left" style="align: left; color: #888; font-size: 14px;"><strong>Call <a href="tel:81100200" style="color: #888; text-decoration: none;"><span style="color: #888; text-decoration: none;">81100200</span></a> or email us at <a href="mailto:info@fadeit.dk" target="_blank" style="color: #888; text-decoration: none;">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 class="rbcc footer__main__col2" width="30%" align="right" style="align: right; border: 0; cellpadding: 0; cellspacing: 0; width: 30%;" border="0" cellpadding="0" cellspacing="0"><td class="footer__main__col2__td" align="right" style="color: #888; font-size: 14px;"><a href="http://fadeit.dk" style="color: #888; text-decoration: none;"><img class="fix" src="http://fadeit.dk/!email/fadeit-logo.png" alt="fadeit logo" style="max-width: 100%;"></a></td></table></tr></table></td></tr></table></body></html>

28
dist/play/signature-reply-play-lars.html vendored Normal file
View File

@ -0,0 +1,28 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="viewport" content="width=device-width"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><style type="text/css">
img {
max-width: 100%;
}
body {
-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; width: 100% !important; height: 100%; line-height: 1.4em;
}
@media only screen and (max-width:480px){
.footer td{
font-size: 12px!important;
}
.footer__main__col1{
width: 100%!important;
}
.footer__main__col2{
width: 100%!important;
}
.footer__main__col2__td{
text-align: left;
padding-bottom:20px;
}
}
</style><body style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; height: 100%; line-height: 1.4em; width: 100%;"><br><table class="main rbcc" width="100%" bgcolor="#ffffff" ; style="background-color: #ffffff; border: 0; cellpadding: 0; cellspacing: 0;" border="0" cellpadding="0" cellspacing="0"><tr class="sp" height="30px" style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; height: 30px;"></tr><tr class="rbcc" style="border: 0; box-sizing: border-box; cellpadding: 0; cellspacing: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px;"><td class="footer footer--simple" bgcolor="#ffffff" style="background-color: #FFFFFF; border-top: 8px solid #EAEAEA; color: #888; padding: 20px 30px 0px 30px; padding-bottom: 20px;"><table class="rbcc footer__main" width="100%" style="border: 0; cellpadding: 0; cellspacing: 0;" border="0" cellpadding="0" cellspacing="0"><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px;"><td class="footer__main__signature" align="left" style="align: left; color: #888; font-size: 14px;">Med venlig hilsen / best regards,<br>Lars Normark Holmgaard<br></td></tr></table></td></tr></table></body></html>

1
package.json
View File

@ -27,6 +27,7 @@
"gulp-inline-css": "^3.0.0",
"gulp-minify-html": "^1.0.4",
"gulp-preprocess": "^1.2.0",
"gulp-rename": "^1.2.2",
"run-sequence": "^1.1.4",
"wrench": "^1.5.8"
}

28
src/fadeit/conf.js Normal file
View File

@ -0,0 +1,28 @@
module.exports = [
{
id: 'lars',
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 <a href="tel:81100200"><span>81100200</span></a> or email us at', // Wrap phone numbers like this to prevent iOS mail from making them blue.
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'
},
{
id: 'dan',
signature: 'Med venlig hilsen / best regards,',
name: 'Dan Mindru',
welcome: 'Hi adsadsada,',
introParagraph: 'MAAAN',
contactMain: 'Call <a href="tel:dsadasdazzzz"><span>dsadasdazzzz</span></a> or email us at', // Wrap phone numbers like this to prevent iOS mail from making them blue.
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'
}
]

147
src/play/base.css Normal file
View File

@ -0,0 +1,147 @@
/* Solving https://github.com/jonkemp/inline-css/issues/8 would make things nicer. */
/*
* =====================================
* 1. Common styles for general table things.
* =====================================
*/
tr{
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
box-sizing: border-box;
font-size: 14px;
}
.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: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 22px;
}
.main__content{
color: #000;
padding: 10px 30px 0 30px;
font-family: 'Helvetica Neue', Helvetica, Arial, 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:70%;
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 a > span{
/* Revert apple blue-link style. */
color: #888!important;
text-decoration:none!important;
}
.footer__main__col2{
/* @todo gulp-inline-css can't use width in percentages */
width:30%;
/* @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;
}

15
src/play/conf.js Normal file
View File

@ -0,0 +1,15 @@
module.exports = [
{
id: 'play-lars',
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 <a href="tel:81100200"><span>81100200</span></a> or email us at', // Wrap phone numbers like this to prevent iOS mail from making them blue.
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'
}
]

38
src/play/footer.inc.html Normal file
View File

@ -0,0 +1,38 @@
<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="70%" 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="30%" 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>

25
src/play/full-mail.html Normal file
View File

@ -0,0 +1,25 @@
<!-- @include head.inc.html -->
<!-- @todo gulp-inline-css can't use width in percentages, doesn't parse background-color -> bgcolor -->
<body>
<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 -->
<!-- @include footer.inc.html -->
</tr>
</table>
</body>

37
src/play/head.inc.html Normal file
View File

@ -0,0 +1,37 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Solving https://github.com/jonkemp/inline-css/issues/8 would make things nicer. -->
<link rel="stylesheet" href="base.css">
</head>
<style type="text/css">
img {
max-width: 100%;
}
body {
-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; width: 100% !important; height: 100%; line-height: 1.4em;
}
@media only screen and (max-width:480px){
.footer td{
font-size: 12px!important;
}
.footer__main__col1{
width: 100%!important;
}
.footer__main__col2{
width: 100%!important;
}
.footer__main__col2__td{
text-align: left;
padding-bottom:20px;
}
}
</style>

23
src/play/signature-reply.html Normal file
View File

@ -0,0 +1,23 @@
<!-- @include head.inc.html -->
<body>
<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>
</body>

14
src/play/signature.html Normal file
View File

@ -0,0 +1,14 @@
<!-- @include head.inc.html -->
<body>
<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 -->
<!-- @include footer.inc.html -->
</tr>
</table>
</body>

55
tasks/build.js
View File

@ -3,34 +3,41 @@
var gulp = require('gulp'),
inlineCss = require('gulp-inline-css'),
minifyHTML = require('gulp-minify-html'),
preprocess = require('gulp-preprocess');
preprocess = require('gulp-preprocess'),
rename = require('gulp-rename'),
wrench = require('wrench');
function buildTask(options){
gulp.task('build', function() {
gulp.src([options.src + '/**/*.html', '!' + options.src + '/**/*.inc.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 <a href="tel:81100200"><span>81100200</span></a> or email us at', // Wrap phone numbers like this to prevent iOS mail from making them blue.
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,
removeStyleTags: false
}))
.pipe(minifyHTML({quotes: true}))
.pipe(gulp.dest('./dist/'))
wrench.readdirSyncRecursive('./src').filter(function(file) {
return (!file.match('/') && !file.match(/^\.+/g)) ? file : false
}).forEach(function(dir){
var confPath = './../' + options.src + '/' + dir + '/conf.js'
makeTemplates(dir, require(confPath));
});
function makeTemplates(dir, confItems){
confItems.forEach(function(item){
gulp.src([options.src + '/' + dir + '/**/*.html', '!' + options.src + '/**/*.inc.html'])
.pipe(preprocess({
context: item
}))
.pipe(inlineCss({
applyTableAttributes: true,
applyWidthAttributes: true,
preserveMediaQueries: true,
removeStyleTags: false
}))
.pipe(minifyHTML({quotes: true}))
.pipe(rename(function rename(path){
path.dirname = dir;
path.basename += '-' + item.id;
return path;
}))
.pipe(gulp.dest('./dist/'));
});
}
});
}

2
tasks/watch.js
View File

@ -4,7 +4,7 @@ var gulp = require('gulp');
function watchTask(options){
gulp.task('watch', function(){
gulp.watch([options.src + '/**/*.html', options.src + '/**/*.css'], ['build']);
gulp.watch([options.src + '/**/*.html', options.src + '/**/*.css', options.src + '/**/conf.js'], ['build']);
});
};