foundation / inky

Convert a simple HTML syntax into tables compatible with Foundation for Emails.
http://foundation.zurb.com/emails
676 stars 108 forks source link

expander not used/needed? #74

Open ullmark opened 7 years ago

ullmark commented 7 years ago

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

mister-spock commented 7 years ago

Same here. I tried using Inky via CLI and Gulp, both variants produce markup without the expanders. Plus, "Foundation for Emails 2" docs state that this element "helps the column expand to be full-width on small screens", so it kinda essential here.

FridaNyvall commented 7 years ago

Ran into similar problems as the above. Quick fix: add the following script to the html file that contains inky markup. When viewing the file in a browser, the script has translated inky to working normal html. That markup can then be copied from the browser web inspector and used in a second file for inlining etc.

https://foundation.zurb.com/emails/docs/assets/js/inky-browser.js

liayn commented 6 years ago

The expanders returned, when I adjusted my inky configuration to

.pipe(inky({
    cheerio: {
        xmlMode: true
    }
}))
darylknight commented 4 years ago

I'm having this issue too - it looks like trying to use Inky doesn't add the expanders, which means large="6" is full width on both breakpoints. Changing the config as above just makes all the markup completely disappear.