From: Jeanie Chung Date: Wed, 18 Feb 2015 00:28:10 +0000 (-0800) Subject: Modified column parser to return output individually rather than in groups. X-Git-Tag: v2.0.0-rc.1~138 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=8995c96fd5557bf2f477bc61eb5bc601899414e1;p=thirdparty%2Ffoundation%2Ffoundation-emails.git Modified column parser to return output individually rather than in groups. --- diff --git a/gulpfile.js b/gulpfile.js index 2e49fc49..28c65319 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -158,7 +158,7 @@ gulp.task('serve', function() { // Live reloads on change gulp.task('watch', ['serve'], function() { gulp.watch([dirs.html], ['query','minify-html']); - gulp.watch(['node_modules/gulp-zurb-foundation-email/index.js'], ['query']) + gulp.watch(['node_modules/gulp-zurb-foundation-email/node_modules/gulp-zurb-inky/index.js'], ['query']) gulp.watch([dirs.styles], ['sass']); }); diff --git a/html/index.html b/html/index.html index e87b9c0f..5dd71045 100644 --- a/html/index.html +++ b/html/index.html @@ -88,21 +88,43 @@ - - - Forever alone - - - - - - Hellfasdfasdf!!! - - - + + + +

+ +

+ I'm a freakin callout yo. +

+ + + + + + +

+ got some success yo +

+ + + + +

+ got some success yo +

+ + + + + + +

+ Watch out there, cowboy. Watch out there, cowboy. Watch out there, cowboy. Watch out there, cowboy. Watch out there, cowboy. Watch out there, cowboy. Watch out there, cowboy. Watch out there, cowboy. Watch out there, cowboy. Watch out there, cowboy. Watch out there, cowboy. Watch out there, cowboy. Watch out there, cowboy. Watch out there, cowboy. +

+ + + diff --git a/html/template-lesson.html b/html/template-lesson.html deleted file mode 100644 index 76fa2763..00000000 --- a/html/template-lesson.html +++ /dev/null @@ -1,286 +0,0 @@ - - - - - - - - - - - - - - -

- - - - - - -

- - - - - - - - -

- - - - - - -

- -

- - - - - - -

- - - - - -

- -

Build Email Buttons That Work

Lesson 67 | Responsive Email Design

- -

- - - - -

- - - - - - - -

- - -

Calls to action are critical to many email campaigns: announcements, sales, and requests for donations all prompt people to do something outside of the email itself. That means buttons. And buttons mean trouble.

- -

A while back we learned the hard way that not every email browser reacts to buttons the same way. Hereâs what we learned about making buttons in emails that work across most clients.

- - -

1. Download Ink.

Get a copy of the framework (or look for the sample file at the end of this post).

- -

2. Create a containing table.

Unfortunately, tables are the principle means of arranging content in emails. Itâs 1998 all over again. In this case, weâll create a button thatâs about half the width of its container â something nice and big, but not an email-wide bar.

- - -

3. Create a link.

Naturally, this is where the button will take people when tapped. This is where we apply styles like color and shape to the button itself.

- - -

4. Create another table.

Inside the anchor â and we know thatâs technically illegal before HTML5 â we add another table. This keeps the anchor from collapsing when we want a particular size. (We used to just have an anchor â but that made the button completely untappable in certain versions of Outlook. Learn from our mistakes, people!) Inside this tableâs only cell is the text that you want to show users.

- -

5. Apply different styles.

Ink comes with a few different options:

Sizes

.tiny-button â smaller text size
.tiny-button â smaller text size
.tiny-button â smaller text size

Colors

.success â green by default
.success â green by default
.success â green by default

Other

.rounded â create circular ends
.rounded â create circular ends
.rounded â create circular ends

And there you have it: Relatively simple buttons you can use in your ink-based templates. Download the sample file. View this lesson online.

- -

- - - - - - -

Keep sharpening your skills online in our Responsive Email Design course

Following these tips is a great way to prepare for our online Responsive Email Design course where you'll learn about the techniques, patterns and best practices that make email work across many email clients, even Outlook.

Join the next class at 9AM (PDT) Jan. 20, 2015 -

- - - - - - -
- - - - - - -

- - - - - - -

About the author

Ben Gremillion is a Design Writer at ZURB. He started his career in newspaper and magazine design, saw a digital future, and learned HTML in short order. He facilitates the University training courses.

-
- - - - - - - -

- - - - - - -

Sharing is caring

Share University Lessons and help us educate the world on Progressive Design.

- -

- - - - - - - - -

- - - - - - - -

- - - - - - -

Brought to you by ZURB

Talk to us on the phone (408) 341-0600 or by email to getstarted@zurb.com

- -

ZURB, Inc. 100 W. Rincon Ave | Campbell, CA 95008

-
-

Want to Unsubscribe? Weâre sorry to see you go, but happy to make it easy on you. Unsubscribe

- -

- - -

- - \ No newline at end of file diff --git a/html/template.html b/html/template.html deleted file mode 100644 index a55cc1fd..00000000 --- a/html/template.html +++ /dev/null @@ -1,382 +0,0 @@ - - - - - - - - - - - - - - - -

- - - - - - -

- -

- - - - - - -

Punchy Headline Here

January 12, 2015

- - - - -

- - - - - -

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.

- -

- - - - - - -

- - - - - -

- - Put Link Here - -

- -

-
- - - - - -

- - - - - - -

thanks for the support

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

-
- - - - - - -

- - - - - -

Hereâs something awesome

Subheader please.. lorem ipsum dolor sit amet.

- - - - -

- - - - - -

Text CTAs Are Capitalized and Have Arrows →

- -

- - - - - - -

- - - - - -

Hereâs something awesome

Subheader please.. lorem ipsum dolor sit amet.

- - - - -

- - - - - -

Text CTAs Are Capitalized and Have Arrows →

- -

- - - - - - -

Hereâs something awesome

Subheader please.. lorem ipsum dolor sit amet. -

- -

- - - - - - - - -

- - - - - -

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.

Text CTA →

- -

- - - - - -

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.

Text CTA →

- -

- - - - - -

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.

Text CTA →

- -

- - - - - - - -

- - - - - - -

Sharing is caring

Share ZURBnews and keep the good vibes going.

- -

- - - - - - - - -

- - - - - - - -

- - - - - - -

Brought to you by ZURB

Talk to us on the phone (408) 341-0600 or by email to getstarted@zurb.com

- -

ZURB, Inc. 100 W. Rincon Ave | Campbell, CA 95008

-
-

Want to Unsubscribe? Weâre sorry to see you go, but happy to make it easy on you. Unsubscribe

- -

- - -

- - \ No newline at end of file diff --git a/output/gulp-zurb-inky/index.js b/output/gulp-zurb-inky/index.js index b226b445..99974892 100644 --- a/output/gulp-zurb-inky/index.js +++ b/output/gulp-zurb-inky/index.js @@ -3,7 +3,7 @@ var cheerio = require('cheerio'); var Inky = function Inky () { this.customTags = [ - "panel", + "callout", "row", "container", "columns", @@ -16,7 +16,15 @@ Inky.prototype = { getTags: function() { return this.customTags; }, - + // Description: + // Takes in HTML loaded via Cheerio as an argument, checks if there are any custom components. + // If there are, it replaces the nested components, traverses the DOM and replaces them with + // email markup. + // + // Arguments: + // $: Cheerio loaded string + // Returns: + // $: Cheerio modified string releaseTheKraken: function($) { var center = $('center').html(), self = this; @@ -29,6 +37,8 @@ Inky.prototype = { $(nestedComponents).each(function(idx, el) { var containerScaffold = self.scaffoldElements($, $(el)); }); + // see the mark up for dev purposes + console.log($.html()); } else { console.log("all done"); @@ -41,7 +51,7 @@ Inky.prototype = { // and replaces the custom tags with the correct table email markup. // // Arguments: - // str (String): A string containing the markup of a singular element + // $, str (String): Cheerio, and a string containing the markup of a singular element // Returns: // str (String): A string containing the markup of inputted element with contained elements scaffoldElements: function($, str) { @@ -52,6 +62,7 @@ Inky.prototype = { inner = $(str).html(), self = this; + // replace tags with proper table syntax // elMarkup retains the inner html within the markup if (element !== undefined) { @@ -64,6 +75,7 @@ Inky.prototype = { // find if there are more nested elements in the inner syntax var moreNested = self.findNestedComponents($, inner); + $(moreNested).each(function(idx, el) { // call a recursion to replace all nested elements self.scaffoldElements($, $(el)); @@ -74,7 +86,7 @@ Inky.prototype = { // Executes a function to find and return nested custom elements within another element // // Arguments: - // str (String): A string containing the markup of an element to be checked for nested components + // $, str (String): Cheerio, and a string containing the markup of an element to be checked for nested components // Returns: // nestedComponents (Array): An array containing the names (i.e. tags) of the nested components findNestedComponents: function($, str) { @@ -104,7 +116,7 @@ Inky.prototype = { // Goes through array of custom nested components to determine whether or not there are any on the DOM // // Arguments: - // null + // $ : Cheerio // Returns: // boolean: True if there are nested components on the DOM, false otherwise. checkNestedComponents: function($) { @@ -125,7 +137,7 @@ Inky.prototype = { // Returns output for desired custom element // // Arguments: - // element (obj), type (str): element as a cheerio object and type as the tag name + // $, element (obj), type (str): cheerio, element as a cheerio object, and type as the tag name // Returns: // HTML (string): Mark up for corresponding element with inner html contents untouched componentFactory: function($, element, type) { @@ -140,8 +152,8 @@ Inky.prototype = { }; switch (type) { - case 'panel': - output = '' + inner + ''; + case 'callout': + output = '' + inner + ''; break; case 'button': @@ -171,7 +183,7 @@ Inky.prototype = { break; case 'columns': - self.makeCols($, component, component.nextAll('columns')); + output = self.makeCols($, component); break; case 'row': @@ -192,52 +204,51 @@ Inky.prototype = { // Returns output for column elements. TODO: this could be refactored to handle both cols and subcols // // Arguments: - // col (obj), siblings (str): the initial target column and its siblings within the same row + // $ (obj), col (obj): cheerio, the target column // Returns: // HTML (string): Mark up for columns all contained in a row - makeCols: function($, col, siblings) { - var output = '', - columns = [col, siblings], - colCount = col.length + siblings.length; - - $(columns).each(function(i, el) { - var wrapperHTML = ''; - var colSize = ''; - var col = $(el) - var inner = $(el).html(); - - var colClass = ''; - if ($(col).attr('class')) { - colClass = $(col).attr('class'); - } + makeCols: function($, col) { + var output = '', + wrapperHTML = '', + colSize = '', + colClass = '', + inner = $(col).html(); - wrapperHTML = ''; - if (i === colCount - 1) { - wrapperHTML = ''; - } - // check for sizes - if ($(col).attr('small')) { - colSize += 'small' + '-' + $(col).attr('small') + ' '; - } - if ($(col).attr('large')) { - colSize += 'large' + '-' + $(col).attr('large') + ' '; - } + if ($(col).attr('class')) { + colClass = $(col).attr('class'); + } - wrapperHTML += ''; + // if it is the last column, add the class last + if (!$(col).next()[0]) { + output = ''; - } - else { - wrapperHTML += inner; - } + } else { + output = '

'; - // subcolumns do not need an extra td - if ($(col).children()[0] && $(col).children()[0].name !== 'subcolumns') { - wrapperHTML += '

' + inner + '

'; + } - wrapperHTML += '

'; + // check for sizes + if ($(col).attr('small')) { + colSize += 'small' + '-' + $(col).attr('small') + ' '; + } + if ($(col).attr('large')) { + colSize += 'large' + '-' + $(col).attr('large') + ' '; + } - $(col).replaceWith(wrapperHTML); - }); + output += ''; + + // subcolumns do not need an extra td + // otherwise, place stuff inside columns in a td + if ($(col).children()[0] && $(col).children()[0].name !== 'subcolumns') { + output += ''; + } + else { + output += inner; + } + + output += '

' + inner + '

'; + + return output; } }; diff --git a/spec/inky.js b/spec/inky.js index 2ec3b509..7212b40c 100644 --- a/spec/inky.js +++ b/spec/inky.js @@ -5,7 +5,7 @@ var inky = require('../node_modules/gulp-zurb-foundation-email/node_modules/gulp describe("inky", function () { it("should be targetting custom tags", function () { - expect(inky.getTags()).toEqual([ 'panel', 'row', 'container', 'columns', 'button', 'subcolumns' ]); + expect(inky.getTags()).toEqual([ 'callout', 'row', 'container', 'columns', 'button', 'subcolumns' ]); }); });

Build Email Buttons That Work

1. Download Ink.

2. Create a containing table.

3. Create a link.

4. Create another table.

5. Apply different styles.

Sizes

Colors

Other

Keep sharpening your skills online in our Responsive Email Design course

About the author

Sharing is caring

Brought to you by ZURB

Punchy Headline Here

thanks for the support

Hereâs something awesome

Hereâs something awesome

Hereâs something awesome

Sharing is caring

Brought to you by ZURB

Hereâs something awesome

Hereâs something awesome

Hereâs something awesome