]> git.ipfire.org Git - thirdparty/foundation/foundation-emails.git/commitdiff
projects / thirdparty / foundation / foundation-emails.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: a5c79a8)
Changes to column calculations if someone did not put in size attributes. Gulp now...
authorJeanie Chung <jeanie.chung@gmail.com>
Wed, 18 Feb 2015 21:44:08 +0000 (13:44 -0800)
committerJeanie Chung <jeanie.chung@gmail.com>
Wed, 18 Feb 2015 21:44:08 +0000 (13:44 -0800)
gulpfile.js patch | blob | blame | history
html/index.html patch | blob | blame | history
output/gulp-zurb-inky/index.js patch | blob | blame | history
package.json patch | blob | blame | history
scss/ink.scss patch | blob | blame | history

diff --git a/gulpfile.js b/gulpfile.js
index 38f8877b9574442ea039af81cbafafa1dfbddc29..fedb9b7178708ec7f464903c7bf7ac687112ed33 100644 (file)
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -23,6 +23,8 @@ var gulp       = require('gulp'),
     connect    = require('gulp-connect'),
     minifyHTML = require('gulp-minify-html'),
     concat     = require('gulp-concat'),
+    extractMQ  = require('media-query-extractor'),
+    inject     = require('gulp-inject'),
     zfEmail    = require('gulp-zurb-foundation-email'),
     rimraf     = require('rimraf'),
     jasmine    = require('gulp-jasmine');
@@ -68,6 +70,27 @@ gulp.task('inline', function() {
     .pipe(gulp.dest(dirs.build))
 });
 
+// extract media queries into new CSS file called inkMQ.css
+// any remaining styles will go into ink-noMQ.css
+gulp.task('extract-mq', function () {
+  extractMQ( dirs.build + '/css/ink.css', dirs.build + '/css/ink-noMQ.css', ['only screen and (max-width: 600px)|./build/css/inkMQ.css']);
+});
+
+// inject media queries into the head of the inlined email
+gulp.task('inject-mq', ['extract-mq'], function() {
+  gulp.src(dirs.build + '/index-inline.html')
+    .pipe(inject(gulp.src(dirs.build + '/css/inkMQ.css'), {
+      starttag: '<!-- inject:mq-css -->',
+      transform: function (filePath, file) {
+        // return file contents as string
+        return "<style>\n" + file.contents.toString('utf8') + "\n</style>"
+      }
+    }))
+    .pipe(gulp.dest('./build'));
+})
+
+
+
 // 5. HTML
 // - - - - - - - - - - - - - - -
 
@@ -163,6 +186,8 @@ gulp.task('watch', ['serve'], function() {
 });
 
 
-gulp.task('deploy', ['minify-html', 'inline']);
+gulp.task('deploy', ['minify-html', 'inline'], function() {
+  gulp.start('inject-mq');
+});
 // Default task
 gulp.task('default', ['serve', 'watch']);
diff --git a/html/index.html b/html/index.html
index 08251f8ff2caefd883855e093f2dd5c307dde3b2..6bae2840df538c67ff9079f16253fd33bf68f710 100644 (file)
--- a/html/index.html
+++ b/html/index.html
@@ -2,6 +2,8 @@
 <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"/>
     <style>
@@ -104,7 +106,23 @@
                 <p>great success</p>
               </columns>
             </row>
-            gulp 
+            <row>
+              <columns>
+                <h1> Some side content </h1>
+
+              </columns>
+              <columns>
+                <h1> Some side content </h1>
+              </columns>
+              <columns>
+                <h1> Some side content </h1>
+
+              </columns>
+              <columns>
+                <h1> Some side content </h1>
+
+              </columns>
+             </row>
           </container>
         </center>
       </td>
diff --git a/output/gulp-zurb-inky/index.js b/output/gulp-zurb-inky/index.js
index 540795b9a32cdf5284f8d3d815968b282169e8ce..0b31eb84941b4fc9efd22c5a8b1e9fcee48c025e 100644 (file)
--- a/output/gulp-zurb-inky/index.js
+++ b/output/gulp-zurb-inky/index.js
@@ -10,7 +10,8 @@ var Inky = function Inky () {
     container: 'container',
     inlineListH: 'inline-list-h',
     inlineListV: 'inline-list-v'
-  }
+  },
+  this.columns = 12
 };
 
 Inky.prototype = {
@@ -132,7 +133,7 @@ Inky.prototype = {
       $ = cheerio.load(str);
 
       // see the mark up for dev purposes
-      // console.log($.html());
+      console.log($.html());
     }
     else {
       console.log("all done");
@@ -397,6 +398,8 @@ Inky.prototype = {
         inner       = $(col).html(),
         self        = this;
 
+    // Add 1 to include current column
+    var colCount = $(col).siblings().length + 1;
 
     if ($(col).attr('class')) {
       colClass = $(col).attr('class');
@@ -414,10 +417,16 @@ Inky.prototype = {
     if ($(col).attr('small')) {
       colSize += 'small' + '-' + $(col).attr('small') + ' ';
     }
+    else {
+      colSize += 'large-' + Math.floor(self.columns/colCount) + ' ';
+    }
 
     if ($(col).attr('large')) {
       colSize += 'large' + '-' + $(col).attr('large') + ' ';
     }
+    else {
+      colSize += 'large-' + Math.floor(self.columns/colCount) + ' ';
+    }
 
     output += '<table class="' + colSize + 'columns"><tr>';
 
diff --git a/package.json b/package.json
index 859e51d387bde9ccf3c0295cb72c272a47c47399..80c1397791940702dc8126338836b452fbe19f00 100644 (file)
--- a/package.json
+++ b/package.json
@@ -5,8 +5,10 @@
   "devDependencies": {
     "cheerio": "^0.18.0",
     "gulp": "^3.8.10",
+    "gulp-combine-mq": "^0.3.1",
     "gulp-concat": "^2.4.3",
     "gulp-connect": "^2.2.0",
+    "gulp-group-css-media-queries": "^1.0.0",
     "gulp-html2txt": "^1.1.0",
     "gulp-inline-css": "^1.0.1",
     "gulp-jasmine": "^2.0.0",
diff --git a/scss/ink.scss b/scss/ink.scss
index 530117726633bb5e4056f7884c2e05fec6f3c122..4a393ee142c78646fe3eeb7fe5061b7dd2a6a285 100755 (executable)
--- a/scss/ink.scss
+++ b/scss/ink.scss
@@ -19,4 +19,3 @@
        "ink/components/inline-lists",
        "ink/components/outlook-first",
        "ink/components/media-query";
-
Mirror of https://github.com/foundation/foundation-emails.git