foundation / inky Goto Github PK
View Code? Open in Web Editor NEWConvert a simple HTML syntax into tables compatible with Foundation for Emails.
Home Page: http://foundation.zurb.com/emails
Convert a simple HTML syntax into tables compatible with Foundation for Emails.
Home Page: http://foundation.zurb.com/emails
I seem to be having a repeat issue in the Yahoo Mail App (not desktop), I have a couple ideas for fixing but they're quite hacky and in a round-a-bout way.
Padding on the .column and .columns breaks the layout in iOS Yahoo Mail app.
(I've made my own gulp modifications to code in PUG - this does not affect the outputted code, just personal preference)
doctype transitional
html(xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en")
head
link(rel="stylesheet" type="text/css" href="css/app.css")
<!-- <style> -->
meta(http-equiv="Content-Type" content="text/html; charset=utf-8")
meta(name="viewport" content="width=device-width")
title.
Lorem ipsum dolor sit amet
body
span.preheader.
Lorem ipsum dolor sit amet
table.body
tr
td.center(align="center" valign="top")
center.
container
row.bg-black
//- Body Content
columns(small="12" large="12").collapse
spacer(size="30")
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at justo nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum porta, velit eget egestas malesuada, est metus ultrices dolor, eget pellentesque magna purus at purus.
spacer(size="20")
What has seemed to have fixed this issue is removing all left and right padding and then re-adding it in an added nested non-inky table cell - which seems a bit redundant especially when it's only for this particular email client.
# Same as above but replace body content with:
//- Body Content
columns(small="12" large="12").collapse
table
tr
td.yahoo-content-padding
spacer(size="20")
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at justo nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum porta, velit eget egestas malesuada, est metus ultrices dolor, eget pellentesque magna purus at purus.
spacer(size="20")
//
// Hacky yahoo mail responsive hack
// NOTE: Use with testing
// ------------------------------ //
@media yahoo {
td.large-12.last, th.large-12.last,
td.large-12.first, th.large-12.first,
table.body .column, table.body .columns {
padding-left: 0 !important;
padding-right: 0 !important;
}
// Re-apply the padding to a nested non-inky element: table > tr > td
.yahoo-content-padding {
padding-left: $global-gutter !important;
padding-right: $global-gutter !important;
}
}
I'll hand it back to the community think tank to see what the appropriate solution is.
Ideally it would be good if the Inky template handled this in a sophisticated way, whether that's injecting more code for yahoo or if my hacky scss can be somehow can be integrated in.
The above examples are just ways in which I've been able to get across the line but I would love to see a more permanent solution for all!
Is there an easy way to add custom tag or attribute without editing Inky's core file ?
How useful is an Inky component for placeholder images?
Like <image height="300" width="600" alt="placeholder"></image>
Output: <img src="http://placehold.it/600x300" alt="placeholder">
<hr />
Becomes
<hr>
Hello. Thanks for inky.
What about possibility modify button tag like this gist:
https://gist.github.com/elidickinson/9424116#file-html_email_buttons_1-html
or like this guide:
https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design
Speaks for itself I think
In the examples and other documentation (e.g. the grid), the main wrapper seems to be missing:
<table class="body">
<tbody>
<tr>
<td class="center" align="center" valign="top">
<table class="container">
<tbody>
<tr>
<td>
Is this something we should be hard-coding around our Inky templating code, or is there a component that handles this?
It would be nice to be able to specify an attribute such as "valign" on a element. Some e-mail clients do not respect "vertical-align: top" rule in CSS (Outlook 2007, 2010, 2013) and as a result content of a column can end up floating in the middle of the column if another column contains more content.
Would this be something you would like someone to take a stab at?
I am using Jinja2 template language for final html rendering.
Everything works fine until i need to use strings as function arguments.
Inky escapes/converts them causing Jinja2 error:
<img src="{{ user.get_image('xs') }}">
Result:
<img src="{{ user.image_url('xs') }}">
Which causes:
TemplateSyntaxError at ... ("unexpected char u'&' at 14467",)
Any workaround or way to stop escaping single quotes?
Thank you.
I'be been using Inky through gulp and it doesn't render like the readme states. For instance passing.
<row>
<columns large="6"></columns>
<columns large="6"></columns>
</row>
produces this HTML
<table class="row">
<tbody>
<tr>
<th class="small-12 large-6 columns first">
<table>
<tbody>
<tr>
<th>
</th>
</tr>
</tbody>
</table>
</th>
<th class="small-12 large-6 columns last">
<table>
<tbody>
<tr>
<th>
</th>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
Which differ from the README which also renders "expanders". I'm trying to create the following grid;
<row>
<columns small="12" large="8" class="large-offset-2"></columns>
</row>
But since expander doesn't render, it will in fact take up 10 columns. I've solved it by adding an emtpy <columns small="12" large="2"></columns>
but I'm not sure if that is the intended way of doing a narrower part of the email?
I'm using inky v.1.3.7
This would be a hot feature:
Add a <code>
component tag to Inky that changes <
to <
and adds syntax highlighting.
Does anyone know of a library that can handle the syntax highlighting? Or how would the character conversion happen?
How can we reproduce this bug?
If you write an apostrophe :
<p>Merci de m'appeler</p>
What did you expect to happen?
<p>Merci de m'appeler</p>
What happened instead?
<p>Merci de m'appeler</p>
Probably due to cheerio
What email clients does this happen in?
All
Visible in Outlook
Merci de m'appeler
The character  
present in <spacer>
's source is being rendered as a visible space on Apple Mail's preview but not on the actual message (tested on 9 and 10). Switching it to a regular
seems to sort the issue. Any reason not to use
instead?
The layout source code (full message dist code here):
<body>
<!-- <style> -->
<table class="body">
<tr>
<td class="center" align="center" valign="top">
<center>
<spacer size="10"></spacer> <!-- ===== THE CULPRIT, RIGHT BEFORE THE MESSAGE'S BODY ===== -->
{{> body}}
</center>
</td>
</tr>
...
</table>
...
</body>
Hello,
Since emails are written in XHTML 1.0 Strict, self closing tags should have a slash at the end of the name.
ie: <br>
should be <br />
When I compile a file with Inky, the result is written in html5 style (<br>
)
If you agree, I can make a pull request that solves this issue.
Thank you.
The HTML output of columns
doesn't contain tbody
(table > *tbody* > tr > td
).
Use the following inky
code and export it to dist
.
<wrapper class="header">
<container>
<row class="collapse">
<columns small="6">
<img src="http://placehold.it/200x50/663399">
</columns>
<columns small="6">
<p class="text-right">BASIC</p>
</columns>
</row>
</container>
</wrapper>
npm run build
The following output is generated (beautified).
inky
: 1.3.5
foundation-email
: 2.1.0
...
<!-- TEMPLATE: BODY -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="body" style="Margin:0;background:#fcfae7;border-collapse:collapse;border-spacing:0;color:#505050;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;height:100%;line-height:19px;margin:0;padding:0;text-align:left;vertical-align:top;width:100%">
<tr style="padding:0;text-align:left;vertical-align:top">
<td class="center" align="center" valign="top" style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#505050;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;hyphens:auto;line-height:19px;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word">
<table class="wrapper header" align="center" style="background:#fcfae7;border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">
<tr style="padding:0;text-align:left;vertical-align:top">
<td class="wrapper-inner" style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#505050;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;hyphens:auto;line-height:19px;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word">
<table class="container" style="Margin:0 auto;background:#fcfae7;border-collapse:collapse;border-spacing:0;margin:20px auto;padding:0;text-align:inherit;vertical-align:top;width:580px">
<tbody>
<tr style="padding:0;text-align:left;vertical-align:top">
<td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#505050;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;hyphens:auto;line-height:19px;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word">
<table class="row collapse" style="border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%">
<tbody>
<tr style="padding:0;text-align:left;vertical-align:top">
<th class="small-6 large-6 columns first" style="Margin:0 auto;color:#505050;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;padding:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;width:298px">
<table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">
<tr style="padding:0;text-align:left;vertical-align:top">
<th style="Margin:0;color:#505050;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left"><img src="http://placehold.it/200x50/663399" style="-ms-interpolation-mode:bicubic;clear:both;display:block;max-width:100%;outline:0;text-decoration:none;width:auto"></th>
</tr>
</table>
</th>
<th class="small-6 large-6 columns last" style="Margin:0 auto;color:#505050;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;padding:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;width:298px">
<table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">
<tr style="padding:0;text-align:left;vertical-align:top">
<th style="Margin:0;color:#505050;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left">
<p class="text-right" style="Margin:0;Margin-bottom:10px;color:#505050;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;margin-bottom:10px;padding:0;text-align:right">BASIC</p>
</th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- prevent Gmail on iOS font size manipulation -->
<div style="display:none;white-space:nowrap;font:15px courier;line-height:0">                                                           </div>
<!-- /TEMPLATE: BODY -->
...
Is possible use Inky in browser ?
Hi guys, first of all thank you for making HTML templating so much easier. Here's a problem I encountered in my development tho.
When I write conditional tags for mso, Inky is not rendering the elements inside the tags. Is there any way to counter this?
Here's a code example:
<!--[if mso]> <center> <button href="http://pixelmatters.com" target="_blank">\{{ button.verify }}</button> </center> <![endif]-->
Here's a screenshot of the result:
https://cl.ly/243O2q1M3u0w
Thanks in advance.
Why:
Hubspot/Marketo use ID tags to differentiate sections and it doesn't make much sense to use Foundation for Emails/Inky if I'm going to need to inject a bunch of ID tags after running the build process sadly.
Expected Functionality:
Thought my ID tags would be placed the same way classes are placed.
Actual Functionality:
ID tags appear to just be dropped from HTML when Inky is rendered in both watch/build tasks.
Solution:
My best guess based on what I saw in the code for Inky is that this could be added to componentFactory.js to handle it on container, row, columns and any other components.
At the moment you can only have a defined padding, etc as per the settings in inky. It would be nice if internally it would merge some of the styles so you can override them for a certain callout.
I'm sure this would apply to most other components as well.
<callout>
$callout-padding defines this to be 20px
</callout>
Would be nice:
<callout style="padding: 30px;">
$callout-padding is essentially replaced with custom 30px.
</callout>
According to the SCSS, the callout cell should be a TH
, but inky outputs a TD
(as per the tests). Thus, coloring classes are not coloring anything.
<button class="expand" href="http://zurb.com">Button</button>
This is causing
<table class="button expand">
<tr>
<td>
<table>
<tr>
<td>
<center>
<a href="http://zurb.com">
<a href="http://zurb.com">Button</a>
</a>
</center>
</td>
</tr>
</table>
</td>
</tr>
</table>
Looking through the source code, I see how buttons are converted to anchor tags in componentFactory.js. Yet, there is no way to set target="_blank". I think this could be an easy addition and for my purposes, useful. Basically, if I wanted to take my email and host it on my website as a sort of archive, it would be beneficial to have certain links open in a new tab.
Something simple, like this starting at line 29 under case this.components.button
:
var target = '';
if (element.attr('target')) {
target = ' target="' + element.attr('target') + '"';
}
// If we have the href attribute we can create an anchor for the inner of the button;
if (element.attr('href')) {
inner = format('<a href="%s"%s>%s</a>', element.attr('href'), target, inner);
}
I saw somewhere in the foundation-emails roadmap that there's the idea of using the Bulletproof Email pattern for rounded buttons. Has anyone tried this? I'd be happy to take a stab at it, but I'd like know if anyone has worked on it before. Also, it seems like the only way to pull this off is define the style elements as attributes in the tag so it makes it into the VML markup.
I've found adding the html attribute align="center" to tables essential for rendering center aligned elements in outlook 2013 and 2016 in certain circumstances. I am currently adding the attribute manually after rendering my completed code to the dist folder. Would others see a benefit in having an option for defining this attribute within the precompiled templates? or does this exist? Other useful attributes for tables include cellpadding="0" and cellspacing="0" although I haven't seen a need for these so far as outlook rendering.
Hi,
When I try the example in the readme
var Inky = require('inky').Inky;
var cheerio = require('cheerio');
var options = {};
var input = '<row></row>';
// The same plugin settings are passed in the constructor
var i = new Inky(options);
var html = cheerio.load(input)
// Now unleash the fury
var convertedHtml = i.releaseTheKraken(html);
// The return value is a Cheerio object. Get the string value with .html()
convertedHtml.html();
I get
convertedHtml.html();
^
TypeError: convertedHtml.html is not a function
It seems that i.releaseTheKraken(html); returns a string with both the inky src and the converted html src.
Is there a way of just getting the converted html?
thanks,
niall
I'm looking at integrating inky into my development process, and following the directions for using it programmatically, I don't see a need for pulling in vinyl and vinyl-fs (which has many transitive dependencies).
Is it possible to make those into peer dependencies (especially if you are using gulp) or provide a separate core package that only has the transformation piece as a package?
Would it be possible to have a standalone build of inky, similar to https://github.com/Daniel15/babel-standalone ?
I'd like to create a rails plugin to use inky within the asset pipeline.
I might be able to implement this myself if someone could outline where to start and/or generally how to accomplish it.
After compiling ink to html , the css remain inside < style > tag.
Should not be as inline css?
I was surprised to realise that embedding html5 video in an email with an image fallback is totally doable.
However there seem to be certain caveats to keep in mind: https://www.emailonacid.com/blog/article/email-development/a_how_to_guide_to_embedding_html5_video_in_email
It would be nice if I could just drop in a video tag and have inky deal with the fallback hacks.
I'd expect columns to still have an offset when setting row class='collapse'. Right now that's not happening though. Is this an intended behavior? I consider it a bug.
When using text-center on a I'd expect it to center the text on the button. Text doesn't center in a button when the text wraps into two lines (on a smaller device for example).
Is there a reason why grunt isn't supported?
This repository is missing a license - I assume it's MIT like zurb/foundation-emails, but without a LICENSE file I can't confirm that for use in my projects. Could one be added?
I've read the work being done on this issue, but I am using Foundation v2.2.1 and it is not fixed. Here's an example:
In my layout file I have the following code:
<a href="{{email.url}}{{email.urlsuffix}}{{womens}}</a>
These refer to the following front matter in the page:
---
url: "https://myurl.com"
urlsuffix: "/sfc3/index.cfm?changeWebsite=US_en"
womens: "&route=c_store.browseProductsByCategory&CategoryId=c4"
---
Foundation parses it like this:
<a href="https://myurl.com/sfc3/index.cfm?changeWebsite=US_en&route=c_store.browseProductsByCategory&CategoryId=c4</a>
That doesn't work for most email clients, and I can't manually find/replace all the instances by hand.
Could someone please help me with this issue? It's a real show-stopper for the project I'm working on, and I'm not getting anywhere with the existing solutions out there.
The API requires multiple steps right now to use, but this could easily be one.
Right now:
var Inky = require('inky');
var Cheerio = require('cheerio');
var inky = new Inky();
var $ = Cheerio.load('<column>Here is a column</column>');
inky.releaseTheKraken($);
Proposal:
var inky = require('inky');
var output = inky('<column>Here is a column</column>');
Have the primary export be a function that makes a new Inky()
, loads syntax into Cheerio, runs the parser, and returns the output as a string. The Inky
class can be another export.
Note: I'm using the most recent Zurb Stack for this project.
I've got a master template for an email which utilizes in-page variables that are initialized within the page's front matter in accordance with the Panini docs.
The issue is occurring in the "Class Topics" section of this email template.
All the variable data is being inserted from the front matter correctly; however, I've noticed that one of them consistently doesn't get its font correctly defined according to my scss. This seems to only occur on iOS devices. Other clients are not affected.
Litmus results (Note the device names at the top of each image.)
The results on the iOS devices display one of the items in the $body-font-family
font instead of the family I have declared in app.scss.
Similar results occur when I was using Panini's <#each item>
method to insert the variables.
Below are is my Inky markup and scss. I've individually declared the font's for classes to make sure this wasn't a scss compilation issue.
// index.html
---
classdate: September 13-15, 2016
classtitle: removed
classlocation: Seattle, WA
classtimes: 8am - 5pm
classurl: removed
instructors: removed
instructorcompany: removed
classjustification: If you crave an intense dose of insider LDAR knowledge from various industry perspectives, this session is for you. LDAR for Experts is for the seasoned LDAR coordinator seeking advanced LDAR training. Other professionals who might attend include environmental advisors, maintenance supervisors with continuing LDAR responsibilities, contractor site supervisors, and program managers.
benefit1: Firsthand insight on LDAR regulations, enforcement initiatives, and sticky issues from various industry perspectives
benefit2: Cutting edge best management practices for your LDAR program and audits
benefit3: Techniques for implementing robust leak detection programs
benefit4: An understanding of the newest LDAR developments, including AWP, GHG impacts on LDAR, and the high-flow sampler
benefit5: The know-how to optimize and manage a sustainable LDAR compliance program
instructorinfo: has more than 23 years experience in the environmental field focused on air quality compliance in the refining, petrochemical, and natural gas processing industries. His core experience in the implementation and operation of fugitive emission source Leak Detection and Repair (LDAR) programs. In 22 years as an LDAR contractor he has held the following positions relating to LDAR; Monitoring Technician, Lead Technician, Inventory Technician, Environmental Monitoring Site Supervisor, Local Project Manager, Regional Project Manager, Regulatory Compliance and Quality Control Manager and the executive title Director of Quality Control and Training.
---
<wrapper class="headlineRow">
<center>
<container>
<row class="headlineRow">
<columns small="12" large="12">
<spacer size="30"></spacer>
<h6 class="dateLocationText text-center">
{{ classdate }}
</h6>
<h1 class="classTitle text-center">
<a href="{{ classurl }}">
{{ classtitle }}
</a>
</h1>
<h6 class="dateLocationText text-center">
{{ classlocation }} / <font color="#000000">{{ classtimes }}</font>
</h6>
</columns>
</row>
<row class="headlineRow">
<columns small="12" large="12">
<h6 class="headlineInstructorText text-center">
Instructors: {{ instructors }}
<br>
{{ instructorcompany }}
</h6>
</columns>
</row>
<row class="headlineRow">
<columns small="12" large="12">
{{>cta}}
</columns>
</row>
</container>
</center>
</wrapper>
<container>
<row class="bodyRow">
<columns small="12" large="12">
<spacer size="30"></spacer>
<h5 class="bodyJustification text-center">
{{ classjustification }}
</h5>
<spacer size="10"></spacer>
</columns>
</row>
<row class="bodyRow">
<columns small="12" large="12">
<h6 class="benefitsHeadingText">
Class Topics:
</h6>
</columns>
</row>
<row class="bodyRow">
<columns small="12" large="12">
<center>
<h6 class="benefits text-center">
{{ benefit1 }}
</h6>
<h6 class="benefits text-center">
{{ benefit2 }}
</h6>
<h6 class="benefits text-center">
{{ benefit3 }}
</h6>
<h6 class="benefits text-center">
{{ benefit4 }}
</h6>
<h6 class="benefits text-center">
{{ benefit5 }}
</h6>
</center>
</columns>
</row>
<row class="bodyRow">
<columns small="12" large="12">
<spacer size="10"></spacer>
<h4 class="instructorHeading text-center">
Learn from the BEST
</h4>
<h6 class="instructorBio text-center">
{{ instructorinfo }}
</h6>
</columns>
</row>
<row class="bodyRow">
<columns small="12" large="12">
{{>cta}}
</columns>
</row>
</container>
// app.scss
@import 'settings';
@import 'foundation-emails';
$hse-yellow: #FFE72D;
$hse-orange: #F26350;
$hse-footer-text: #bfad22;
// Header
.headerRow {
background-color: $black;
.headerInner {
background-color: $black;
}
.brandTextLink {
color: $hse-yellow;
font-weight: 100;
text-decoration: underline;
}
}
// Headline Section
.headlineRow {
background-color: $hse-yellow;
.dateLocationText {
font-family: Georgia, Times, "Times New Roman", serif;
color: $black;
font-weight: bold;
font-style: italic;
}
.classTitle {
color: $hse-orange;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
text-transform: uppercase;
a {
color: $hse-orange;
text-decoration: underline;
}
}
.headlineInstructorText {
color: $hse-orange;
font-family: Georgia, Times, "Times New Roman", serif;
font-style: italic;
}
}
// Body
.bodyRow {
background-color: $white;
.bodyJustification {
color: $hse-orange;
font-family: Georgia, Times, "Times New Roman", serif;
}
.benefitsHeadingText {
color: $black;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
text-transform: uppercase;
text-align: center;
}
.benefits {
color: $dark-gray;
font-family: Georgia, Times, "Times New Roman", serif;
text-align: center;
}
.instructorHeading {
color: $hse-orange;
font-family: Georgia, Times, "Times New Roman", serif;
font-style: italic;
margin-bottom: 0;
}
.instructorBio {
color: $dark-gray;
font-weight: 100;
font-family: Georgia, Times, "Times New Roman", serif;
}
}
// Footer
.footerRow {
background-color: $hse-yellow;
.footerText {
color: $hse-footer-text;
font-size: .7em;
a {
color: $hse-footer-text;
text-decoration: underline;
}
}
}
Apologies for the non-abbreviated code, but I want to make sure this issue isn't being caused by something else in the markup.
Hi,
Inky automatically generates an expander class. This causes some problems when I try to show an image in a table cell.
<row> <columns small="5" large="5"> <p>some text</p> </columns> <columns small="5" large="5"> <img src="http://link-to-image.png" width="218" height="40" > </columns> </row> <row> <columns small="10" large="10"> <img src="http://link-to-image.jpg" > </columns> </row>
Both images cover only half width of the table cell instead of the full width. This happens in multiple clients.
After running the inline css, I manually deleted every expander cell. When I checked in Litmus, all the clients showed the correct result.
I am not sure why this expander cell is added? Is there a way to prevent inky from creating the expander class? Or is there a workaround?
thx!
The Gulpfile we use in the Foundation for Emails template is a bit complicated. Maybe we can take some of those pieces and write functions that get bundled alongside the parser?
Hello there! :)
Firstly, I want to thank you for your awesome work with this template language! It saved me alot of time and brain!
After that I want to introduce you a Grunt plugin I published recently to be able to easily use Inky via Grunt.js and wanted to ask you, if you want to mention it in your README.md so Grunt users see it easily.
The Grunt plugin can be found here: https://www.npmjs.com/package/grunt-inky
I don't want to advertise my own plugin, I am just asking because I saw a "gulp way" of using Inky and saw the need for a "Grunt way" for those Grunt users out there. I can fully understand if you don't want to mention it on your README. I will be fine with that.
Greetings,
Miw0
Not a big deal but I just wanted to bring this to your attention that when I downloaded and used inky "npm run" did not work because it said babel-register module required so then I just installed it via NPM and it worked fine. Would be a good idea to have that already included.
Right now, releaseTheKraken()
replaces "
with "
(and other entties as well).
Issue 1: componentFactory
should use elem.html()
instead of $.html(elem)
Issue 2: it should be possible to pass cherio options to the inky()
function --> already done on master
How disallow encode Cyrillic characters ?
Example
<a href="#" class="header-menu__item">Мужчинам</a>
Must be
<a href="#" class="header-menu__item">Мужчинам</a>
The roadmap for this project includes adding a NuGet package.
I am after some clarification of what this means.
There are 2 possible ways I can see to use inky in a Visual Studio/.NET project:
I cannot see how a nuget package would help, but might have missed something. Let me know if you would like me to create a tutorial with some screenshots for point 1, and if so, where you would like such a tutorial.
Add docs for how attributes can be passes in - especially valign
Not an issue, more of a tip for building emails in Atom.
https://gist.github.com/rickysullivan/e3d03986bcc52cfa1337c7804eb62486
Let me know your thoughts.
I use foundation-emails / inky to generate email templates. These templates have {{tags}} inside and are filled with mustache data before sending it.
In inky template I have this line:
<button href="{{buttonUrl}}">{{buttonText}}</button>
but compiling with inky completely drop my {{tags}}:
<table class="button text-center"><tr><td><table><tr><td></td></tr></table></td></tr></table>
desidered result:
<table class="button text-center"><tr><td><table><tr><td><a href="{{buttonUrl}}">{{buttonText}}</a></td></tr></table></td></tr></table>
Best regards,
Luca
When i use code like in example:
http://foundation.zurb.com/emails/docs/menu.html#basics
<menu>
<item href="http://zurb.com">Item</item>
<item href="http://zurb.com">Item</item>
<item href="http://zurb.com">Item</item>
</menu>
.float-center class is still added to tr, like here:
<tr class="menu-item float-center">
<a href="http://zurb.com">Item</a>
</tr>
How prevent that?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.