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.