Is it possible to add custom tag / attribute ?

[woraperth]

Is there an easy way to add custom tag or attribute without editing Inky's core file ?

[rafibomb]

What did you have in mind outside editing the Inky JS files? What kind of tag/component were you looking to add?

You can add it here: https://github.com/zurb/inky/blob/master/lib/inky.js#L14
Then copy a component, like https://github.com/zurb/inky/blob/master/lib/componentFactory.js#L107 and change the naming and output structure as needed.

[arthurpf]

But editing in inky.js I still need to edit the core file. There is way to do it correctly? If components are updated, changes will be removed.

[rafibomb]

Hmm, I would like to know more about what you have in mind. We started a post on the topic of extending Inky. Can you expand on this here: http://foundation.zurb.com/forum/posts/39717-architecting-the-future-of-foundation-for-emails

[arthurpf]

Well, i'll post there, but i don't know if my idea is good to put on original zurb.

In my projects i've using row2 and columns2

what it does?

-row2
<row2 margin="10 5 15"></row2>

output
`

[columns2 here]

`

-columns2
<columns2></columns2>

output
<td class="columns2">My content</td>

What's the difference?
I've studied zurb and checked some problems with padding. So I made these tags, that uses TDs for this purpose, which is compatible with more clients.
I still use the original zurb tags and responsive classes together

[lukeed]

👍 Looking for this as well.

With the "Foundation Emails 2" platform, I'd like to quickly create custom reusable elements within my emails. For example, looking at the Material Design library:

<card>
  <p>This is a material-design card element.</p>
  <p>Maybe it can also take a 'small' and 'large' attribute?
</card>

<button color="blue" icon="add">
  Custom Button Markup
</button>
<!--
  <button class="md-button md-button__blue">
    <i class="icon icon__add"></i>
    <span>Custom Button Markup</span>
  </button>
-->

[kareljan]

Is it possible to copy stuff like title to the element?

<menu>
  <item href="link" title="E-shop" target="_blank">E-shop</item>
</menu>

gives me with the latest version

<table align="center" class="menu float-center"><tr><td><table><tr>
  <th title="E-shop" target="_blank" class="menu-item float-center"><a href="link">E-shop</a></th>
</tr></table></td></tr></table>

You would expect the title and target attribute on the a-tag rather than on the th-tag.
And the same with buttons. When I add a target and title attribute to a button, the a-tag it compiles to gets the target (this is good), but the title attribute disappears.

How can we fix this?

Thanks

[rafibomb]

@kareljan Yes, thanks to @ClementParis016 and his PR #54 You can now do this. It will ship with 2.2 at the end of the month.

[rafibomb]

@lukeed Hmm, The goal is to get Inky to a place where you can create your own plugins. There is an proposal like that here you can chime in on: #30

In terms of using Inky with Foundation for Emails, the goal is to keep the classes and use CSS or SCSS to create the styles so that the Framework can be used a base to extend upon.

There is a place for attributes perhaps in custom components or variation. Case in point would be Bulletproof buttons. You could pass in a data attribute like <button bulletproof href="#">Button</button> and output the custom component. The tricky part is to make sure we're using the styles in Foundation for Emails to keep projects consistent and those are class based.

[DotCoyote]

It would be great if custom-attributes wouldn't be erased. :)
I'm preparing a mailchimp-Template and would like to put the Mailchimp Attributes like mc:edit="body" directly into my template, so I don't have to put them back manually when I change the source-files.

[DotCoyote]

Nevermind, it's lready possible on simple div's ;)

[scniro]

+1

[rafibomb]

It would help to know what components you are using attributes on that don't get passed over into HTML. From there we can resolve those.

[ClementParis016]

Looking at lib/componentFactory.js it appears that only a few components transfer all html attributes to their output, while most of them only pass CSS classes.

I am not sure if passing all attributes to all components would raise problems, but if it doesn't then it shouldn't be difficult to allow it.

[thorlarholm]

An example of needing custom attributes would be editable button links for use in Mailchimp templates.

https://templates.mailchimp.com/getting-started/template-language/

The ZIP output from Zurb Foundation can be used directly in Mailchimp as custom templates, with editable content areas and editable elements.

A link must contain this custom attribute for it to be editable from the Mailchimp UI.

<a href="#" mc:edit="body_link">Edit me</a>

However, The following does not pass the custom attribute unto the inner link.

<button href="#" mc:edit="body_link">Edit me</a>

[richardsengers]

The same goes for Sparkpost. For example an unsubscribe link needs a custom attribute
data-msys-unsubscribe="1"
This is not possible in the current Zurb template with

 <menu>
      <item data-msys-unsubscribe="1" href="https://.../unsubscribed">Unsubscribe</item>
    </menu>

The custom attribute will be placed on the parent th element, which in this case is not correct