Made /examples dir, switched to generic templates in /src #12

This commit is contained in:
Dan Mindru 2016-05-12 19:42:56 +02:00
parent a1d9820db3
commit 27d060fd5f
49 changed files with 621 additions and 6 deletions

View File

Before

Width:  |  Height:  |  Size: 4.8 KiB

After

Width:  |  Height:  |  Size: 4.8 KiB

View File

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

View File

@ -14,8 +14,8 @@ module.exports = [
contactMain: '<a href="tel:+821012345678"><span>+82-10-1234-5678</span></a> | ', // 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/'
}
]
];

View File

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

View File

Before

Width:  |  Height:  |  Size: 4.5 KiB

After

Width:  |  Height:  |  Size: 4.5 KiB

View File

Before

Width:  |  Height:  |  Size: 8.9 KiB

After

Width:  |  Height:  |  Size: 8.9 KiB

View File

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

View File

Before

Width:  |  Height:  |  Size: 4.8 KiB

After

Width:  |  Height:  |  Size: 4.8 KiB

View File

@ -16,4 +16,4 @@ module.exports = [
logoAlt: 'fadeit logo',
website: 'http://fadeit.dk'
}
]
];

View File

Before

Width:  |  Height:  |  Size: 4.5 KiB

After

Width:  |  Height:  |  Size: 4.5 KiB

View File

@ -10,4 +10,4 @@ module.exports = [
logoAlt: 'Play. logo',
website: 'http://tryplay.dk'
}
]
];

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

13
src/dark/conf.js Normal file
View File

@ -0,0 +1,13 @@
module.exports = [
{
id: 'play',
signature: 'Best regards,',
name: 'Jane Whatsmyname',
contactMain: 'Call <a href="tel:004581100200"><span>(45) 81100200</span></a> 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'
}
];

36
src/dark/footer.inc.html Normal file
View File

@ -0,0 +1,36 @@
<td class="footer" bgcolor="#303030">
<!-- @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 />
<strong><!-- @echo name --></strong><br />
</td>
</tr>
<!-- @todo gulp-inline-css doesn't add height attrs -->
<tr class="spd" height="60px"></tr>
<tr>
<!-- @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 src="<!-- @echo logoUrl -->" alt="<!-- @echo logoAlt -->" class="footer__main__col2__td__img"/>
</a>
</td>
</table>
<!-- @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">
<span><!-- @echo slogan --></span><br/>
<!-- @echo contactMain -->
<a href="mailto:<!-- @echo contactMail -->" target="_blank"><!-- @echo contactMail --></a>
</td>
</table>
</tr>
</table>
</td>

42
src/dark/head.inc.html Normal file
View File

@ -0,0 +1,42 @@
<!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="play.css">
</head>
<style type="text/css">
/* Responsive stuff goes here (inline css doesn't know what to do with it). */
@media only screen and (max-width:560px){
.footer td{
font-size: 12px!important;
}
.footer__main__col1{
width: 100%!important;
}
.footer__main__col1__td{
text-align: left;
}
.footer__main__col1__td > span{
margin-bottom:10px;
}
.footer__main__col2{
width: 100%!important;
}
.footer__main__col2__td{
text-align: left;
padding-bottom:20px;
}
.footer__main__col2__td__img{
padding-left:0!important;
}
}
</style>

174
src/dark/play.css Normal file
View File

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

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/dark/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>

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 KiB

19
src/light/conf.js Normal file
View File

@ -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.<br/> We are delighted to reply with a responsive 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 31, DK-8381 Tilst, Aarhus',
logoUrl: 'http://fadeit.dk/src/assets/img/brand/fadeit-logo.png',
logoAlt: 'fadeit logo',
website: 'http://fadeit.dk'
}
];

160
src/light/fadeit.css Normal file
View File

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

38
src/light/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 src="<!-- @echo logoUrl -->" alt="<!-- @echo logoAlt -->" class="footer__main__col2__td__img"/>
</a>
</td>
</table>
</tr>
</table>
</td>

25
src/light/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>

34
src/light/head.inc.html Normal file
View File

@ -0,0 +1,34 @@
<!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="fadeit.css">
</head>
<style type="text/css">
/* Responsive stuff goes here (inline css doesn't know what to do with it). */
@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;
}
.footer__main__col2__td__img{
padding-left:0!important;
}
}
</style>

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/light/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>