diff --git a/src/ONEstore/assets/fadeit-logo.png b/examples/ONEstore/assets/fadeit-logo.png similarity index 100% rename from src/ONEstore/assets/fadeit-logo.png rename to examples/ONEstore/assets/fadeit-logo.png diff --git a/src/ONEstore/assets/type01.png b/examples/ONEstore/assets/type01.png similarity index 100% rename from src/ONEstore/assets/type01.png rename to examples/ONEstore/assets/type01.png diff --git a/src/ONEstore/conf.js b/examples/ONEstore/conf.js similarity index 96% rename from src/ONEstore/conf.js rename to examples/ONEstore/conf.js index 5ce2301..30f8436 100644 --- a/src/ONEstore/conf.js +++ b/examples/ONEstore/conf.js @@ -14,8 +14,8 @@ module.exports = [ contactMain: '+82-10-1234-5678 | ', // Wrap phone numbers like this to prevent iOS mail from making them blue. contactMail: 'devhelper@onestore.co.kr', contactSecondary: '성남시 분당구 판교역로 188 SK플래닛 건물 11층', - logoUrl: 'assets/type01.png', + logoUrl: 'assets/type01.png', logoAlt: 'Onestore logo', website: 'http://onesto.re/' } -] \ No newline at end of file +]; \ No newline at end of file diff --git a/src/ONEstore/fadeit.css b/examples/ONEstore/fadeit.css similarity index 100% rename from src/ONEstore/fadeit.css rename to examples/ONEstore/fadeit.css diff --git a/src/ONEstore/footer.inc.html b/examples/ONEstore/footer.inc.html similarity index 100% rename from src/ONEstore/footer.inc.html rename to examples/ONEstore/footer.inc.html diff --git a/src/ONEstore/full-mail.html b/examples/ONEstore/full-mail.html similarity index 100% rename from src/ONEstore/full-mail.html rename to examples/ONEstore/full-mail.html diff --git a/src/ONEstore/head.inc.html b/examples/ONEstore/head.inc.html similarity index 100% rename from src/ONEstore/head.inc.html rename to examples/ONEstore/head.inc.html diff --git a/src/ONEstore/signature-reply.html b/examples/ONEstore/signature-reply.html similarity index 100% rename from src/ONEstore/signature-reply.html rename to examples/ONEstore/signature-reply.html diff --git a/src/ONEstore/signature.html b/examples/ONEstore/signature.html similarity index 100% rename from src/ONEstore/signature.html rename to examples/ONEstore/signature.html diff --git a/src/ONEstoreBlack/assets/logo.png b/examples/ONEstoreBlack/assets/logo.png similarity index 100% rename from src/ONEstoreBlack/assets/logo.png rename to examples/ONEstoreBlack/assets/logo.png diff --git a/src/ONEstoreBlack/assets/play-logo.png b/examples/ONEstoreBlack/assets/play-logo.png similarity index 100% rename from src/ONEstoreBlack/assets/play-logo.png rename to examples/ONEstoreBlack/assets/play-logo.png diff --git a/src/ONEstoreBlack/assets/type03.png b/examples/ONEstoreBlack/assets/type03.png similarity index 100% rename from src/ONEstoreBlack/assets/type03.png rename to examples/ONEstoreBlack/assets/type03.png diff --git a/src/ONEstoreBlack/conf.js b/examples/ONEstoreBlack/conf.js similarity index 96% rename from src/ONEstoreBlack/conf.js rename to examples/ONEstoreBlack/conf.js index 6530f36..6f7fda9 100644 --- a/src/ONEstoreBlack/conf.js +++ b/examples/ONEstoreBlack/conf.js @@ -15,8 +15,8 @@ module.exports = [ contactMail: 'devhelper@onestore.co.kr', // slogan: '\"The 1st integrated Android App store in Korea\"', contactSecondary: '188, Pangyoyeok-ro, Bundang-gu, Seongnam-si, Gyeonggi-do, Korea', - logoUrl: 'assets/type03.png', + logoUrl: 'assets/type03.png', logoAlt: 'ONEstore. logo', website: 'http://onesto.re/' } -] \ No newline at end of file +]; \ No newline at end of file diff --git a/src/ONEstoreBlack/footer.inc.html b/examples/ONEstoreBlack/footer.inc.html similarity index 100% rename from src/ONEstoreBlack/footer.inc.html rename to examples/ONEstoreBlack/footer.inc.html diff --git a/src/ONEstoreBlack/full-mail.html b/examples/ONEstoreBlack/full-mail.html similarity index 100% rename from src/ONEstoreBlack/full-mail.html rename to examples/ONEstoreBlack/full-mail.html diff --git a/src/ONEstoreBlack/head.inc.html b/examples/ONEstoreBlack/head.inc.html similarity index 100% rename from src/ONEstoreBlack/head.inc.html rename to examples/ONEstoreBlack/head.inc.html diff --git a/src/ONEstoreBlack/play.css b/examples/ONEstoreBlack/play.css similarity index 100% rename from src/ONEstoreBlack/play.css rename to examples/ONEstoreBlack/play.css diff --git a/src/ONEstoreBlack/signature-reply.html b/examples/ONEstoreBlack/signature-reply.html similarity index 100% rename from src/ONEstoreBlack/signature-reply.html rename to examples/ONEstoreBlack/signature-reply.html diff --git a/src/ONEstoreBlack/signature.html b/examples/ONEstoreBlack/signature.html similarity index 100% rename from src/ONEstoreBlack/signature.html rename to examples/ONEstoreBlack/signature.html diff --git a/src/fadeit/assets/fadeit-logo.png b/examples/fadeit/assets/fadeit-logo.png similarity index 100% rename from src/fadeit/assets/fadeit-logo.png rename to examples/fadeit/assets/fadeit-logo.png diff --git a/src/fadeit/conf.js b/examples/fadeit/conf.js similarity index 99% rename from src/fadeit/conf.js rename to examples/fadeit/conf.js index 30979f6..a1cdc90 100644 --- a/src/fadeit/conf.js +++ b/examples/fadeit/conf.js @@ -16,4 +16,4 @@ module.exports = [ logoAlt: 'fadeit logo', website: 'http://fadeit.dk' } -] \ No newline at end of file +]; \ No newline at end of file diff --git a/src/fadeit/fadeit.css b/examples/fadeit/fadeit.css similarity index 100% rename from src/fadeit/fadeit.css rename to examples/fadeit/fadeit.css diff --git a/src/fadeit/footer.inc.html b/examples/fadeit/footer.inc.html similarity index 100% rename from src/fadeit/footer.inc.html rename to examples/fadeit/footer.inc.html diff --git a/src/fadeit/full-mail.html b/examples/fadeit/full-mail.html similarity index 100% rename from src/fadeit/full-mail.html rename to examples/fadeit/full-mail.html diff --git a/src/fadeit/head.inc.html b/examples/fadeit/head.inc.html similarity index 100% rename from src/fadeit/head.inc.html rename to examples/fadeit/head.inc.html diff --git a/src/fadeit/signature-reply.html b/examples/fadeit/signature-reply.html similarity index 100% rename from src/fadeit/signature-reply.html rename to examples/fadeit/signature-reply.html diff --git a/src/fadeit/signature.html b/examples/fadeit/signature.html similarity index 100% rename from src/fadeit/signature.html rename to examples/fadeit/signature.html diff --git a/src/play/assets/play-logo.png b/examples/play/assets/play-logo.png similarity index 100% rename from src/play/assets/play-logo.png rename to examples/play/assets/play-logo.png diff --git a/src/play/conf.js b/examples/play/conf.js similarity index 99% rename from src/play/conf.js rename to examples/play/conf.js index b24007c..8e4201b 100644 --- a/src/play/conf.js +++ b/examples/play/conf.js @@ -10,4 +10,4 @@ module.exports = [ logoAlt: 'Play. logo', website: 'http://tryplay.dk' } -] \ No newline at end of file +]; \ No newline at end of file diff --git a/src/play/footer.inc.html b/examples/play/footer.inc.html similarity index 100% rename from src/play/footer.inc.html rename to examples/play/footer.inc.html diff --git a/src/play/head.inc.html b/examples/play/head.inc.html similarity index 100% rename from src/play/head.inc.html rename to examples/play/head.inc.html diff --git a/src/play/play.css b/examples/play/play.css similarity index 100% rename from src/play/play.css rename to examples/play/play.css diff --git a/src/play/signature-reply.html b/examples/play/signature-reply.html similarity index 100% rename from src/play/signature-reply.html rename to examples/play/signature-reply.html diff --git a/src/play/signature.html b/examples/play/signature.html similarity index 100% rename from src/play/signature.html rename to examples/play/signature.html diff --git a/src/dark/assets/play-logo.png b/src/dark/assets/play-logo.png new file mode 100644 index 0000000..83e17b7 Binary files /dev/null and b/src/dark/assets/play-logo.png differ diff --git a/src/dark/conf.js b/src/dark/conf.js new file mode 100644 index 0000000..8e4201b --- /dev/null +++ b/src/dark/conf.js @@ -0,0 +1,13 @@ +module.exports = [ + { + id: 'play', + signature: 'Best regards,', + name: 'Jane Whatsmyname', + contactMain: 'Call (45) 81100200 or email us at', // Wrap phone numbers like this to prevent iOS mail from making them blue. + contactMail: 'info@tryplay.dk', + slogan: 'LED Pylon. LED Wall. Digital Signage.', + logoUrl: 'https://informationscreen.com/manage/assets/images/play-logo.png', + logoAlt: 'Play. logo', + website: 'http://tryplay.dk' + } +]; \ No newline at end of file diff --git a/src/dark/footer.inc.html b/src/dark/footer.inc.html new file mode 100644 index 0000000..c70f880 --- /dev/null +++ b/src/dark/footer.inc.html @@ -0,0 +1,36 @@ + + + + + + + + + + + + + +
+
+
+
+ + +
+ + <!-- @echo logoAlt --> + +
+ + + + +
+
+ + +
+ + + \ No newline at end of file diff --git a/src/dark/head.inc.html b/src/dark/head.inc.html new file mode 100644 index 0000000..2197a50 --- /dev/null +++ b/src/dark/head.inc.html @@ -0,0 +1,42 @@ + + + + + + + + + + \ No newline at end of file diff --git a/src/dark/play.css b/src/dark/play.css new file mode 100644 index 0000000..5cb61d3 --- /dev/null +++ b/src/dark/play.css @@ -0,0 +1,174 @@ +/* Solving https://github.com/jonkemp/inline-css/issues/8 would make things nicer. */ + +/* + * ===================================== + * 1. Common styles for general table things. + * ===================================== + */ +img { + max-width: 100%; +} + +body { + -webkit-font-smoothing: antialiased; + -webkit-text-size-adjust: none; +} + +tr{ + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + box-sizing: border-box; + font-size: 14px; + line-height: 22px; +} + +.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{ + /* sp -> space, Separator tr */ + /* @todo gulp-inline-css doesn't add height attrs */ + height: 30px; +} + +.spd{ + /* spd -> space - double, Separator tr */ + /* @todo gulp-inline-css doesn't add height attrs */ + height: 60px; +} + +.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: #303030; + padding: 20px 30px 0px 30px; + color: #f5f5f5; + border-top: 8px solid #585858; +} + +.footer a{ + color: #f5f5f5; +} + +.footer--simple{ + padding-bottom: 20px; + /* @todo gulp-inline-css doesn't parse background-color -> bgcolor */ + background-color: #FFFFFF; +} + +.footer--simple tr td{ + color: #888; +} + +.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: #f5f5f5; + /* @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:40px; + /* @todo gulp-inline-css doesn't parse align */ + align:left; +} + +.footer__main__col1__td{ + color: #9E9E9E; + /* @todo gulp-inline-css doesn't parse align */ + align:left; + padding-top: 15px; +} + +.footer__main__col1__td > span{ + font-size:18px; + margin-bottom:5px; +} + +.footer__main a > span{ + /* Revert apple blue-link style. */ + color: #f5f5f5!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: #f5f5f5; + /* @todo gulp-inline-css doesn't parse align */ + align:right; +} + +.footer__main__col2__td__img{ + border: 0; + padding-left:20px; + max-width: 100%; + max-height:65px; + height: auto; +} \ No newline at end of file diff --git a/src/dark/signature-reply.html b/src/dark/signature-reply.html new file mode 100644 index 0000000..81f6f7a --- /dev/null +++ b/src/dark/signature-reply.html @@ -0,0 +1,23 @@ + + + +
+ + + + + + + +
+ + + + + +
+
+
+
+
+ \ No newline at end of file diff --git a/src/dark/signature.html b/src/dark/signature.html new file mode 100644 index 0000000..a5951b2 --- /dev/null +++ b/src/dark/signature.html @@ -0,0 +1,14 @@ + + + +
+ + + + + + + + +
+ diff --git a/src/light/assets/fadeit-logo.png b/src/light/assets/fadeit-logo.png new file mode 100644 index 0000000..1d61548 Binary files /dev/null and b/src/light/assets/fadeit-logo.png differ diff --git a/src/light/conf.js b/src/light/conf.js new file mode 100644 index 0000000..a1cdc90 --- /dev/null +++ b/src/light/conf.js @@ -0,0 +1,19 @@ +/* + * NB: for images, if you pass in a relative path ('assets/logo.png'), they will be automatically embedded (base64). If you pass in a URL, it will stay as it is. + */ + +module.exports = [ + { + id: 'fadeit', // Will be appended to the built templates. + signature: 'Yours truly,', + name: 'Jane Whatsmyname', + welcome: 'Hi there,', + introParagraph: 'Thanks for writing up this email.
We are delighted to reply with a responsive template.', + contactMain: 'Call 81100200 or email us at', // Wrap phone numbers like this to prevent iOS mail from making them blue. + contactMail: 'info@fadeit.dk', + contactSecondary: 'Anelystparken 31, DK-8381 Tilst, Aarhus', + logoUrl: 'http://fadeit.dk/src/assets/img/brand/fadeit-logo.png', + logoAlt: 'fadeit logo', + website: 'http://fadeit.dk' + } +]; \ No newline at end of file diff --git a/src/light/fadeit.css b/src/light/fadeit.css new file mode 100644 index 0000000..2b91a8a --- /dev/null +++ b/src/light/fadeit.css @@ -0,0 +1,160 @@ +/* Solving https://github.com/jonkemp/inline-css/issues/8 would make things nicer. */ + +/* + * ===================================== + * 1. Common styles for general table things. + * ===================================== + */ +img { + max-width: 100%; +} + +body { + -webkit-font-smoothing: antialiased; + -webkit-text-size-adjust: none; +} + +tr{ + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + box-sizing: border-box; + font-size: 14px; + line-height: 20px; +} + +.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; + /* @todo gulp-inline-css doesn't parse align */ + align:right; +} + +.footer__main__col2__td__img{ + border: 0; + padding-top: 6px; + padding-left:10px; + max-width: 100%; + max-height:38px; + height: auto; +} \ No newline at end of file diff --git a/src/light/footer.inc.html b/src/light/footer.inc.html new file mode 100644 index 0000000..0ce5e38 --- /dev/null +++ b/src/light/footer.inc.html @@ -0,0 +1,38 @@ + + + + + + + + + + + + +
+
+
+
+
+ +
+ + + +
+ +
+ + + + + +
+ + <!-- @echo logoAlt --> + +
+ + + \ No newline at end of file diff --git a/src/light/full-mail.html b/src/light/full-mail.html new file mode 100644 index 0000000..9245d75 --- /dev/null +++ b/src/light/full-mail.html @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + +
+ +
+ +
+ diff --git a/src/light/head.inc.html b/src/light/head.inc.html new file mode 100644 index 0000000..5a6305e --- /dev/null +++ b/src/light/head.inc.html @@ -0,0 +1,34 @@ + + + + + + + + + + \ No newline at end of file diff --git a/src/light/signature-reply.html b/src/light/signature-reply.html new file mode 100644 index 0000000..81f6f7a --- /dev/null +++ b/src/light/signature-reply.html @@ -0,0 +1,23 @@ + + + +
+ + + + + + + +
+ + + + + +
+
+
+
+
+ \ No newline at end of file diff --git a/src/light/signature.html b/src/light/signature.html new file mode 100644 index 0000000..a5951b2 --- /dev/null +++ b/src/light/signature.html @@ -0,0 +1,14 @@ + + + +
+ + + + + + + + +
+