added premailer instead of juice

posabsolute · Jan 25, 2015 · e04286d · e04286d
1 parent 4b7345b
commit e04286d
Show file tree

Hide file tree

Showing 9 changed files with 685 additions and 371 deletions.
diff --git a/dist/output/sidebar_hero/index.html b/dist/output/sidebar_hero/index.html
diff --git a/dist/templates/sidebar_hero/index.html b/dist/templates/sidebar_hero/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
-  <title>Email title in document head</title>
+  <title>Sidebar Hero</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <meta name="viewport" content="width=device-width"/>
   <link href="../../css/main.css" media="all" rel="stylesheet" type="text/css" />
@@ -113,16 +113,16 @@ <h1>Hi, </h1>
           </tr>
         </tbody></table>
 
-        <table class="row footer">
-          <tbody><tr>
-            <td class="wrapper">
-              <table class="six columns">
-                <tbody><tr>
-                  <td class="left-text-pad">
+       <table class="row footer">
+  <tbody><tr>
+    <td class="wrapper">
+      <table class="six columns">
+        <tbody><tr>
+          <td class="left-text-pad">
 
-                    <h6>We still miss some information from your account:</h6>
+            <h6>We still miss some information from your account:</h6>
 
-                    
+
 <table class='progressbar ' cellpadding="0" cellspacing="0" width="100%">
     <tr>
         <td class='foreground' width="70%">
@@ -134,17 +134,17 @@ <h6>We still miss some information from your account:</h6>
     </tr>
 </table>
 
-                  </td>
-                  <td class="expander"></td>
-                </tr>
-              </tbody></table>
+          </td>
+          <td class="expander"></td>
+        </tr>
+      </tbody></table>
 
-              <table class="six columns">
-                <tbody><tr>
-                  <td class="left-text-pad">
+      <table class="six columns">
+        <tbody><tr>
+          <td class="left-text-pad">
 
-                    <h5>Connect With Us:</h5>
-                    
+            <h5>Connect With Us:</h5>
+
 	<table class="button tiny-button" align="left">
 		<tr>
 		  <td>
@@ -153,8 +153,8 @@ <h5>Connect With Us:</h5>
 		</tr>
 	</table>
 
-                    <br> <br>
-                    
+            <br> <br>
+
 	<table class="button tiny-button" align="left">
 		<tr>
 		  <td>
@@ -163,8 +163,8 @@ <h5>Connect With Us:</h5>
 		</tr>
 	</table>
 
-                    <br> <br>
-                    
+            <br> <br>
+
 	<table class="button tiny-button" align="left">
 		<tr>
 		  <td>
@@ -173,49 +173,49 @@ <h5>Connect With Us:</h5>
 		</tr>
 	</table>
 
-                  </td>
-                  <td class="expander"></td>
-                </tr>
-              </tbody></table>
-
-            </td>
-            <td class="wrapper last">
-
-              <table class="six columns">
-                <tbody><tr>
-                  <td class="last right-text-pad">
-                    <h5>Contact Info:</h5>
-                    <p>Phone: 408.341.0600</p>
-                    <p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
-                  </td>
-                  <td class="expander"></td>
-                </tr>
-              </tbody></table>
-
-            </td>
-          </tr>
-        </tbody></table>
-
-
-        <table class="row">
-          <tbody><tr>
-            <td class="wrapper last">
-
-              <table class="twelve columns">
-                <tbody><tr>
-                  <td align="center">
-                    <center>
-                      <p style="text-align:center;"><a href="#">Terms</a> | <a href="#">Privacy</a> | <a href="#">Unsubscribe</a></p>
-                    </center>
-                  </td>
-                  <td class="expander"></td>
-                </tr>
-              </tbody></table>
-
-            </td>
-          </tr>
-        </tbody></table>
-
+          </td>
+          <td class="expander"></td>
+        </tr>
+      </tbody></table>
+
+    </td>
+    <td class="wrapper last">
+
+      <table class="six columns">
+        <tbody><tr>
+          <td class="last right-text-pad">
+            <h5>Contact Info:</h5>
+            <p>Phone: 408.341.0600</p>
+            <p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
+          </td>
+          <td class="expander"></td>
+        </tr>
+      </tbody></table>
+
+    </td>
+  </tr>
+</tbody></table>
+
+
+<table class="row">
+  <tbody><tr>
+    <td class="wrapper last">
+
+      <table class="twelve columns">
+        <tbody><tr>
+          <td align="center">
+            <center>
+              <p style="text-align:center;"><a href="#">Terms</a> | <a href="#">Privacy</a> | <a href="#">Unsubscribe</a></p>
+            </center>
+          </td>
+          <td class="expander"></td>
+        </tr>
+      </tbody></table>
+
+    </td>
+  </tr>
+</tbody></table>
+ 
       <!-- container end below -->
       </td>
     </tr>

diff --git a/gruntfile.js b/gruntfile.js
@@ -51,10 +51,10 @@ module.exports = function(grunt) {
                 ]
             }
         },
-        emailBuilder: {
+        premailer: {
           inline :{
             options: {
-              encodeSpecialChars: true
+
             },
             files : [{
               expand: true,
@@ -68,10 +68,25 @@ module.exports = function(grunt) {
             test: {
               src: ['dist/output/*.html', 'dist/output/**/*.html'],
               options: {
-                username: 'username',
-                password: 'password',
-                url: 'https://yourcompany.litmus.com',
-                clients: ['gmailnew', 'ffgmailnew', 'chromegmailnew']
+                username: '[email protected]',
+                password: 'pass',
+                url: 'https://cedricdugas.litmus.com',
+                clients: [
+                  //gmail
+                  'gmailnew', 'ffgmailnew', 'chromegmailnew',
+                  // outlook
+                  'ol2002', 'ol2003', 'ol2007', 'ol2010', 'ol2011', 'ol2013',
+                  // hotmail
+                  'outlookcom', 'ffoutlookcom', 'chromeoutlookcom', 
+                  //Yahoo
+                  'chromeyahoo',
+                  //applemail
+                  'appmail6',
+                  //mobile
+                  'iphone6plus', 'iphone6', 'iphone5s', 'androidgmailapp', 'android4', 'ipad',
+                  // spam check
+                  'messagelabs'
+                ]
               }
             }
         },
@@ -82,14 +97,14 @@ module.exports = function(grunt) {
                 options: {
                   service: 'Gmail',
                   auth: {
-                    user: 'cedric.dugas@gmail.com',
+                    user: 'email@gmail.com',
                     pass: 'test12'
                   }
                 }
               },
               recipients: [
                 {
-                  email: 'cedric.dugas@gmail.com',
+                  email: 'email@gmail.com',
                   name: 'Jane Doe'
                 }
               ]
@@ -130,6 +145,7 @@ module.exports = function(grunt) {
     grunt.loadNpmTasks('grunt-email-builder');
     grunt.loadNpmTasks('grunt-litmus');
     grunt.loadNpmTasks('grunt-nodemailer');
+    grunt.loadNpmTasks('grunt-premailer');
 
     grunt.registerTask('default',['watch']);
     grunt.registerTask('css',['sass']);

diff --git a/package.json b/package.json
@@ -25,10 +25,11 @@
     "grunt-contrib-watch": "^0.6.1",
     "grunt-email-builder": "^2.0.11",
     "grunt-litmus": "^0.1.8",
-    "posabsolute/grunt-nodemailer": "^0.2.2",
     "grunt-nunjucks": "^0.1.4",
     "grunt-nunjucks-2-html": "^0.2.2",
+    "grunt-premailer": "^0.2.11",
     "grunt-sass": "^0.17.0",
-    "nunjucks": "^1.1.0"
+    "nunjucks": "^1.1.0",
+    "posabsolute/grunt-nodemailer": "^0.2.2"
   }
 }
diff --git a/readme.md b/readme.md
@@ -35,7 +35,7 @@ You have now everything you need to use inker. Your first stop would be the exam
 * grunt build *- Build css & html*
 * grunt connect *- test emails in your browser from the root folder (http://0.0.0.0:8555/)
 * grunt email *- Send a test email to any email inbox*
-* grunt litmus *- Send a test email to litmus*
+* grunt sendlitmus *- Send a test email to litmus*
 
 
 ## CSS with Inker
@@ -283,9 +283,9 @@ Render:
 
 ## Sending test email to your inbox
 
-Inker use grunt-nodemailer to send test. By default it send a test for all files that are in the output folders, you can easily change that in **gruntfile.js**. 
+Inker use [grunt-nodemailer](https://github.com/posabsolute/grunt-nodemailer) to send test. By default it send a test for all files that are in the output folders, you can easily change that in **gruntfile.js**. 
 
-However a better way to use it would be to change the path directly from the grunt command. This make it possible to test really fast different templates.
+However a better way to use it would be to change the path directly from the grunt command. This make it possible to send tests really fast with different templates.
 
 ```bash
 // Override default src provided in gruntfile
@@ -316,7 +316,8 @@ nodemailer: {
     src: ['dist/output/*.html']
 },
 ```
-## Using litmus.
+
+## Using litmus
 
 Grunt litmus [documentation](https://github.com/jeremypeter/grunt-litmus).
 
@@ -326,6 +327,8 @@ Grunt litmus [documentation](https://github.com/jeremypeter/grunt-litmus).
 grunt litmus:dist/output/sidebar_hero/index.html
 
 ### Default config
+The most used email clients are already set in the config file.
+
 ```javascript
 litmus: {
   test: {
@@ -334,14 +337,29 @@ litmus: {
       username: 'username',
       password: 'password',
       url: 'https://yourcompany.litmus.com',
-      clients: ['gmailnew', 'ffgmailnew', 'chromegmailnew']
+      clients: [
+        //gmail
+        'gmailnew', 'ffgmailnew', 'chromegmailnew',
+        // outlook
+        'ol2002', 'ol2003', 'ol2007', 'ol2010', 'ol2011', 'ol2013',
+        // hotmail
+        'outlookcom', 'ffoutlookcom', 'chromeoutlookcom', 
+        //Yahoo
+        'chromeyahoo',
+        //applemail
+        'appmail6',
+        //mobile
+        'iphone6plus', 'iphone6', 'iphone5s', 'androidgmailapp', 'android4', 'ipad',
+        // spam check
+        'messagelabs'
+      ]
     }
   }
 },
 ```
 ## Special thanks
 
-Thanks to Litmus for providing free email client testing for this project.
+Thanks to [Litmus](http://www.litmus.com) for providing free email client testing for this project.
 
 
 ## Contributions
@@ -355,7 +373,7 @@ I am always happy to accept contributions, i"m currently looking for more compon
 
 The MIT License (MIT)
 
-Copyright (c) 2014 Cedric Dugas
+Copyright (c) 2014 Cedric Dugas [http://www.position-absolute.com](http://www.position-absolute.com)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/src/css/8_trumps/video.responsive.scss b/src/css/8_trumps/video.responsive.scss
@@ -0,0 +1,11 @@
+@media only screen and (max-width: 600px) {
+
+	video{
+		width:100% !important;
+		img{
+			width:100% !important;
+			height:auto !important;
+		}
+	}
+
+}