]> git.ipfire.org Git - thirdparty/foundation/foundation-emails.git/commitdiff
Add dedicated testing folder
authorGeoff Kimball <geoff@zurb.com>
Mon, 24 Aug 2015 21:51:20 +0000 (14:51 -0700)
committerGeoff Kimball <geoff@zurb.com>
Mon, 24 Aug 2015 21:51:20 +0000 (14:51 -0700)
14 files changed:
_build/container-test.html [new file with mode: 0644]
_build/css/ink.css [new file with mode: 0644]
_build/goodbye.html [new file with mode: 0644]
_build/hello.html [new file with mode: 0644]
_build/letter.html [new file with mode: 0644]
package.json
src/partials/footer.handlebars [deleted file]
src/partials/header.handlebars [deleted file]
test/gulpfile.js [new file with mode: 0644]
test/layouts/default.html [moved from src/layouts/default.html with 86% similarity]
test/pages/container-test.html [moved from src/pages/container-test.handlebars with 100% similarity]
test/pages/goodbye.html [moved from src/pages/goodbye.handlebars with 100% similarity]
test/pages/hello.html [moved from src/pages/hello.handlebars with 100% similarity]
test/pages/letter.html [moved from src/pages/letter.handlebars with 99% similarity]

diff --git a/_build/container-test.html b/_build/container-test.html
new file mode 100644 (file)
index 0000000..971b0f1
--- /dev/null
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="css/ink.css">
+  <!-- inject:mq-css -->
+  <!-- endinject -->
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+  <meta name="viewport" content="width=device-width">
+</head>
+<body>
+  <table class="body">
+    <tr>
+      <td class="center" align="center" valign="top">
+        <center>
+         <table class="container"><tbody><tr><td>
+           <table class="row"><tbody><tr>
+             <td class="wrapper last"><table class="small-12 large-12 columns"><td class="sub-columns last small-6 large-6">
+                   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.
+                   </p>
+                 </td><td class="expander"></td><td class="sub-columns last small-6 large-6">
+                   <img src="http://placehold.it/400x100" alt="">
+                  </td><td class="expander"></td></table></td>
+           </tr></tbody></table>
+         </td></tr></tbody></table>
+         
+         <br>
+         <br>
+         <br>
+         <br>
+         
+         <table class="container"><tbody><tr><td>
+           <table class="row"><tbody><tr>
+             <td class="wrapper"><table class="small-12 large-6 columns"><tr><td><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.
+               </p></td><td class="expander"></td></tr></table></td>
+             <td class="wrapper last"><table class="small-12 large-6 columns"><tr><td><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.
+               </p></td><td class="expander"></td></tr></table></td>
+           </tr></tbody></table>
+         </td></tr></tbody></table>
+         
+        </center>
+      </td>
+    </tr>
+  </table>
+</body>
+</html>
\ No newline at end of file
diff --git a/_build/css/ink.css b/_build/css/ink.css
new file mode 100644 (file)
index 0000000..bf3a603
--- /dev/null
@@ -0,0 +1,1094 @@
+/* Client-specific Styles & Reset */
+#outlook a {
+  padding: 0; }
+
+body {
+  width: 100% !important;
+  min-width: 100%;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  margin: 0;
+  padding: 0; }
+
+/* .ExternalClass applies to Outlook.com (the artist formerly known as Hotmail)  */
+.ExternalClass {
+  width: 100%; }
+  .ExternalClass,
+  .ExternalClass p,
+  .ExternalClass span,
+  .ExternalClass font,
+  .ExternalClass td,
+  .ExternalClass div {
+    line-height: 100%; }
+
+#backgroundTable {
+  margin: 0;
+  padding: 0;
+  width: 100% !important;
+  line-height: 100% !important; }
+
+img {
+  outline: none;
+  text-decoration: none;
+  -ms-interpolation-mode: bicubic;
+  width: auto;
+  max-width: 100%;
+  float: left;
+  clear: both;
+  display: block; }
+
+center {
+  width: 100%;
+  min-width: 580px; }
+
+a img {
+  border: none; }
+
+p {
+  margin: 0 0 0 10px; }
+
+table {
+  border-spacing: 0;
+  border-collapse: collapse; }
+
+td {
+  word-break: break-word;
+  -webkit-hyphens: auto;
+  -moz-hyphens: auto;
+  hyphens: auto;
+  border-collapse: collapse !important; }
+
+table, tr, td {
+  padding: 0;
+  vertical-align: top;
+  text-align: left; }
+
+hr {
+  color: #d9d9d9;
+  background-color: #d9d9d9;
+  height: 1px;
+  border: none; }
+
+/* Responsive Grid */
+table.body {
+  height: 100%;
+  width: 100%; }
+
+table.container {
+  width: 580px;
+  margin: 0 auto;
+  text-align: inherit; }
+
+table.row {
+  padding: 0px;
+  width: 100%;
+  position: relative; }
+
+table.container table.row {
+  display: block; }
+
+td.wrapper {
+  padding: 10px 20px 0px 0px;
+  position: relative; }
+
+table.columns,
+table.column {
+  margin: 0 auto; }
+
+table.columns td,
+table.column td {
+  padding: 0px 0px 10px; }
+
+table.row td.last,
+table.container td.last {
+  padding-right: 0px; }
+
+table.large-1 {
+  width: 30px; }
+
+table.large-2 {
+  width: 80px; }
+
+table.large-3 {
+  width: 130px; }
+
+table.large-4 {
+  width: 180px; }
+
+table.large-5 {
+  width: 230px; }
+
+table.large-6 {
+  width: 280px; }
+
+table.large-7 {
+  width: 330px; }
+
+table.large-8 {
+  width: 380px; }
+
+table.large-9 {
+  width: 430px; }
+
+table.large-10 {
+  width: 480px; }
+
+table.large-11 {
+  width: 530px; }
+
+table.large-12 {
+  width: 580px; }
+
+table.large-1 center {
+  min-width: 30px; }
+
+table.large-2 center {
+  min-width: 80px; }
+
+table.large-3 center {
+  min-width: 130px; }
+
+table.large-4 center {
+  min-width: 180px; }
+
+table.large-5 center {
+  min-width: 230px; }
+
+table.large-6 center {
+  min-width: 280px; }
+
+table.large-7 center {
+  min-width: 330px; }
+
+table.large-8 center {
+  min-width: 380px; }
+
+table.large-9 center {
+  min-width: 430px; }
+
+table.large-10 center {
+  min-width: 480px; }
+
+table.large-11 center {
+  min-width: 530px; }
+
+table.large-12 center {
+  min-width: 580px; }
+
+table.large-1 .panel center {
+  min-width: 10px; }
+
+table.large-2 .panel center {
+  min-width: 60px; }
+
+table.large-3 .panel center {
+  min-width: 110px; }
+
+table.large-4 .panel center {
+  min-width: 160px; }
+
+table.large-5 .panel center {
+  min-width: 210px; }
+
+table.large-6 .panel center {
+  min-width: 260px; }
+
+table.large-7 .panel center {
+  min-width: 310px; }
+
+table.large-8 .panel center {
+  min-width: 360px; }
+
+table.large-9 .panel center {
+  min-width: 410px; }
+
+table.large-10 .panel center {
+  min-width: 460px; }
+
+table.large-11 .panel center {
+  min-width: 510px; }
+
+table.large-12 .panel center {
+  min-width: 560px; }
+
+.body .columns td.large-1,
+.body .column td.large-1 {
+  width: 8.33333%; }
+
+.body .columns td.large-2,
+.body .column td.large-2 {
+  width: 16.66667%; }
+
+.body .columns td.large-3,
+.body .column td.large-3 {
+  width: 25%; }
+
+.body .columns td.large-4,
+.body .column td.large-4 {
+  width: 33.33333%; }
+
+.body .columns td.large-5,
+.body .column td.large-5 {
+  width: 41.66667%; }
+
+.body .columns td.large-6,
+.body .column td.large-6 {
+  width: 50%; }
+
+.body .columns td.large-7,
+.body .column td.large-7 {
+  width: 58.33333%; }
+
+.body .columns td.large-8,
+.body .column td.large-8 {
+  width: 66.66667%; }
+
+.body .columns td.large-9,
+.body .column td.large-9 {
+  width: 75%; }
+
+.body .columns td.large-10,
+.body .column td.large-10 {
+  width: 83.33333%; }
+
+.body .columns td.large-11,
+.body .column td.large-11 {
+  width: 91.66667%; }
+
+.body .columns td.large-12,
+.body .column td.large-12 {
+  width: 100%; }
+
+td.offset-by-1 {
+  padding-left: 50px; }
+
+td.offset-by-2 {
+  padding-left: 100px; }
+
+td.offset-by-3 {
+  padding-left: 150px; }
+
+td.offset-by-4 {
+  padding-left: 200px; }
+
+td.offset-by-5 {
+  padding-left: 250px; }
+
+td.offset-by-6 {
+  padding-left: 300px; }
+
+td.offset-by-7 {
+  padding-left: 350px; }
+
+td.offset-by-8 {
+  padding-left: 400px; }
+
+td.offset-by-9 {
+  padding-left: 450px; }
+
+td.offset-by-10 {
+  padding-left: 500px; }
+
+td.offset-by-11 {
+  padding-left: 550px; }
+
+td.expander {
+  visibility: hidden;
+  width: 0px;
+  padding: 0 !important; }
+
+table.columns .text-pad,
+table.column .text-pad {
+  padding-left: 10px;
+  padding-right: 10px; }
+
+table.columns .left-text-pad,
+table.columns .text-pad-left,
+table.column .left-text-pad,
+table.column .text-pad-left {
+  padding-left: 10px; }
+
+table.columns .right-text-pad,
+table.columns .text-pad-right,
+table.column .right-text-pad,
+table.column .text-pad-right {
+  padding-right: 10px; }
+
+.block-grid {
+  width: 100%;
+  max-width: 580px; }
+  .block-grid td {
+    display: inline-block;
+    padding: 10px; }
+
+.up-2 td {
+  width: 270px !important; }
+
+.up-3 td {
+  width: 173px !important; }
+
+.up-4 td {
+  width: 125px !important; }
+
+.up-5 td {
+  width: 96px !important; }
+
+.up-6 td {
+  width: 76px !important; }
+
+.up-7 td {
+  width: 62px !important; }
+
+.up-8 td {
+  width: 52px !important; }
+
+table.center,
+td.center,
+h1.center,
+h2.center,
+h3.center,
+h4.center,
+h5.center,
+h6.center,
+p.center,
+span.center {
+  text-align: center; }
+
+span.center {
+  display: block;
+  width: 100%; }
+
+img.center {
+  margin: 0 auto;
+  float: none; }
+
+.show-for-small,
+.hide-for-desktop {
+  display: none; }
+
+/* Typography */
+body, table.body, h1, h2, h3, h4, h5, h6, p, td {
+  color: #222222;
+  font-family: Helvetica, Arial, sans-serif;
+  font-weight: normal;
+  padding: 0;
+  margin: 0;
+  text-align: left;
+  line-height: 1.3; }
+
+h1, h2, h3, h4, h5, h6 {
+  word-break: normal; }
+
+h1 {
+  font-size: 40px; }
+
+h2 {
+  font-size: 36px; }
+
+h3 {
+  font-size: 32px; }
+
+h4 {
+  font-size: 28px; }
+
+h5 {
+  font-size: 24px; }
+
+h6 {
+  font-size: 20px; }
+
+body, table.body, p, td {
+  font-size: 14px;
+  line-height: 19px; }
+
+p.lead, p.lede, p.leed {
+  font-size: 18px;
+  line-height: 21px; }
+
+p {
+  margin-bottom: 10px; }
+
+small {
+  font-size: 10px; }
+
+a {
+  color: #2ba6cb;
+  text-decoration: none; }
+
+a:hover {
+  color: #2795b6 !important; }
+
+a:active {
+  color: #2795b6 !important; }
+
+a:visited {
+  color: c #2ba6cb !important; }
+
+h1 a,
+h2 a,
+h3 a,
+h4 a,
+h5 a,
+h6 a {
+  color: #2ba6cb; }
+
+h1 a:active,
+h2 a:active,
+h3 a:active,
+h4 a:active,
+h5 a:active,
+h6 a:active {
+  color: #2ba6cb !important; }
+
+h1 a:visited,
+h2 a:visited,
+h3 a:visited,
+h4 a:visited,
+h5 a:visited,
+h6 a:visited {
+  color: #2ba6cb !important; }
+
+/* Buttons */
+table.button {
+  width: 100%;
+  overflow: visible; }
+
+table.button td {
+  display: block;
+  width: auto !important;
+  text-align: center;
+  background: #2ba6cb;
+  border: 1px solid #2284a1;
+  color: #ffffff;
+  padding: 0px 0; }
+
+table.button td a, table.button.tiny td a {
+  padding: 5px 0; }
+
+table.button.small td a {
+  padding: 8px 0; }
+
+table.button.medium td a {
+  padding: 12px 0; }
+
+table.button.large td a {
+  padding: 21px 0; }
+
+table.button td a {
+  font-weight: bold;
+  text-decoration: none;
+  font-family: Helvetica, Arial, sans-serif;
+  color: #ffffff;
+  font-size: 16px;
+  display: block;
+  height: 100%;
+  width: 100%; }
+
+table.button.tiny td a {
+  font-size: 12px;
+  font-weight: normal; }
+
+table.button.small td a {
+  font-size: 16px; }
+
+table.button.medium td a {
+  font-size: 20px; }
+
+table.button.large td a {
+  font-size: 24px; }
+
+table.button:hover td,
+table.button:visited td,
+table.button:active td {
+  background: #2795b6 !important; }
+
+table.button:hover td a,
+table.button:visited td a,
+table.button:active td a {
+  color: #ffffff !important; }
+
+table.button:hover td
+ {
+  background: #2284a1; }
+
+table.button:hover td a,
+table.button:active td a,
+table.button td a:visited
+ {
+  color: #ffffff !important; }
+
+table.button.secondary td {
+  background: #e9e9e9;
+  border-color: #d0d0d0;
+  color: #555555; }
+
+table.button.secondary td a {
+  color: #555555; }
+
+table.button.secondary:hover td {
+  background: #d0d0d0 !important;
+  color: #555555; }
+
+table.button.secondary:hover td a,
+table.button.secondary td a:visited,
+table.button.secondary:active td a {
+  color: #555555 !important; }
+
+table.button.success td {
+  background: #5da423;
+  border-color: #457a1a; }
+
+table.button.success:hover td {
+  background: #457a1a !important; }
+
+table.button.alert td {
+  background: #c60f13;
+  border-color: #970b0e; }
+
+table.button.alert:hover td {
+  background: #970b0e !important; }
+
+table.button.radius td {
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px; }
+
+table.button.round td {
+  -webkit-border-radius: 500px;
+  -moz-border-radius: 500px;
+  border-radius: 500px; }
+
+td.callout {
+  width: 100%;
+  border: 1px solid #bfbfbf;
+  padding: 10px !important;
+  background: #f2f2f2; }
+
+td.callout.success {
+  background: #43AC6A !important;
+  border: 1px solid #26633d !important;
+  color: #FFFFFF !important; }
+
+td.wrapper table tr td.callout.warning {
+  background: #f08a24 !important;
+  border: 1px solid #a3570b !important;
+  color: #FFFFFF; }
+
+td.callout.alert {
+  background: #f04124 !important;
+  border: 1px solid #a3210b !important;
+  color: #FFFFFF; }
+
+td.callout.round {
+  border-radius: 50px !important; }
+
+.sub-grid table {
+  width: 100%; }
+
+.sub-grid td.sub-columns {
+  padding-bottom: 0; }
+
+.thumbnail {
+  display: inline-block;
+  border-collapse: separate; }
+  .thumbnail img {
+    background-color: #ff0000;
+    border-collapse: separate; }
+  .thumbnail:hover, .thumbnail:focus {
+    box-shadow: 0 0 6px 1px rgba(0, 140, 186, 0.5); }
+
+table.inline-list {
+  width: 100% !important; }
+
+td.vertical {
+  padding-top: 10px !important; }
+
+table[class="body"] table.inline-list td.vertical {
+  display: block !important; }
+
+/* Outlook First */
+body.outlook p {
+  display: inline !important; }
+
+/*  Media Queries */
+@media only screen and (max-width: 600px) {
+  table[class="body"] img {
+    width: auto !important;
+    height: auto !important; }
+
+  table[class="body"] center {
+    min-width: 0 !important; }
+
+  table[class="body"] .container {
+    width: 95% !important; }
+
+  table[class="body"] .row {
+    width: 100% !important;
+    display: block !important; }
+
+  table[class="body"] .wrapper {
+    display: block !important;
+    padding-right: 0 !important; }
+
+  table[class="body"] .columns,
+  table[class="body"] .column {
+    table-layout: fixed !important;
+    float: none !important;
+    width: 100% !important;
+    padding-right: 0px !important;
+    padding-left: 0px !important;
+    display: inline-block !important;
+    margin: 0 !important; }
+
+  table[class="body"] .wrapper.first .columns,
+  table[class="body"] .wrapper.first .column {
+    display: table !important; }
+
+  table[class="body"] table.columns td,
+  table[class="body"] table.column td {
+    width: 100% !important; }
+
+  .wrapper > table.small-1 {
+    width: 8.33333% !important; }
+
+  .wrapper > table.small-2 {
+    width: 16.66667% !important; }
+
+  .wrapper > table.small-3 {
+    width: 25% !important; }
+
+  .wrapper > table.small-4 {
+    width: 33.33333% !important; }
+
+  .wrapper > table.small-5 {
+    width: 41.66667% !important; }
+
+  .wrapper > table.small-6 {
+    width: 50% !important; }
+
+  .wrapper > table.small-7 {
+    width: 58.33333% !important; }
+
+  .wrapper > table.small-8 {
+    width: 66.66667% !important; }
+
+  .wrapper > table.small-9 {
+    width: 75% !important; }
+
+  .wrapper > table.small-10 {
+    width: 83.33333% !important; }
+
+  .wrapper > table.small-11 {
+    width: 91.66667% !important; }
+
+  .wrapper > table.small-12 {
+    width: 100% !important; }
+
+  .wrapper > table.small-12 {
+    display: block !important; }
+
+  .body .columns td.small-1,
+  .body .column td.small-1,
+  table.small-1 center {
+    width: 8.33333% !important; }
+
+  .body .columns td.small-2,
+  .body .column td.small-2,
+  table.small-2 center {
+    width: 16.66667% !important; }
+
+  .body .columns td.small-3,
+  .body .column td.small-3,
+  table.small-3 center {
+    width: 25% !important; }
+
+  .body .columns td.small-4,
+  .body .column td.small-4,
+  table.small-4 center {
+    width: 33.33333% !important; }
+
+  .body .columns td.small-5,
+  .body .column td.small-5,
+  table.small-5 center {
+    width: 41.66667% !important; }
+
+  .body .columns td.small-6,
+  .body .column td.small-6,
+  table.small-6 center {
+    width: 50% !important; }
+
+  .body .columns td.small-7,
+  .body .column td.small-7,
+  table.small-7 center {
+    width: 58.33333% !important; }
+
+  .body .columns td.small-8,
+  .body .column td.small-8,
+  table.small-8 center {
+    width: 66.66667% !important; }
+
+  .body .columns td.small-9,
+  .body .column td.small-9,
+  table.small-9 center {
+    width: 75% !important; }
+
+  .body .columns td.small-10,
+  .body .column td.small-10,
+  table.small-10 center {
+    width: 83.33333% !important; }
+
+  .body .columns td.small-11,
+  .body .column td.small-11,
+  table.small-11 center {
+    width: 91.66667% !important; }
+
+  .body .columns td.small-12,
+  .body .column td.small-12,
+  table.small-12 center {
+    width: 100% !important; }
+
+  table[class="body"] .columns td.small-1,
+  table[class="body"] .column td.small-1 {
+    width: 8.33333% !important; }
+
+  table[class="body"] .columns td.small-2,
+  table[class="body"] .column td.small-2 {
+    width: 16.66667% !important; }
+
+  table[class="body"] .columns td.small-3,
+  table[class="body"] .column td.small-3 {
+    width: 25% !important; }
+
+  table[class="body"] .columns td.small-4,
+  table[class="body"] .column td.small-4 {
+    width: 33.33333% !important; }
+
+  table[class="body"] .columns td.small-5,
+  table[class="body"] .column td.small-5 {
+    width: 41.66667% !important; }
+
+  table[class="body"] .columns td.small-6,
+  table[class="body"] .column td.small-6 {
+    width: 50% !important; }
+
+  table[class="body"] .columns td.small-7,
+  table[class="body"] .column td.small-7 {
+    width: 58.33333% !important; }
+
+  table[class="body"] .columns td.small-8,
+  table[class="body"] .column td.small-8 {
+    width: 66.66667% !important; }
+
+  table[class="body"] .columns td.small-9,
+  table[class="body"] .column td.small-9 {
+    width: 75% !important; }
+
+  table[class="body"] .columns td.small-10,
+  table[class="body"] .column td.small-10 {
+    width: 83.33333% !important; }
+
+  table[class="body"] .columns td.small-11,
+  table[class="body"] .column td.small-11 {
+    width: 91.66667% !important; }
+
+  table[class="body"] .columns td.small-12,
+  table[class="body"] .column td.small-12 {
+    width: 100% !important; }
+
+  table[class="body"] td.offset-by-1 {
+    padding-left: 0 !important; }
+
+  table[class="body"] td.offset-by-2 {
+    padding-left: 0 !important; }
+
+  table[class="body"] td.offset-by-3 {
+    padding-left: 0 !important; }
+
+  table[class="body"] td.offset-by-4 {
+    padding-left: 0 !important; }
+
+  table[class="body"] td.offset-by-5 {
+    padding-left: 0 !important; }
+
+  table[class="body"] td.offset-by-6 {
+    padding-left: 0 !important; }
+
+  table[class="body"] td.offset-by-7 {
+    padding-left: 0 !important; }
+
+  table[class="body"] td.offset-by-8 {
+    padding-left: 0 !important; }
+
+  table[class="body"] td.offset-by-9 {
+    padding-left: 0 !important; }
+
+  table[class="body"] td.offset-by-10 {
+    padding-left: 0 !important; }
+
+  table[class="body"] td.offset-by-11 {
+    padding-left: 0 !important; }
+
+  table[class="body"] table.columns td.expander {
+    width: 1px !important; }
+
+  table[class="body"] .right-text-pad,
+  table[class="body"] .text-pad-right {
+    padding-left: 10px !important; }
+
+  table[class="body"] .left-text-pad,
+  table[class="body"] .text-pad-left {
+    padding-right: 10px !important; }
+
+  table[class="body"] .hide-for-small,
+  table[class="body"] .show-for-desktop {
+    display: none !important; }
+
+  table[class="body"] .show-for-small,
+  table[class="body"] .hide-for-desktop {
+    display: inherit !important; } }
+table[class="body"] table.inline-list td {
+  width: auto !important;
+  display: inline-block !important; }
+
+table[class="body"] table.inline-list.vertical td {
+  display: block !important; }
+
+/*Styles and overrides*/
+h1.main {
+  margin-bottom: 0; }
+
+.feature h2 {
+  margin: 0 0 30px; }
+
+p.metadata {
+  font-weight: 700;
+  font-size: 11px;
+  margin-bottom: 0px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  color: #999; }
+
+p.lead.gray {
+  color: #999; }
+
+p.lead.dark-gray {
+  color: #777; }
+
+img.thumbnail {
+  border: 1px solid #d9d9d9;
+  margin: 20px 0; }
+
+img.thumbnail.sm {
+  margin: 0 0 20px 0; }
+
+h5 {
+  margin-bottom: 10px;
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 1px; }
+
+h5 a {
+  color: #222 !important; }
+
+.copyright p {
+  margin-bottom: 0px;
+  font-size: 11px;
+  color: #999; }
+
+.copyright a {
+  color: #999;
+  font-weight: bold; }
+
+.copyright p.dark, .copyright p.dark a {
+  color: #222; }
+
+ul.steps {
+  list-style: none;
+  padding-left: 0px; }
+
+ul.steps li, ul.steps p {
+  margin-bottom: 0; }
+
+.flush {
+  margin: 0 !important; }
+
+p.comment {
+  background: #f5f5f5;
+  padding: 16px 20px;
+  margin-bottom: 0;
+  padding-left: 80px; }
+
+p.next.comment {
+  border-top: 2px solid #fff; }
+
+div.triangle {
+  margin-left: 12px;
+  border-left: 10px transparent solid;
+  border-right: 10px transparent solid;
+  border-bottom: 10px solid #f5f5f5;
+  width: 0px; }
+
+.cite {
+  font-size: 12px;
+  color: #999;
+  font-weight: bold;
+  margin: 8px 0 0 0;
+  display: block; }
+
+img.avatar {
+  margin: 20px auto 0;
+  border-radius: 50%;
+  height: 80px;
+  width: 80px; }
+
+p.comment.note {
+  padding-left: 80px; }
+
+.note-pip {
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  background: #333;
+  color: white;
+  font-size: 10px;
+  font-weight: bold;
+  text-align: center;
+  line-height: 22px;
+  float: left; }
+
+.post-note {
+  padding-left: 40px; }
+
+.post-note a, .post-note a:hover {
+  color: #222 !important; }
+
+table.button.influence td {
+  background: #2badbe; }
+
+table.button.influence:hover td {
+  background: #27a1aa !important; }
+
+table.button.verify td {
+  background: #b6d133; }
+
+table.button.verify:hover td {
+  background: #b0c130 !important; }
+
+table.button.solidify td {
+  background: #c71d5e; }
+
+table.button.solidify:hover td {
+  background: #ba1c5d !important; }
+
+table.button.hosted td {
+  background: #078cba; }
+
+table.button.hosted:hover td {
+  background: #0786a8 !important; }
+
+table.button.university td {
+  background: #ff6908; }
+
+table.button.university:hover td {
+  background: #e55e07 !important; }
+
+table.set-thumbs td.wrapper {
+  padding: 10px 5px; }
+
+table.set-thumbs td img {
+  margin: 0; }
+
+table.set-thumbs .cite {
+  float: right; }
+
+table.share-news p {
+  margin: 0; }
+
+table.share-news .button {
+  margin: 0; }
+
+table.share-news .button td {
+  padding: 0; }
+
+table.share-news .button a {
+  padding: 12px 0;
+  display: block; }
+
+.panel.light-gray {
+  background: #f9f9f9;
+  padding: 20px 30px !important; }
+
+.panel.light-gray p {
+  padding: 0 20px; }
+
+pre {
+  background: #f9f9f9;
+  margin: 30px 0; }
+
+pre code {
+  color: #777; }
+
+pre code span.callout {
+  color: #555;
+  font-weight: bold; }
+
+pre code span.callout-strong {
+  color: #ff6908;
+  font-weight: bold; }
+
+hr {
+  color: #efefef;
+  background-color: #efefef; }
+
+td.wrapper-small-left {
+  padding-left: 0 !important; }
+
+/* Tweets Yo */
+td.tweet-pad {
+  padding-top: 5px !important;
+  padding-bottom: 0px !important; }
+
+td.tweet-head {
+  padding-top: 30px !important;
+  padding-bottom: 10px !important; }
+
+td.tweet-foot {
+  padding-top: 0 !important;
+  padding-bottom: 10px !important; }
+
+td.tweet-foot p {
+  margin-bottom: 0 !important;
+  padding-bottom: 15px !important; }
+
+.tweet-date, .tweet-handle {
+  color: #999999;
+  font-size: 16px !important; }
+
+.tweet-pad h3 {
+  margin-bottom: 0; }
+
+.tweet-pad h3, .tweet-pad h6 {
+  margin-left: 60px !important; }
+
+.panel a .tweet-avatar {
+  width: 50px !important;
+  height: auto !important; }
+
+.panel {
+  padding: 25px !important;
+  padding-top: 25px !important; }
+
+table[class="body"] .thumb-caption {
+  margin-top: 110px !important; }
+
+@media only screen and (max-width: 600px) {
+  td.wrapper {
+    padding-left: 0; }
+
+  table[class="body"] .columns.stay-4 {
+    width: 180px !important; }
+
+  table[class="body"] .thin-row {
+    width: 180px !important;
+    margin: 0 auto !important; } }
diff --git a/_build/goodbye.html b/_build/goodbye.html
new file mode 100644 (file)
index 0000000..1e9bc2d
--- /dev/null
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="css/ink.css">
+  <!-- inject:mq-css -->
+  <!-- endinject -->
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+  <meta name="viewport" content="width=device-width">
+</head>
+<body>
+  <table class="body">
+    <tr>
+      <td class="center" align="center" valign="top">
+        <center>
+         <table class="row"><tbody><tr>
+           <td class="wrapper last"><table class="small-12 large-12 columns"><tr><td><h6>What&apos;s up</h6></td><td class="expander"></td></tr></table></td>
+         </tr></tbody></table>
+        </center>
+      </td>
+    </tr>
+  </table>
+</body>
+</html>
\ No newline at end of file
diff --git a/_build/hello.html b/_build/hello.html
new file mode 100644 (file)
index 0000000..487db28
--- /dev/null
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="css/ink.css">
+  <!-- inject:mq-css -->
+  <!-- endinject -->
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+  <meta name="viewport" content="width=device-width">
+</head>
+<body>
+  <table class="body">
+    <tr>
+      <td class="center" align="center" valign="top">
+        <center>
+         <table class="row header"><tbody><tr>
+           <table class="container"><tbody><tr><td>
+             </td><td class="wrapper last"><table class="small-12 large-12 columns"><td class="sub-columns last small-6 large-6">
+                 <img src="http://placehold.it/200x50">
+               </td><td class="expander"></td><td class="sub-columns last small-6 large-6">
+                 <span class="template-label">SIDEBAR HERO</span>
+               </td><td class="expander"></td></table></td>
+           </tr></tbody></table></tr></tbody></table></center></td></tr></table>    
+         
+         <table class="container"><tbody><tr><td>
+           <table class="row"><tbody><tr>
+             <td class="wrapper last"><table class="small-12 large-12 columns"><tr><td><h1>asdfakh</h1></td><td class="expander"></td></tr><tr><td><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p></td><td class="expander"></td></tr><img width="580" height="300" src="https://placekitten.com/g/580/300"><td class="expander"></td></table></td>
+           </tr></tbody></table>
+           <table class="row"><tbody><tr>
+             <td class="wrapper last"><table class="small-12 large-12 columns"><td class="callout">
+                 <p>Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae.</p>
+                 <table class="button"><tbody><tr><td><a href="#">Click it! &#xBB;</a></td></tr></tbody></table>
+               </td><td class="expander"></td></table></td>
+           </tr></tbody></table>
+           <table class="row"><tbody><tr>
+             <td class="wrapper"><table class="small-12 large-6 columns"><tr><td><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet.</p></td><td class="expander"></td></tr><tr><td><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet.</p></td><td class="expander"></td></tr><td><table class="button"><tbody><tr><td><a href="#">Click Me!</a></td></tr></tbody></table></td><td class="expander"></td><tr><td><br></td><td class="expander"></td></tr><td class="callout">
+               <p>What a game</p>
+               </td><td class="expander"></td></table></td>
+             <td class="wrapper last"><table class="small-12 large-6 columns"><td class="callout">
+                 <h6>Header Thing</h6>
+                 <p>Sub-head or something</p>
+                 <table class="inline-list"><tbody><tr><td class="vertical"><a href="#">Just a Plain Link &#xBB;</a></td></tr><tr><td class="vertical"><a href="#">Just a Plain Link &#xBB;</a></td></tr><tr><td class="vertical"><a href="#">Just a Plain Link &#xBB;</a></td></tr><tr><td class="vertical"><hr></td></tr><tr><td class="vertical"><a href="#">Just a Plain Link &#xBB;</a></td></tr><tr><td class="vertical"><hr></td></tr><tr><td class="vertical"><a href="#">Just a Plain Link &#xBB;</a></td></tr><tr><td class="vertical"><hr></td></tr><tr><td class="vertical"><a href="#">Just a Plain Link &#xBB;</a></td></tr><tr><td class="vertical"><hr></td></tr><tr><td class="vertical"><a href="#">Just a Plain Link &#xBB;</a></td></tr></tbody></table>
+               </td><td class="expander"></td></table></td>
+           </tr></tbody></table>
+           <table class="row"><tbody><tr>
+             <td class="wrapper"><table class="small-12 large-6 columns"></table></td>
+             <td class="wrapper last"><table class="small-12 large-6 columns"><td class="callout">
+                 <h6 style="margin-bottom:5px;">Connect With Us:</h6>
+                 <table class="button tiny-button facebook"><tbody><tr><td>
+                   <a href="#">Facebook</a>
+                 </td></tr></tbody></table>
+                 <hr>
+                 <table class="button tiny-button twitter"><tbody><tr><td>
+                   <a href="#">Twitter</a>
+                 </td></tr></tbody></table>
+                 <hr>
+                 <table class="button tiny-button google-plus"><tbody><tr><td>
+                   <a href="#">Google</a>
+                 </td></tr></tbody></table>
+                 <br>
+                 <h6 style="margin-bottom:5px;">Contact Info:</h6>
+                 <p>Phone: <b>408.341.0600</b></p>
+                 <p>Email: <a href="mailto:hseldon@trantor.com">hseldon@trantor.com</a></p>
+               </td><td class="expander"></td></table></td>
+           </tr></tbody></table>
+         </td></tr></tbody></table>
+         
+        
+      
+    
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/_build/letter.html b/_build/letter.html
new file mode 100644 (file)
index 0000000..bf43daf
--- /dev/null
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="css/ink.css">
+  <!-- inject:mq-css -->
+  <!-- endinject -->
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+  <meta name="viewport" content="width=device-width">
+</head>
+<body>
+  <table class="body">
+    <tr>
+      <td class="center" align="center" valign="top">
+        <center>
+         <table class="container"><tbody><tr><td>
+           <table class="row"><tbody><tr>
+             <td class="wrapper last"><table class="small-12 large-12 columns"><tr><td><p class="lead">Hi John,</p></td><td class="expander"></td></tr><tr><td><p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet.</p></td><td class="expander"></td></tr></table></td>
+         </tr></tbody></table>
+         <table class="row"><tbody><tr>
+           <td class="wrapper last"><table class="small-12 large-12 columns"><img width="580" height="300" src="http://placehold.it/580x300"><td class="expander"></td></table></td>
+         </tr></tbody></table>
+         <table class="row"><tbody><tr>
+           <td class="wrapper last"><table class="small-12 large-12 columns"><tr><td><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p></td><td class="expander"></td></tr><tr><td><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p></td><td class="expander"></td></tr><tr><td><p>Cheers,<br>Bryan</p></td><td class="expander"></td></tr></table></td>
+         </tr></tbody></table>
+         <hr>
+         <table class="row"><tbody><tr>
+             <td class="wrapper"><table class="small-12 large-6 columns"><tr>
+                 <td class="tweet-pad panel tweet-head">
+                   <a href="https://twitter.com/ZURB/status/541043140933582848">
+                     <img align="left" class="tweet-avatar" src="http://placehold.it/50x50">
+                     <h3>ZURB</h3>
+                     <h6 class="tweet-handle">@ZURB</h6>
+                   </a>
+                 </td>
+                 <td class="expander"></td>
+               </tr><td class="expander"></td><tr>
+                 <td class="tweet-pad panel">
+                   <p>Introducing Foundation for Apps: Create beautiful web apps that look great on all devices. <a href="http://t.co/ufBR1IalT5">zurb.us/1yjUnj6</a></p>
+                 </td>
+                 <td class="expander"></td>   
+               </tr><td class="expander"></td><tr>
+                 <td class="tweet-pad tweet-foot panel">
+                   <a href="https://twitter.com/ZURB/status/541043140933582848">
+                     <p class="tweet-date">8:35 PM - 5 Dec 2014</p>
+                   </a>
+                 </td>
+                 <td class="expander"></td> 
+               </tr><td class="expander"></td></table></td>
+         
+             <td class="wrapper last"><table class="small-12 large-6 columns"><tr>
+                 <td align="left" class="tweet-pad panel tweet-head">
+                   <a href="https://twitter.com/ZURB/status/541043140933582848">
+                     <img align="left" class="tweet-avatar" src="http://placehold.it/50x50">
+                     <h3>ZURB</h3>
+                     <h6 class="tweet-handle">@ZURB</h6>
+                   </a>
+                 </td>
+                 <td class="expander"></td>
+               </tr><td class="expander"></td><tr>
+                 <td class="tweet-pad panel">
+                   <p>Introducing Foundation for Apps: Create beautiful web apps that look great on all devices. <a href="http://t.co/ufBR1IalT5">zurb.us/1yjUnj6</a></p>
+                 </td>
+                 <td class="expander"></td>   
+               </tr><td class="expander"></td><tr>
+                 <td class="tweet-pad tweet-foot panel">
+                   <a href="https://twitter.com/ZURB/status/541043140933582848">
+                     <p class="tweet-date">8:35 PM - 5 Dec 2014</p>
+                   </a>
+                 </td>
+                 <td class="expander"></td> 
+               </tr><td class="expander"></td></table></td>
+         </tr></tbody></table>
+         <hr>
+         
+         
+         
+         
+         <table class="row copyright"><tbody><tr>
+           <td class="wrapper last"><table class="small-12 large-12 columns"><tr><td><h5 class="center">Sharing is caring</h5></td><td class="expander"></td></tr><tr><td><p class="center">Share ZURBnews and keep the good vibes going.</p></td><td class="expander"></td></tr></table></td>
+         </tr></tbody></table>
+         
+         <!-- ^^^^^Expander not working^^^^^ -->
+         
+         
+         <table class="row share-news" offset="1"><tbody><tr>
+         <!-- ^^^Not sure how to best implement the offset class.^^^^ 
+              It is applied to a td.wrapper that is automatically generated.
+              This might be a proposed option -->
+              <td class="wrapper"><table class="small-12 large-1 columns"></table></td>
+           <td class="wrapper"><table class="small-12 large-5 columns"><td><table class="button facebook"><tbody><tr><td>
+               <a href="#">Share on facebook</a> 
+             </td></tr></tbody></table></td><td class="expander"></td></table></td>
+           <td class="wrapper last"><table class="small-12 large-5 columns"><td><table class="button facebook"><tbody><tr><td>
+               <a href="#">Share on facebook</a> 
+             </td></tr></tbody></table></td><td class="expander"></td></table></td>
+         </tr></tbody></table>
+         <hr>
+         </td></tr></tbody></table>
+         
+        </center>
+      </td>
+    </tr>
+  </table>
+</body>
+</html>
\ No newline at end of file
index d1b073d13ab7da61d11ea075a2ddd491b65705c6..4a41af5a6e06e448dd1157f83b40e29cdaebd878 100644 (file)
@@ -2,23 +2,23 @@
   "name": "foundation-email",
   "version": "0.2.0",
   "description": "A framework for responsive emails made by ZURB",
+  "scripts": {
+    "start": "gulp",
+    "test": "cd test && gulp"
+  },
   "devDependencies": {
-    "fs": "0.0.2",
-    "glob": "^4.4.0",
-    "gulp": "^3.8.10",
-    "gulp-compile-handlebars": "^0.4.4",
-    "gulp-connect": "^2.2.0",
-    "gulp-foreach": "^0.1.0",
+    "gulp": "^3.8.11",
+    "gulp-htmlmin": "^1.1.1",
     "gulp-inject": "^1.2.0",
-    "gulp-inline-css": "^1.0.1",
-    "gulp-minify-html": "^0.1.8",
-    "gulp-rename": "^1.2.0",
-    "gulp-ruby-sass": "^0.7.1",
-    "gulp-scss-lint": "^0.2.4",
-    "handlebars": "^3.0.0",
+    "gulp-inky": "git://github.com/zurb/gulp-inky.git",
+    "gulp-inline-css": "^2.0.0",
+    "gulp-load-plugins": "^0.10.0",
+    "gulp-ruby-sass": "^1.0.5",
+    "gulp-webserver": "^0.9.1",
     "media-query-extractor": "^0.1.1",
-    "path": "^0.11.14",
-    "rimraf": "^2.2.8",
-    "vinyl-map": "^1.0.1"
+    "rimraf": "^2.3.3",
+    "run-sequence": "^1.1.0",
+    "shipyard": "git://github.com/gakimball/shipyard.git",
+    "yargs": "^3.9.0"
   }
 }
diff --git a/src/partials/footer.handlebars b/src/partials/footer.handlebars
deleted file mode 100644 (file)
index 284b2a0..0000000
+++ /dev/null
@@ -1,8 +0,0 @@
-<row>
-  <columns large='12'>
-    <center>
-      <p style="text-align:center;"><a href="#">Terms</a> | <a href="#">Privacy</a> | <a href="#">Unsubscribe</a></p>
-    </center>
-  </columns>
-</row>
-</container>
\ No newline at end of file
diff --git a/src/partials/header.handlebars b/src/partials/header.handlebars
deleted file mode 100644 (file)
index 6477e84..0000000
+++ /dev/null
@@ -1,12 +0,0 @@
-<row class="header">
-  <container>
-    <columns large='12' small='12'>
-      <subcolumns large='6' small='6'>
-        <img src="http://placehold.it/200x50">
-      </subcolumns>
-      <subcolumns large='6' small='6'>
-        <span class="template-label">SIDEBAR HERO</span>
-      </subcolumns>
-    </columns>
-  </container>    
-</row>
\ No newline at end of file
diff --git a/test/gulpfile.js b/test/gulpfile.js
new file mode 100644 (file)
index 0000000..923553c
--- /dev/null
@@ -0,0 +1,67 @@
+var gulp     = require('gulp');
+var $        = require('gulp-load-plugins')();
+var mq       = require('media-query-extractor');
+var rimraf   = require('rimraf');
+var shipyard = require('shipyard');
+var yargs    = require('yargs').argv;
+var sequence = require('run-sequence');
+
+// Look for the --production flag
+var isProduction = !!(yargs.production);
+
+// Delete the "dist" folder
+// This happens every time a build starts
+gulp.task('clean', function(done) {
+  rimraf('../_build', done);
+});
+
+// Compile layouts, pages, and partials into flat HTML files
+// Then parse using Inky templates
+gulp.task('pages', function() {
+  return gulp.src('./pages/**/*.html')
+    .pipe(shipyard({
+      layouts: './layouts'
+    }))
+    .pipe($.inky())
+    .pipe(gulp.dest('../_build'));
+});
+
+// Compile Sass into CSS
+gulp.task('sass', function() {
+  return $.rubySass('../scss/ink.scss')
+    .pipe(gulp.dest('../_build/css'));
+});
+
+// Inline CSS and minify HTML
+gulp.task('inline', ['build'], function() {
+  // Extracts media query-specific CSS into a separate file
+  mq('../_build/css/app.css', '../_build/css/app-mq.css');
+
+  // Injects that extracted CSS into the HTML
+  var inject = $.inject(gulp.src('../_build/css/app-mq.css'), {
+    starttag: '<!-- inject:mq -->',
+    transform: function(path, file) {
+      return '<style>\n' + file.contents.toString() + '\n</style>';
+    }
+  });
+
+  return gulp.src('../_build/*.html')
+    .pipe($.inlineCss())
+    .pipe(inject())
+    .pipe($.htmlmin())
+    .pipe(gulp.dest('../_build'));
+});
+
+// Build the "dist" folder by running all of the above tasks
+gulp.task('build', function(done) {
+  var tasks = ['pages', 'sass'];
+  if (isProduction) tasks.push('inline');
+
+  sequence('clean', tasks, done);
+});
+
+// Build emails, run the server, and watch for file changes
+gulp.task('default', ['build'], function() {
+  gulp.watch('./pages/**/*.html', ['pages']);
+  gulp.watch('../scss/**/*.scss', ['sass']);
+});
similarity index 86%
rename from src/layouts/default.html
rename to test/layouts/default.html
index 51b06f8cc8763cbf6be6e74b90ff406411c3d91e..fe259875a59a0733064398edb9ae14a86842c1f7 100644 (file)
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <link rel="stylesheet" type="text/css" href="/css/ink.css">
+  <link rel="stylesheet" type="text/css" href="css/ink.css">
   <!-- inject:mq-css -->
   <!-- endinject -->
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
similarity index 99%
rename from src/pages/letter.handlebars
rename to test/pages/letter.html
index bffe585cb7ca2c41891f9269a559afcf470a3188..d1baba291cb3fe24ec9a100b2ef8f93ed5af9ade 100644 (file)
 </row>
 <hr>
 </container>
-{{> footer }}