antwort 0.0.12 → 1.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (96) hide show
  1. checksums.yaml +4 -4
  2. data/.gitignore +1 -0
  3. data/.rubocop.yml +12 -0
  4. data/.ruby-version +1 -1
  5. data/CHANGELOG.md +28 -1
  6. data/README.md +1 -1
  7. data/antwort.gemspec +2 -2
  8. data/lib/antwort.rb +5 -4
  9. data/lib/antwort/builder/builder.rb +15 -24
  10. data/lib/antwort/builder/email.rb +47 -22
  11. data/lib/antwort/builder/flattener.rb +8 -9
  12. data/lib/antwort/builder/partial.rb +12 -11
  13. data/lib/antwort/builder/style.rb +26 -27
  14. data/lib/antwort/{builder.rb → builders.rb} +3 -3
  15. data/lib/antwort/cli.rb +0 -1
  16. data/lib/antwort/cli/cli.rb +42 -48
  17. data/lib/antwort/cli/send.rb +11 -14
  18. data/lib/antwort/cli/upload.rb +29 -28
  19. data/lib/antwort/core.rb +4 -0
  20. data/lib/antwort/email/build.rb +41 -0
  21. data/lib/antwort/email/collection.rb +41 -0
  22. data/lib/antwort/email/data.rb +27 -0
  23. data/lib/antwort/email/template.rb +88 -0
  24. data/lib/antwort/helpers/file_helper.rb +27 -0
  25. data/lib/antwort/{helpers.rb → helpers/helper.rb} +2 -2
  26. data/lib/antwort/helpers/logic_helper.rb +81 -0
  27. data/lib/antwort/helpers/markup_helper.rb +37 -0
  28. data/lib/antwort/{builder/helpers/sanitizers.rb → helpers/sanitizers_helper.rb} +2 -4
  29. data/lib/antwort/helpers/server_helper.rb +32 -0
  30. data/lib/antwort/{server.rb → server/server.rb} +26 -23
  31. data/{template/project → lib/antwort/server}/views/404.html.erb +1 -1
  32. data/{template/project → lib/antwort/server}/views/index.html.erb +4 -6
  33. data/{template/project → lib/antwort/server}/views/layout.erb +5 -5
  34. data/{template/project/views/markup/_button.html.erb → lib/antwort/server/views/markup/button.html.erb} +0 -0
  35. data/{template/project/views/markup/_image_tag.html.erb → lib/antwort/server/views/markup/image_tag.html.erb} +0 -0
  36. data/{template/project → lib/antwort/server}/views/server.erb +0 -0
  37. data/lib/antwort/version.rb +1 -1
  38. data/spec/builder/builder_spec.rb +17 -22
  39. data/spec/builder/email_spec.rb +11 -12
  40. data/spec/builder/flattener_spec.rb +20 -21
  41. data/spec/builder/helpers_logic_spec.rb +69 -73
  42. data/spec/builder/partial_spec.rb +42 -51
  43. data/spec/builder/style_spec.rb +25 -34
  44. data/spec/{cli_spec.rb → cli/cli_spec.rb} +8 -9
  45. data/spec/cli/send_spec.rb +80 -0
  46. data/spec/cli/upload_spec.rb +17 -9
  47. data/spec/email/build_spec.rb +13 -0
  48. data/spec/email/collection_spec.rb +56 -0
  49. data/spec/email/data_spec.rb +40 -0
  50. data/spec/email/template_spec.rb +116 -0
  51. data/spec/fixtures/assets/css/demo/include.scss +3 -0
  52. data/spec/fixtures/assets/css/demo/inline.scss +33 -0
  53. data/spec/fixtures/assets/css/no-images/include.scss +1 -0
  54. data/spec/fixtures/assets/css/no-images/inline.scss +2 -0
  55. data/spec/fixtures/assets/css/shared/_base.scss +64 -0
  56. data/spec/fixtures/assets/css/shared/_mixins.scss +25 -0
  57. data/spec/fixtures/assets/css/shared/_reset.scss +59 -0
  58. data/spec/fixtures/assets/css/shared/_vars.scss +12 -0
  59. data/spec/fixtures/assets/css/shared/include.scss +23 -0
  60. data/spec/fixtures/assets/css/shared/inline.scss +9 -0
  61. data/spec/fixtures/build/demo-20160101/demo.html +177 -0
  62. data/spec/fixtures/build/demo-20160101/source/demo.html +118 -0
  63. data/spec/fixtures/build/demo-20160101/source/include.css +58 -0
  64. data/spec/fixtures/build/demo-20160101/source/inline.css +83 -0
  65. data/spec/fixtures/build/demo-20160102/demo.html +177 -0
  66. data/spec/fixtures/build/demo-20160102/source/demo.html +118 -0
  67. data/spec/fixtures/build/demo-20160102/source/include.css +58 -0
  68. data/spec/fixtures/build/demo-20160102/source/inline.css +83 -0
  69. data/{template/project/data/.empty_directory → spec/fixtures/emails/1-demo/_bar.erb} +0 -0
  70. data/spec/fixtures/emails/1-demo/_foo.erb +0 -0
  71. data/spec/fixtures/emails/1-demo/index.html.erb +2 -2
  72. data/spec/fixtures/emails/4-custom-layout/index.html.erb +6 -0
  73. data/spec/fixtures/emails/4-custom-layout/layout.erb +5 -0
  74. data/spec/fixtures/emails/demo/index.html.erb +4 -0
  75. data/spec/fixtures/emails/no-images/index.html.erb +4 -0
  76. data/spec/fixtures/emails/shared/_foo.erb +0 -0
  77. data/spec/fixtures/{views → emails/shared}/layout.erb +0 -0
  78. data/spec/helpers/file_helper_spec.rb +30 -0
  79. data/spec/server/server_spec.rb +57 -0
  80. data/spec/spec_helper.rb +18 -7
  81. data/template/project/Gemfile.tt +1 -7
  82. metadata +92 -42
  83. data/lib/antwort/builder/helpers/logic.rb +0 -82
  84. data/lib/antwort/cli/helpers.rb +0 -44
  85. data/lib/antwort/server/helpers.rb +0 -67
  86. data/lib/antwort/server/markup.rb +0 -39
  87. data/spec/cli/helpers_spec.rb +0 -60
  88. data/spec/fixtures/build/demo-123456/build.html +0 -7
  89. data/spec/fixtures/build/demo-123457/build.html +0 -7
  90. data/spec/fixtures/build/demo-bar-123/build.html +0 -7
  91. data/spec/fixtures/views/404.html.erb +0 -1
  92. data/spec/fixtures/views/index.html.erb +0 -14
  93. data/spec/fixtures/views/server.erb +0 -5
  94. data/spec/server_spec.rb +0 -54
  95. data/template/project/.ruby-version +0 -1
  96. data/template/project/data/config.yml +0 -3
@@ -0,0 +1,118 @@
1
+ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2
+ "http://www.w3.org/TR/html4/loose.dtd">
3
+ <html lang="en">
4
+ <head>
5
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- So that mobile will display zoomed in -->
7
+ <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- enable media queries for windows phone 8 -->
8
+ <meta name="format-detection" content="telephone=no"> <!-- disable auto telephone linking in iOS -->
9
+ <title>Email Title</title>
10
+ <link rel="stylesheet" type="text/css" href="inline.css">
11
+ <link rel="stylesheet" type="text/css" href="include.css">
12
+ </head>
13
+ <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
14
+
15
+ <!-- 100% wrapper (grey background) -->
16
+ <table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0">
17
+ <tr>
18
+ <td align="center" valign="top">
19
+
20
+ <br>
21
+
22
+ <!-- 600px container (white background) -->
23
+ <table border="0" width="600" cellpadding="0" cellspacing="0" class="container">
24
+ <tr>
25
+ <td class="content container-padding">
26
+ <br>
27
+
28
+ <div class="title">Using Antwort Generator</div>
29
+ <br>
30
+
31
+ <div class="body-text">
32
+ This is a demo email to get you started. The ID is 'demo', based on the file name.
33
+ <br><br>
34
+
35
+ Make sure your body text is always wrapped with a <code>.body-text</code> class, if not within a <code>td</code> then as least within a <code>div</code>.
36
+ <br><br>
37
+
38
+ <strong>Loading YAML Data</strong><br>
39
+ If you have a YAML file with the same name as your email-template name, for example a <code>demo.yml</code> for the <code>demo</code> email, you can load data like this:
40
+ <br><br>
41
+
42
+
43
+ &bull; Peter<br>
44
+
45
+ &bull; Paul<br>
46
+
47
+ &bull; Mary<br>
48
+
49
+ <br><br>
50
+
51
+ <strong>Image Tag Helper</strong><br>
52
+
53
+ Adding images in email requires a lot of extra markup. To dry up the code, we have an <code>image_tag</code> helper, which you can use like this:<br>
54
+ <img src="/assets/shared/placeholder.png" border="0" alt="Placeholder" width="50" height="50" class="foo" hspace="0" vspace="0">
55
+ <br><br>
56
+
57
+
58
+ <strong>Button Helper</strong><br>
59
+ This is how you use the <code>button</code> helper:
60
+ <br><br>
61
+ <table border="0" cellspacing="0" cellpadding="0" class="button">
62
+ <tr>
63
+ <td align="center"><a href="/"><!--[if mso]>&nbsp;<![endif]-->Default Button &rarr;<!--[if mso]>&nbsp;<![endif]--></a></td>
64
+ </tr>
65
+ </table>
66
+ <br>
67
+ <table border="0" cellspacing="0" cellpadding="0" class="button green">
68
+ <tr>
69
+ <td align="center"><a href="/"><!--[if mso]>&nbsp;<![endif]-->A green button &rarr;<!--[if mso]>&nbsp;<![endif]--></a></td>
70
+ </tr>
71
+ </table>
72
+
73
+ <br><br>
74
+
75
+ To create additional button styles, make sure you add the appropriate CSS class definitions. See <code>_base.scss</code> for an example.
76
+ <br><br>
77
+ </div>
78
+
79
+
80
+ <div class="body-text">
81
+ <strong>Using Partials</strong>
82
+ <br><br>
83
+
84
+ You can use the <code>partial</code> helper to include external files. Note: partial filenames <em>must</em> begin with an underscore '_'. Use the optional <code>locals</code> attribute to pass data to the partial.
85
+ </div>
86
+ <br>
87
+
88
+ <table border="0" cellspacing="0" cellpadding="0" class="table">
89
+ <tr>
90
+
91
+ <td width="200" align="center" class="body-text">
92
+ <em>Hello Peter</em><br>
93
+ </td>
94
+
95
+ <td width="200" align="center" class="body-text">
96
+ <em>Hello Paul</em><br>
97
+ </td>
98
+
99
+ <td width="200" align="center" class="body-text">
100
+ <em>Hello Mary</em><br>
101
+ </td>
102
+
103
+ </tr>
104
+ </table>
105
+ <br><br>
106
+
107
+ </td>
108
+ </tr>
109
+ </table>
110
+ <!--/600px container -->
111
+
112
+ </td>
113
+ </tr>
114
+ </table>
115
+ <!--/100% wrapper-->
116
+
117
+ </body>
118
+ </html>
@@ -0,0 +1,58 @@
1
+ body {
2
+ margin: 0;
3
+ padding: 0;
4
+ -ms-text-size-adjust: 100%;
5
+ -webkit-text-size-adjust: 100%;
6
+ }
7
+
8
+ table {
9
+ border-spacing: 0;
10
+ }
11
+
12
+ table td {
13
+ border-collapse: collapse;
14
+ }
15
+
16
+ .ExternalClass {
17
+ width: 100%;
18
+ }
19
+
20
+ .ExternalClass,
21
+ .ExternalClass p,
22
+ .ExternalClass span,
23
+ .ExternalClass font,
24
+ .ExternalClass td,
25
+ .ExternalClass div {
26
+ line-height: 100%;
27
+ }
28
+
29
+ .ReadMsgBody {
30
+ width: 100%;
31
+ background-color: #ebebeb;
32
+ }
33
+
34
+ table {
35
+ mso-table-lspace: 0pt;
36
+ mso-table-rspace: 0pt;
37
+ }
38
+
39
+ img {
40
+ -ms-interpolation-mode: bicubic;
41
+ }
42
+
43
+ .yshortcuts a {
44
+ border-bottom: none !important;
45
+ }
46
+
47
+ @media screen and (max-width: 600px) {
48
+ .container {
49
+ width: 100% !important;
50
+ max-width: 100% !important;
51
+ }
52
+ }
53
+ @media screen and (max-width: 400px) {
54
+ .container-padding {
55
+ padding-left: 10px;
56
+ padding-right: 10px;
57
+ }
58
+ }
@@ -0,0 +1,83 @@
1
+ body {
2
+ margin: 0;
3
+ padding: 0;
4
+ }
5
+
6
+ .container {
7
+ width: 600px;
8
+ max-width: 600px;
9
+ }
10
+
11
+ .container-padding {
12
+ padding-left: 20px;
13
+ padding-right: 20px;
14
+ }
15
+
16
+ .content {
17
+ background-color: #ffffff;
18
+ }
19
+
20
+ .title {
21
+ font-weight: bold;
22
+ font-size: 24px;
23
+ line-height: 28px;
24
+ font-family: Helvetica, Arial, sans-serif;
25
+ }
26
+
27
+ .body-text {
28
+ font-size: 16px;
29
+ line-height: 20px;
30
+ font-family: Helvetica, Arial, sans-serif;
31
+ }
32
+
33
+ .button td {
34
+ -webkit-border-radius: 3px;
35
+ -moz-border-radius: 3px;
36
+ border-radius: 3px;
37
+ background-color: #2095F2;
38
+ }
39
+ .button a {
40
+ -webkit-border-radius: 3px;
41
+ -moz-border-radius: 3px;
42
+ border-radius: 3px;
43
+ font-weight: bold;
44
+ font-size: 14px;
45
+ line-height: 20px;
46
+ font-family: Helvetica, Arial, sans-serif;
47
+ text-decoration: none;
48
+ display: inline-block;
49
+ padding: 12px 18px;
50
+ border: 1px solid #0e89eb;
51
+ background-color: #2095F2;
52
+ color: #ffffff;
53
+ }
54
+ .button.green td, .button.green a {
55
+ background-color: #8AC249;
56
+ border-color: #7db53d;
57
+ }
58
+
59
+ table[align="center"] {
60
+ margin-left: auto;
61
+ margin-right: auto;
62
+ }
63
+
64
+ code {
65
+ font-size: 14px;
66
+ line-height: 16px;
67
+ font-family: 'Courier New', Courier, monospace;
68
+ background-color: #eeeeee;
69
+ color: #333333;
70
+ display: inline-block;
71
+ padding: 0 4px;
72
+ vertical-align: middle;
73
+ }
74
+
75
+ .table td {
76
+ border: 1px solid #dddddd;
77
+ border-left-width: 0;
78
+ padding-top: 10px;
79
+ padding-bottom: 10px;
80
+ }
81
+ .table td:first-child {
82
+ border-left-width: 1px;
83
+ }
@@ -0,0 +1,177 @@
1
+ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2
+ <html lang="en">
3
+ <head>
4
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- So that mobile will display zoomed in -->
6
+ <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- enable media queries for windows phone 8 -->
7
+ <meta name="format-detection" content="telephone=no"> <!-- disable auto telephone linking in iOS -->
8
+ <title>Fixture Demo</title>
9
+ <style type="text/css">
10
+ body {
11
+ margin: 0;
12
+ padding: 0;
13
+ -ms-text-size-adjust: 100%;
14
+ -webkit-text-size-adjust: 100%;
15
+ }
16
+
17
+ table {
18
+ border-spacing: 0;
19
+ }
20
+
21
+ table td {
22
+ border-collapse: collapse;
23
+ }
24
+
25
+ .ExternalClass {
26
+ width: 100%;
27
+ }
28
+
29
+ .ExternalClass,
30
+ .ExternalClass p,
31
+ .ExternalClass span,
32
+ .ExternalClass font,
33
+ .ExternalClass td,
34
+ .ExternalClass div {
35
+ line-height: 100%;
36
+ }
37
+
38
+ .ReadMsgBody {
39
+ width: 100%;
40
+ background-color: #ebebeb;
41
+ }
42
+
43
+ table {
44
+ mso-table-lspace: 0pt;
45
+ mso-table-rspace: 0pt;
46
+ }
47
+
48
+ img {
49
+ -ms-interpolation-mode: bicubic;
50
+ }
51
+
52
+ .yshortcuts a {
53
+ border-bottom: none !important;
54
+ }
55
+
56
+ @media screen and (max-width: 600px) {
57
+ .container {
58
+ width: 100% !important;
59
+ max-width: 100% !important;
60
+ }
61
+ }
62
+ @media screen and (max-width: 400px) {
63
+ .container-padding {
64
+ padding-left: 10px;
65
+ padding-right: 10px;
66
+ }
67
+ }
68
+ </style>
69
+
70
+
71
+ </head>
72
+ <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="margin:0;padding:0">
73
+
74
+ <!-- 100% wrapper (grey background) -->
75
+ <table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0">
76
+ <tr>
77
+ <td align="center" valign="top">
78
+
79
+ <br>
80
+
81
+ <!-- 600px container (white background) -->
82
+ <table border="0" width="600" cellpadding="0" cellspacing="0" class="container" style="width:600px;max-width:600px">
83
+ <tr>
84
+ <td class="content container-padding" style="padding-left:20px;padding-right:20px;background-color:#ffffff">
85
+ <br>
86
+
87
+ <div class="title" style="font-weight:bold;font-size:24px;line-height:28px;font-family:Helvetica, Arial, sans-serif">Using Antwort Generator</div>
88
+ <br>
89
+
90
+ <div class="body-text" style="font-size:16px;line-height:20px;font-family:Helvetica, Arial, sans-serif">
91
+ This is a demo email to get you started. The ID is 'demo', based on the file name.
92
+ <br><br>
93
+
94
+ Make sure your body text is always wrapped with a <code style="font-size:14px;line-height:16px;font-family:'Courier New', Courier, monospace;background-color:#eeeeee;color:#333333;display:inline-block;padding:0 4px;vertical-align:middle">.body-text</code> class, if not within a <code style="font-size:14px;line-height:16px;font-family:'Courier New', Courier, monospace;background-color:#eeeeee;color:#333333;display:inline-block;padding:0 4px;vertical-align:middle">td</code> then as least within a <code style="font-size:14px;line-height:16px;font-family:'Courier New', Courier, monospace;background-color:#eeeeee;color:#333333;display:inline-block;padding:0 4px;vertical-align:middle">div</code>.
95
+ <br><br>
96
+
97
+ <strong>Loading YAML Data</strong><br>
98
+ If you have a YAML file with the same name as your email-template name, for example a <code style="font-size:14px;line-height:16px;font-family:'Courier New', Courier, monospace;background-color:#eeeeee;color:#333333;display:inline-block;padding:0 4px;vertical-align:middle">demo.yml</code> for the <code style="font-size:14px;line-height:16px;font-family:'Courier New', Courier, monospace;background-color:#eeeeee;color:#333333;display:inline-block;padding:0 4px;vertical-align:middle">demo</code> email, you can load data like this:
99
+ <br><br>
100
+
101
+
102
+ • Peter<br>
103
+
104
+ • Paul<br>
105
+
106
+ • Mary<br>
107
+
108
+ <br><br>
109
+
110
+ <strong>Image Tag Helper</strong><br>
111
+
112
+ Adding images in email requires a lot of extra markup. To dry up the code, we have an <code style="font-size:14px;line-height:16px;font-family:'Courier New', Courier, monospace;background-color:#eeeeee;color:#333333;display:inline-block;padding:0 4px;vertical-align:middle">image_tag</code> helper, which you can use like this:<br>
113
+ <img src="/assets/shared/placeholder.png" border="0" alt="Placeholder" width="50" height="50" class="foo" hspace="0" vspace="0">
114
+ <br><br>
115
+
116
+
117
+ <strong>Button Helper</strong><br>
118
+ This is how you use the <code style="font-size:14px;line-height:16px;font-family:'Courier New', Courier, monospace;background-color:#eeeeee;color:#333333;display:inline-block;padding:0 4px;vertical-align:middle">button</code> helper:
119
+ <br><br>
120
+ <table border="0" cellspacing="0" cellpadding="0" class="button">
121
+ <tr>
122
+ <td align="center" style="-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;background-color:#2095F2"><a href="/" style="-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;font-weight:bold;font-size:14px;line-height:20px;font-family:Helvetica, Arial, sans-serif;text-decoration:none;display:inline-block;padding:12px 18px;border:1px solid #0e89eb;background-color:#2095F2;color:#ffffff"><!--[if mso]>&nbsp;<![endif]-->Default Button →<!--[if mso]>&nbsp;<![endif]--></a></td>
123
+ </tr>
124
+ </table>
125
+ <br>
126
+ <table border="0" cellspacing="0" cellpadding="0" class="button green">
127
+ <tr>
128
+ <td align="center" style="-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;background-color:#8AC249;border-color:#7db53d"><a href="/" style="-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;font-weight:bold;font-size:14px;line-height:20px;font-family:Helvetica, Arial, sans-serif;text-decoration:none;display:inline-block;padding:12px 18px;border:1px solid #0e89eb;background-color:#8AC249;color:#ffffff;border-color:#7db53d"><!--[if mso]>&nbsp;<![endif]-->A green button →<!--[if mso]>&nbsp;<![endif]--></a></td>
129
+ </tr>
130
+ </table>
131
+
132
+ <br><br>
133
+
134
+ To create additional button styles, make sure you add the appropriate CSS class definitions. See <code style="font-size:14px;line-height:16px;font-family:'Courier New', Courier, monospace;background-color:#eeeeee;color:#333333;display:inline-block;padding:0 4px;vertical-align:middle">_base.scss</code> for an example.
135
+ <br><br>
136
+ </div>
137
+
138
+
139
+ <div class="body-text" style="font-size:16px;line-height:20px;font-family:Helvetica, Arial, sans-serif">
140
+ <strong>Using Partials</strong>
141
+ <br><br>
142
+
143
+ You can use the <code style="font-size:14px;line-height:16px;font-family:'Courier New', Courier, monospace;background-color:#eeeeee;color:#333333;display:inline-block;padding:0 4px;vertical-align:middle">partial</code> helper to include external files. Note: partial filenames <em>must</em> begin with an underscore '_'. Use the optional <code style="font-size:14px;line-height:16px;font-family:'Courier New', Courier, monospace;background-color:#eeeeee;color:#333333;display:inline-block;padding:0 4px;vertical-align:middle">locals</code> attribute to pass data to the partial.
144
+ </div>
145
+ <br>
146
+
147
+ <table border="0" cellspacing="0" cellpadding="0" class="table">
148
+ <tr>
149
+
150
+ <td width="200" align="center" class="body-text" style="font-size:16px;line-height:20px;font-family:Helvetica, Arial, sans-serif;border:1px solid #dddddd;border-left-width:1px;padding-top:10px;padding-bottom:10px">
151
+ <em>Hello Peter</em><br>
152
+ </td>
153
+
154
+ <td width="200" align="center" class="body-text" style="font-size:16px;line-height:20px;font-family:Helvetica, Arial, sans-serif;border:1px solid #dddddd;border-left-width:0;padding-top:10px;padding-bottom:10px">
155
+ <em>Hello Paul</em><br>
156
+ </td>
157
+
158
+ <td width="200" align="center" class="body-text" style="font-size:16px;line-height:20px;font-family:Helvetica, Arial, sans-serif;border:1px solid #dddddd;border-left-width:0;padding-top:10px;padding-bottom:10px">
159
+ <em>Hello Mary</em><br>
160
+ </td>
161
+
162
+ </tr>
163
+ </table>
164
+ <br><br>
165
+
166
+ </td>
167
+ </tr>
168
+ </table>
169
+ <!--/600px container -->
170
+
171
+ </td>
172
+ </tr>
173
+ </table>
174
+ <!--/100% wrapper-->
175
+
176
+ </body>
177
+ </html>
@@ -0,0 +1,118 @@
1
+ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2
+ "http://www.w3.org/TR/html4/loose.dtd">
3
+ <html lang="en">
4
+ <head>
5
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- So that mobile will display zoomed in -->
7
+ <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- enable media queries for windows phone 8 -->
8
+ <meta name="format-detection" content="telephone=no"> <!-- disable auto telephone linking in iOS -->
9
+ <title>Email Title</title>
10
+ <link rel="stylesheet" type="text/css" href="inline.css">
11
+ <link rel="stylesheet" type="text/css" href="include.css">
12
+ </head>
13
+ <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
14
+
15
+ <!-- 100% wrapper (grey background) -->
16
+ <table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0">
17
+ <tr>
18
+ <td align="center" valign="top">
19
+
20
+ <br>
21
+
22
+ <!-- 600px container (white background) -->
23
+ <table border="0" width="600" cellpadding="0" cellspacing="0" class="container">
24
+ <tr>
25
+ <td class="content container-padding">
26
+ <br>
27
+
28
+ <div class="title">Using Antwort Generator</div>
29
+ <br>
30
+
31
+ <div class="body-text">
32
+ This is a demo email to get you started. The ID is 'demo', based on the file name.
33
+ <br><br>
34
+
35
+ Make sure your body text is always wrapped with a <code>.body-text</code> class, if not within a <code>td</code> then as least within a <code>div</code>.
36
+ <br><br>
37
+
38
+ <strong>Loading YAML Data</strong><br>
39
+ If you have a YAML file with the same name as your email-template name, for example a <code>demo.yml</code> for the <code>demo</code> email, you can load data like this:
40
+ <br><br>
41
+
42
+
43
+ &bull; Peter<br>
44
+
45
+ &bull; Paul<br>
46
+
47
+ &bull; Mary<br>
48
+
49
+ <br><br>
50
+
51
+ <strong>Image Tag Helper</strong><br>
52
+
53
+ Adding images in email requires a lot of extra markup. To dry up the code, we have an <code>image_tag</code> helper, which you can use like this:<br>
54
+ <img src="/assets/shared/placeholder.png" border="0" alt="Placeholder" width="50" height="50" class="foo" hspace="0" vspace="0">
55
+ <br><br>
56
+
57
+
58
+ <strong>Button Helper</strong><br>
59
+ This is how you use the <code>button</code> helper:
60
+ <br><br>
61
+ <table border="0" cellspacing="0" cellpadding="0" class="button">
62
+ <tr>
63
+ <td align="center"><a href="/"><!--[if mso]>&nbsp;<![endif]-->Default Button &rarr;<!--[if mso]>&nbsp;<![endif]--></a></td>
64
+ </tr>
65
+ </table>
66
+ <br>
67
+ <table border="0" cellspacing="0" cellpadding="0" class="button green">
68
+ <tr>
69
+ <td align="center"><a href="/"><!--[if mso]>&nbsp;<![endif]-->A green button &rarr;<!--[if mso]>&nbsp;<![endif]--></a></td>
70
+ </tr>
71
+ </table>
72
+
73
+ <br><br>
74
+
75
+ To create additional button styles, make sure you add the appropriate CSS class definitions. See <code>_base.scss</code> for an example.
76
+ <br><br>
77
+ </div>
78
+
79
+
80
+ <div class="body-text">
81
+ <strong>Using Partials</strong>
82
+ <br><br>
83
+
84
+ You can use the <code>partial</code> helper to include external files. Note: partial filenames <em>must</em> begin with an underscore '_'. Use the optional <code>locals</code> attribute to pass data to the partial.
85
+ </div>
86
+ <br>
87
+
88
+ <table border="0" cellspacing="0" cellpadding="0" class="table">
89
+ <tr>
90
+
91
+ <td width="200" align="center" class="body-text">
92
+ <em>Hello Peter</em><br>
93
+ </td>
94
+
95
+ <td width="200" align="center" class="body-text">
96
+ <em>Hello Paul</em><br>
97
+ </td>
98
+
99
+ <td width="200" align="center" class="body-text">
100
+ <em>Hello Mary</em><br>
101
+ </td>
102
+
103
+ </tr>
104
+ </table>
105
+ <br><br>
106
+
107
+ </td>
108
+ </tr>
109
+ </table>
110
+ <!--/600px container -->
111
+
112
+ </td>
113
+ </tr>
114
+ </table>
115
+ <!--/100% wrapper-->
116
+
117
+ </body>
118
+ </html>