foundation / foundation-emails Goto Github PK

View Code? Open in Web Editor NEW

7.8K 7.8K 1.1K 8.66 MB

Quickly create responsive HTML emails that work on any device and client. Even Outlook.

Home Page: https://get.foundation/emails/docs/

License: MIT License

JavaScript 6.08% HTML 60.73% Ruby 1.61% Shell 0.06% SCSS 31.52%

foundation-emails's People

Contributors

Stargazers

Watchers

Forkers

briandoll hornets andrewgjohnson-forks montazze gotchacode unr xtao tylermichel cyndibaby905 mikehotel bahar lozandier mbijon wizioo aurelievndl cdoru bbisogniconsultinternet nfaycel onasusweb bradparks mackdoyle nialldj lidoma davgit quark-bar masteric zurc nvdnkpr pkn raicerk larz0 geekybeaver vieillecam pradipk1978 x-jim konstjar mshanken davepoon dhigginbotham auracms thetrickster frankistan sandrosilva nhulac kanasite agtlucas maheshbabu yanivos harelgoldstein pieplu louiewiget claudionorbarros axiomzen shaan360 erniemac toddsantoro sergioymolina githubber duvilliera vigarny mingxx vs0uz4 lucozhao devluis jz3lada samuelearle sadiqmmm prakaashkpk andrewabbott gtg462w feast-dg craften sethkimmel3 glensc jackton freshcut kevikoech tyidnet nickdenardis tsoulgain jackoverflow miamarti ivanx64 michaelwheeler julianbach lymanlai priestd09 crauserkar bertothunder nongio-zz msoftware andrewh-digitalbridge albertotrece michaeldoye kublaj msuchodolski i-am-steve-oh lokidg tommygooden ciruz

foundation-emails's Issues

Replacement for p tag?

Outlook.com seems to append some extra padding or margins to paragraphs.
Couldn't another tag be used to replace p and avoid these added "benefits" in order to maintain more consistent vertical spacing?

Provide inliner API or library

We are running into encoding issues with the inliner, specifically that it does not preserve the encoding of – — © etc... Premailer has a whole lot of open encoding issues in their repo, so I don't think they will be addressing this anytime soon.

If Ink's inliner were provided in a way that could be utlized programatically, we could fix some of these issues with another processing step.

Do you have any plans to provide the inliner as an open source library or via an API connection? I tried posting directly to your skate-proxy.php processing script, but there are cross-domain access control restrictions that prevent this approach.

Alternately, if you have any recommendations for fixing these encoding issues without inliner access, please share. Thanks!

Sidebar template not rendering properly in Outlook 2003, 2007, 2010, 2011

Tested in Litmus and attached 4 screenshots to this issue.

Thunderbird Image max-width Issue

I am having issues with the width of an email in Thunderbird 24. It appears to be ignoring the max-width value for the image and extending the overall width of the container. I believe it could have something to do with text-pad but I also get a slight white-space to the right of a similar graphic not contained within a text-pad class.

    <body>
        <table class="body">
            <tr>
                <td>

                    <table class="container">
                        <tr>
                            <td>
                                <table class="row">
                                    <tr>
                                        <td class="wrapper last">
                                            <table class="twelve columns">
                                                <tr>
                                                    <td class="text-pad">
                                                        <h3>Some headline goes in here</h3>
                                                        <img src="/path/to/image/580x300.gif" alt="image is here">
                                                    </td>
                                                    <td class="expander"></td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </body>

Small screens lose centering

I'm designing a simple mail with a stacked layout.
When width > 600px it is displayed properly, everything centered, but when going below 600px the centering is lost due the tables ignoring the 100% width and everything is aligned to left.

Note this is tested in the plain browser.

http://putsmail.com/tests/9eb672247d67f002a4cb095684a13e

Text and img align right

Hello, I'm looking for a way to align text and images to right. I wonder to use the float: right property, but I don't know if this property will affect to the rock solid boilerplate.

Has anyone figured out how to do this?

Thank you!

Firefox responsive images

Images are not responsive in firefox (possibly in thunderbird too).

Inliner Issue: Replaces non-breaking space— —with some weird special character

See twitter convo with @inkzurb https://twitter.com/kevinkirchner/status/429261503133265920

Support for Lotus Notes?

Many companies (including my employer) use Lotus Notes as their desktop email client, which had bad support for HTML email.

Have you done any testing in Lotus Notes, or have plans to support it?

Inliner for local development?

Would be great to have a way to run the in-liner locally for integration with Grunt or other systems to automate the newsletter build a bit.

Zurb Ink - Image

Hi,

I would like to include Zurb Ink as one of the projects which is using Assemble. This would be probably displayed on new version of http://assemble.io/.

If you agree, please provide me an image for Zurb Ink project.

Thank you.

Non-Collapsing Sub-Grid Columns

Is there a reason that there wasn't the CSS included for the Non-Collapsing Sub-Grid Columns within the download? I kept getting the columns 100% width overriding my columns. However it is shown in the documentation (http://zurb.com/ink/docs.php). After digging a little bit through the code I found the CSS that was missing to make those function properly. After inserting it things seem to work fine. Just curious.

.body .columns td.one,
.body .column td.one, { width: 8.333333% !important; }
.body .columns td.two,
.body .column td.two { width: 16.666666% !important; }
.body .columns td.three,
.body .column td.three { width: 25% !important; }
.body .columns td.four,
.body .column td.four { width: 33.333333% !important; }
.body .columns td.five,
.body .column td.five { width: 41.666666% !important; }
.body .columns td.six,
.body .column td.six { width: 50% !important; }
.body .columns td.seven,
.body .column td.seven { width: 58.333333% !important; }
.body .columns td.eight,
.body .column td.eight { width: 66.666666% !important; }
.body .columns td.nine,
.body .column td.nine { width: 75% !important; }
.body .columns td.ten,
.body .column td.ten { width: 83.333333% !important; }
.body .columns td.eleven,
.body .column td.eleven { width: 91.666666% !important; }
.body .columns td.twelve,
.body .column td.twelve { width: 100% !important; }

Centered fullwidth images and panels breaking on small screens

I have a twelve column image and panel centered in the middle of the email.

On a screen larger than 600px, it works fine. However, when we move to a smaller screen, we lose the 100% width and centering.

Large screen:

Small screen:

Code available here: http://putsmail.com/tests/0cbe50b433339d1a927f954ecfe3ce

Offset Columns documentation missing

http://zurb.com/ink/docs.php#offsets

Image distortion in logo on "sidebar-hero" template

Hi, I've been trying out the sidebar-hero template supplied with ink and, while it looks great in a browser, when I send it to Outlook 2007 through our bulk mailer the header logo dimensions are distorted. This is even if the logo is not being resized in the css - i.e. the image file is exactly the size that I want it to appear. Usually, clicking off and back on to the email causes the image to resize correctly, but obviously this makes a bad first impression.

This is after using the Ink inliner.

The only solution I've found to this has been to add "width" and "height" attributes to the img tag, with the width and height specifying the dimensions of the image file. I don't think your instructions specify that this is needed, so maybe this warrants an update to the instructions?

inliner output bombs out in Outlook 2003

Guys:

Testing out Ink. Nice!

I notice when I take the basic template (output from grunt make:templates or downloaded from the website or here on github) and run it through the inliner, then send to Outlook 2003, what i see is a gray bar about 10k pixels wide with no visible content. If I send the template without running it through the inliner or after running it through the mailchimp inliner (http://beaker.mailchimp.com/inline-css - just the first one I came across) everything is a-ok.

I haven't been able to narrow down the cause. Is anyone else seeing this?

I'm using mailgun to relay mail.

Thanks,
-sean

SASS Cache

I noticed that a directory called .sass-cache while I was browsing your repository. Although I am no expert on your project, so correct me if I am wrong, it seems to me that this folder contains automatically generated files that shouldn’t be in the repository. I recommend deleting it.

Whitespace following images in columns

If you look to the right of the attached image, you'll see that there's a 1px whitespace between it and its containers. This screenshot was taken from an Apple Mail rendering of the content. I've tried the typical border-spacing and border-collapse fixes on the containing row and tables to no avail.

At this point, I'm honestly not sure if it's a problem with Ink or mail clients in general. Has this happened for anyone else, and is it something ZURB may have noticed when using full-width images spanning the entire width of the container?

Center block-grid elements on smaller widths

By default, the block-grids are not centered when the viewport is skinnier:

You can fix this by adding a text-align:center to the parent tr like so:

<table class="block-grid two-up">
    <tr style="text-align: center;">
        <td>
            <!-- Column 1 -->
        </td><td>
            <!-- Column 2 -->
        </td>
    </tr>
</table>

Then it will look like this:

I think this is likely the more desired effect for mobile when working with block-grid and may be worth considering adding it to ink's default styles.

Buttons are not clickable in Outlook 2007/2010/2013

I'll preface this by saying that I'm only testing in VMware Fusion, but that has been accurate about these things for me in the past.

According to my testing in the past, as well as testing the example code provided with Ink, links wrapped around tables can't be clicked in the versions of Outlook that use Word to render HTML. By that, I meant that clicking such links does not result in the URL opening.

Another symptom is that link wrapped tables get a text cursor in Outlook instead of a pointer/hand.

Video here

Kudos on all the great work you're sharing here though!

url all my "&" change to "&"

By default the ink inliner, doesn't respect href attributes, so when I use utm_ query string parameter on my links all my "&" change to &. This not only destroys mi tracking on google analytics or any other parameter but also it render useless all my links, destroying my campaign.

?utm_source=newsletter&utm_medium=email

Sass version

Is there / will there be a Sass version?

Padding within columns

There's no clear way to create padding or to offset your content.

The docs don't have a section for how to properly implement an offset, but it would be great if we could pull content away from the 580px container.

As it stands, if you want a background color on your 580px container (not the body) the text is flush with the left. This is not ideal.

There should be an easy way to apply padding, or at least offset the columns in such a way that allows for some padding in cases like these.

Most reliable way to set vertical spacing between elements?

There is no info on the Docs about the most reliable way to space elements vertically.
Any opinions on this?

Rows Using Numbers

You might consider using row counts using numbers as well as spelled out numbers.

You can do this by using unicode equivalents for numbers in css

For example

.eight.columns, 
.\38.columns {

}

Unicode lookup values

use Assemble instead of grunt-includes?

Would you consider a PR to use https://github.com/assemble/assemble instead? I think we should be able to simplify the build a lot and make it easier to maintain.

@doowb or I would be happy to put something together if you're open to it.

Inliner creates unnecessary tag nesting

I have an email that has an <a> tag inside a <p> tag. For some reason, the inliner removes the link from the paragraph and, instead, appends it.

Here's a gist showing the pre- and post-inlined HTML: https://gist.github.com/dpmccabe/7759553

Provide the CSS as LESS with variables

Hey there,
I have the problem, that my newsletter needs to have a 20px padding on text-pad elements. If I overwrite the padding there are artefacts on the complete table width when using a two col layout. So I tried to change all 10px paddings to 20px which did not work too.
What about providing the CSS file as a LESS files with just a few variables where one can set margins, widths, etc. and the rest of the stylesheet gets calculated?
Cheers
Philipp

Problem view in gmail

Hi, I'm testing ink framework on Litmus and in the "Gmail (Android)" and "Gmail App (Android)" the design it's wrong. In first case two columns doesn't transform into one columns and in the second case images aren't responsive, they look large.

Any suggestion?

Thank you.

Visibility classes not working in Outlook 2007 (2003 is fine)

...which is understandable, since it uses the Word html engine

All styles have been inlined.

Outlook 2007 (bad, both visibility classes are shown)

Outlook 2003 (good, oddly enough)

iOS 6 (good, for reference)

Since 1.0.2, only the labels of buttons are clickable

Sorry. This is a follow up to #4.

I know there aren't (m)any great ways to code buttons for email, but making the actual button shape non-clickable is a pretty big usability flaw.

Leaving this here in case you find an other option.

Grid on Gmail

I'm having a hard time using a grid on Gmail, even after using your inliner. It simply doesn't displays properly, neither on Desktop nor the mobile. What's funny about it is that on Email on Acid it displays smoothly. Go figure...

Well, I already went through the documentation and noted several times the recommended use of the block grid. But the thing is, I want un-even blocks (like a 4 + 8 row). How is the best way to achieve this? Or it's better to forget using un-evenly rows on Gmail?

I also tried sub-grids, and they did work, but they're not responsive and don't stack, which is pretty annoying.

My code after the inliner: https://gist.github.com/pedrosanta/9485918

It's a real, real bummer that the grid doesn't work properly on Gmail, which happens to be one of the most popular email clients. There should definitely be an alternative for this.

min-width conflicting with text-pad classes (padding in general)

So it would seem that applying .center to <td class="text-pad"> and wrapping its content in a <center> tag extends the width of the container by the width of the padding. Is this expected, or is there a proper way to circumvent this?

For the time being, I'm just dropping the .center class and <center> and applying .center to the content itself (it's a headline on its own row). I tested in Litmus and it works fine. I would possibly just advise either a fix (if there is one) or an update to the docs on how center might affect the widths where padding/margins is being applied.

Sub-columns 1-10-1 and mobile issue

Hi !

I want to use sub-columns to make a "big" padding on the left and the right.
So :
If I do 2 - 8 - 2

two sub-columns
eight sub-columns
two sub-columns

<td class="wrapper">
    <table class="twelve columns">
        <tr>
            <td class="two sub-columns">sub two</td>
            <td class="eight sub-columns">sub eight</td>
            <td class="two sub-columns last">sub two</td>
            <td class="expander"></td>
        </tr>
    </table>
</td>

We have :

Everything's ok.

But if I do it with 1 - 10 - 1

one sub-columns
ten sub-columns

one sub-columns

<td class="wrapper">
<table class="twelve columns">
    <tr>
        <td class="one sub-columns">sub one</td>
        <td class="ten sub-columns">sub ten</td>
        <td class="one sub-columns last">sub one</td>
        <td class="expander"></td>
    </tr>
</table>
</td>

Thanks a lot for your help ! :)

.button hover confusion -- background is not linked

<table class="button"> have hover effect, but enclosed link a tags are not active for the full width of the .button.

I know it's not proper for the <a> tag to wrap more than the text. However, these .button appear to be proper button links, while they are merely tables with hover effect.

This is confusing on all devices, and presents a usability issue.

Windows Phone 7.5 rendering incorrectly

The hero template doesn't render correctly:

Consistant height on column content in a row

I have an email that currently looks like http://o7.no/1beu4zL.

I am trying to get the green background to be the same height as the picture. I have to apply the background color to the columns class because the wrapper class has padding.

Can you think of a way to solve this that's compatible with major clients including outlook. This is the desired effect: http://o7.no/1cJ9T9O.

I've currently set the height of the columns table to the height of the image on the right. This fixes the problem in clients that recognize the height style attribute, but it seems to fail in most others.

Litmus: https://litmus.com/pub/3ba0acb

Thanks

Here is the email html: https://gist.github.com/jeremymoore/6c70f018383c153db05f

Currently how it appears in Outlook and other clients.

How i want it to appear.

Sub-columns don't work on Outlook 2007/2010/2013

The basic template with 1 + 10 + 1 sub-colums on the first content row: https://litmus.com/pub/a553e64

On Outlook 2007/2010/2013 the middle column expands to full width. Do these Outlook versions support percentages? Is there a quick fix for it?

                <table class="row">
                  <tr>
                    <td class="wrapper last">

                      <table class="twelve columns">
                        <tr>
                          <td class="one sub-column last" >
                          </td>
                          <td class="ten sub-columns last">
                            <h3>Hi, Susan Calvin</h3>
                            <p class="lead">Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae.</p>
                            <p>Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. consequat vel lacus. Sed iaculis pulvinar ligula, ornare fringilla ante viverra et. In hac habitasse platea dictumst. Donec vel orci mi, eu congue justo. Integer eget odio est, eget malesuada lorem. Aenean sed tellus dui, vitae viverra risus. Nullam massa sapien, pulvinar eleifend fringilla id, convallis eget nisi. Mauris a sagittis dui. Pellentesque non lacinia mi. Fusce sit amet libero sit amet erat venenatis sollicitudin vitae vel eros. Cras nunc sapien, interdum sit amet porttitor ut, congue quis urna.</p>
                          </td>
                          <td class="one sub-column last">
                          </td>
                          <td class="expander"></td>
                        </tr>
                      </table>

                    </td>
                  </tr>
                </table>

img collapses without siblings

If one starts with the hero template and removes the h1 and p which are immediately before the main 580x300 img, the image doesn't render to the full width in some versions of Outlook.

Just test it in the Outlooks and you will see what I mean.

Adding a p with a period inside is enough to workaround this, but an empty p does nothing.

Firefox TD width bug

Try viewing http://zurb.com/ink/docs.php#if-basicGrid (or http://zurb.com/ink/docs/examples/basic-grid.html) in Firefox, you'll notice that the .eight.columns and .four.columns aren't width: 100% (relative to the tables width). This effects webmail versions of your supported/tested clients.

The workaround is to set the parent tbody, tr { display:block; } in the situations where you need the td to be 100%. I haven't been able to test this to see if there are unintended consequences for other clients/browsers however.

Missing !important

I believe this rule should have !important (all other media query rules do):
https://github.com/zurb/ink/blob/master/css/ink.css#L687-L690

Even columns layout doesn't collapse when it's sent live via BH

Even columns looked good when testing the email using the method "Paste in your email address" in Litmus. But when I sent it as live test through Blue Hornet to Litms. BH added some markup and would not render the columns stacking on mobile screen. It wasted me a lot of time to figure this out, but no luck. Any suggestions? Thanks!

Borders on buttons get clipped on the right side

If you shrink the width of your browser window enough, you'll see that the right border of the buttons are being cut off. I'm attaching two screenshots as an example, one from the Zurb Ink docs and one from my own project.

It looks like it has something to do with setting the width to 100% on the table.column td.

The inliner tool duplicates the xmlns attribute in the <html> tag

Hello,

First of all, thank you very much for Ink, it has been very useful!
Just noticed something going on with the inliner tool http://zurb.com/ink/inliner.php

See, this is the html tag in the document:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

The inliner outputs the following:

<!-- Inliner Build Version 4380b7741bb759d6cb997545f3add21ad48f010b -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml">

xmlns is duplicated. It doesn't seem to cause problems. Did a quick check with litmus free email testing and all emails seemed to show up correctly, however they where only screenshots.

Hero Sidebar Template not working in iOS 7 iPhone Mail App

Hello,

the layout is broken in the latest iOS 7 (7.0.4) Mail App on the iPhone (I have the iPhone 5).

In the GMail Mail App it works just great. Even the media queries are working :)

If it should be necessary, here's the code I gave in to the inliner on your website (I just inserted the content of ink.css from the master branch into the style section of the template):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width"/>
  <style>
    /**********************************************
* Ink v1.0.3 - Copyright 2013 ZURB Inc        *
**********************************************/

/* Client-specific Styles & Reset */

#outlook a { 
  padding:0; 
} 

body{ 
  width:100% !important; 
  -webkit-text-size-adjust:100%; 
  -ms-text-size-adjust:100%; 
  margin:0; 
  padding:0;
}

.ExternalClass { 
  width:100%;
} 

.ExternalClass, 
.ExternalClass p, 
.ExternalClass span, 
.ExternalClass font, 
.ExternalClass td, 
.ExternalClass div { 
  line-height: 100%; 
} 

#backgroundTable { 
  margin:0; 
  padding:0; 
  width:100% !important; 
  line-height: 100% !important; 
}

img { 
  outline:none; 
  text-decoration:none; 
  -ms-interpolation-mode: bicubic;
  width: auto;
  max-width: 100%; 
  float: left; 
  clear: both; 
  display: block;
}

center {
  width: 100%;
  min-width: 580px;
}

a img { 
  border: none;
}

p {
  margin: 0 0 0 10px;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

td { 
  word-break: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
  border-collapse: collapse !important; 
}

table, tr, td {
  padding: 0;
  vertical-align: top;
  text-align: left;
}

hr {
  color: #d9d9d9; 
  background-color: #d9d9d9; 
  height: 1px; 
  border: none;
}

/* Responsive Grid */

table.body {
  height: 100%;
  width: 100%;
}

table.container {
  width: 580px;
  margin: 0 auto;
  text-align: inherit;
}

table.row { 
  padding: 0px; 
  width: 100%;
  position: relative;
}

table.container table.row {
  display: block;
}

td.wrapper {
  padding: 10px 20px 0px 0px;
  position: relative;
}

table.columns,
table.column {
  margin: 0 auto;
}

table.columns td,
table.column td {
  padding: 0px 0px 10px; 
}

table.columns td.sub-columns,
table.column td.sub-columns,
table.columns td.sub-column,
table.column td.sub-column {
  padding-right: 10px;
}

table.row td.last,
table.container td.last {
  padding-right: 0px;
}

table.one { width: 30px; }
table.two { width: 80px; }
table.three { width: 130px; }
table.four { width: 180px; }
table.five { width: 230px; }
table.six { width: 280px; }
table.seven { width: 330px; }
table.eight { width: 380px; }
table.nine { width: 430px; }
table.ten { width: 480px; }
table.eleven { width: 530px; }
table.twelve { width: 580px; }

table.one center { min-width: 30px; }
table.two center { min-width: 80px; }
table.three center { min-width: 130px; }
table.four center { min-width: 180px; }
table.five center { min-width: 230px; }
table.six center { min-width: 280px; }
table.seven center { min-width: 330px; }
table.eight center { min-width: 380px; }
table.nine center { min-width: 430px; }
table.ten center { min-width: 480px; }
table.eleven center { min-width: 530px; }
table.twelve center { min-width: 580px; }

.body .columns td.one,
.body .column td.one, { width: 8.333333% !important; }
.body .columns td.two,
.body .column td.two { width: 16.666666% !important; }
.body .columns td.three,
.body .column td.three { width: 25% !important; }
.body .columns td.four,
.body .column td.four { width: 33.333333% !important; }
.body .columns td.five,
.body .column td.five { width: 41.666666% !important; }
.body .columns td.six,
.body .column td.six { width: 50% !important; }
.body .columns td.seven,
.body .column td.seven { width: 58.333333% !important; }
.body .columns td.eight,
.body .column td.eight { width: 66.666666% !important; }
.body .columns td.nine,
.body .column td.nine { width: 75% !important; }
.body .columns td.ten,
.body .column td.ten { width: 83.333333% !important; }
.body .columns td.eleven,
.body .column td.eleven { width: 91.666666% !important; }
.body .columns td.twelve,
.body .column td.twelve { width: 100% !important; }

td.offset-by-one { padding-left: 50px; }
td.offset-by-two { padding-left: 100px; }
td.offset-by-three { padding-left: 150px; }
td.offset-by-four { padding-left: 200px; }
td.offset-by-five { padding-left: 250px; }
td.offset-by-six { padding-left: 300px; }
td.offset-by-seven { padding-left: 350px; }
td.offset-by-eight { padding-left: 400px; }
td.offset-by-nine { padding-left: 450px; }
td.offset-by-ten { padding-left: 500px; }
td.offset-by-eleven { padding-left: 550px; }

td.sub-offset-by-one { padding-left: 5.172413% !important; }
td.sub-offset-by-two { padding-left: 13.793102% !important; }
td.sub-offset-by-three { padding-left: 22.413791% !important; }
td.sub-offset-by-four { padding-left: 31.034480% !important; }
td.sub-offset-by-five { padding-left: 39.655169% !important; }
td.sub-offset-by-six { padding-left: 48.275858% !important; }
td.sub-offset-by-seven { padding-left: 56.896547% !important; }
td.sub-offset-by-eight { padding-left: 65.517236% !important; }
td.sub-offset-by-nine { padding-left: 74.137925% !important; }
td.sub-offset-by-ten { padding-left: 82.758614% !important; }
td.sub-offset-by-eleven { padding-left: 91.379303% !important; }

td.expander {
  visibility: hidden;
  width: 0px;
  padding: 0 !important;
}

table.columns .text-pad {
  padding-left: 10px;
  padding-right: 10px;
}

table.columns .left-text-pad {
  padding-left: 10px;
}

table.columns .right-text-pad {
  padding-right: 10px;
}

/* Block Grid */

.block-grid {
  width: 100%;
  max-width: 580px;
}

.block-grid td {
  display: inline-block;
  padding:10px;
}

.two-up td {
  width:270px;
}

.three-up td {
  width:173px;
}

.four-up td {
  width:125px;
}

.five-up td {
  width:96px;
}

.six-up td {
  width:76px;
}

.seven-up td {
  width:62px;
}

.eight-up td {
  width:52px;
}

/* Alignment & Visibility Classes */

table.center, td.center {
  text-align: center;
}

h1.center,
h2.center,
h3.center,
h4.center,
h5.center,
h6.center {
  text-align: center;
}

span.center {
  display: block;
  width: 100%;
  text-align: center;
}

img.center {
  margin: 0 auto;
  float: none;
}

.show-for-small,
.hide-for-desktop {
  display: none;
}

/* Typography */

body, table.body, h1, h2, h3, h4, h5, h6, p { 
  color: #222222;
  font-family: "Helvetica", "Arial", sans-serif; 
  font-weight: normal; 
  padding:0; 
  margin: 0;
  text-align: left; 
  line-height: 1.3;
}

h1, h2, h3, h4, h5, h6 {
  word-break: normal;
}

h1 {font-size: 40px;}
h2 {font-size: 36px;}
h3 {font-size: 32px;}
h4 {font-size: 28px;}
h5 {font-size: 24px;}
h6 {font-size: 20px;}
body, table.body, p {font-size: 14px;line-height:19px;}

p { 
  padding-bottom: 10px;
}

small {
  font-size: 10px;
}

a {
  color: #2ba6cb; 
  text-decoration: none;
}

a:hover { 
  color: #2795b6 !important;
}

a:active { 
  color: #2795b6 !important;
}

a:visited { 
  color: #2ba6cb !important;
}

h1 a, 
h2 a, 
h3 a, 
h4 a, 
h5 a, 
h6 a {
  color: #2ba6cb !important;
}

h1 a:active, 
h2 a:active,  
h3 a:active, 
h4 a:active, 
h5 a:active, 
h6 a:active { 
  color: #2ba6cb !important; 
} 

h1 a:visited, 
h2 a:visited,  
h3 a:visited, 
h4 a:visited, 
h5 a:visited, 
h6 a:visited { 
  color: #2ba6cb !important; 
} 

/* Panels */

td.panel {
  background: #f2f2f2;
  border: 1px solid #d9d9d9;
  padding: 10px !important;
}

/* Buttons */

table.button,
table.tiny-button,
table.small-button,
table.medium-button,
table.large-button {
  width: 100%;
  overflow: hidden;
}

table.button td,
table.tiny-button td,
table.small-button td,
table.medium-button td,
table.large-button td {
  display: block;
  width: auto !important;
  text-align: center;
  background: #2ba6cb;
  border: 1px solid #2284a1;
  color: #ffffff;
  padding: 8px 0;
}

table.tiny-button td {
  padding: 5px 0 4px;
}

table.small-button td {
  padding: 8px 0 7px;
}

table.medium-button td {
  padding: 12px 0 10px;
}

table.large-button td {
  padding: 21px 0 18px;
}

table.button td a,
table.tiny-button td a,
table.small-button td a,
table.medium-button td a,
table.large-button td a {
  font-weight: bold;
  text-decoration: none;
  font-family: Helvetica, Arial, sans-serif;
  color: #ffffff;
  font-size: 16px;
}

table.tiny-button td a {
  font-size: 12px;
  font-weight: normal;
}

table.small-button td a {
  font-size: 16px;
}

table.medium-button td a {
  font-size: 20px;
}

table.large-button td a {
  font-size: 24px;
}

table.button:hover td,
table.button:visited td,
table.button:active td {
  background: #2795b6 !important;
}

table.button:hover td a,
table.button:visited td a,
table.button:active td a {
  color: #fff !important;
}

table.button:hover td,
table.tiny-button:hover td,
table.small-button:hover td,
table.medium-button:hover td,
table.large-button:hover td {
  background: #2795b6 !important;
}

table.button:hover td a,
table.button:active td a,
table.button td a:visited,
table.tiny-button:hover td a,
table.tiny-button:active td a,
table.tiny-button td a:visited,
table.small-button:hover td a,
table.small-button:active td a,
table.small-button td a:visited,
table.medium-button:hover td a,
table.medium-button:active td a,
table.medium-button td a:visited,
table.large-button:hover td a,
table.large-button:active td a,
table.large-button td a:visited {
  color: #ffffff !important; 
}

table.secondary td {
  background: #e9e9e9;
  border-color: #d0d0d0;
  color: #555;
}

table.secondary td a {
  color: #555;
}

table.secondary:hover td {
  background: #d0d0d0 !important;
  color: #555;
}

table.secondary:hover td a,
table.secondary td a:visited,
table.secondary:active td a {
  color: #555 !important;
}

table.success td {
  background: #5da423;
  border-color: #457a1a;
}

table.success:hover td {
  background: #457a1a !important;
}

table.alert td {
  background: #c60f13;
  border-color: #970b0e;
}

table.alert:hover td {
  background: #970b0e !important;
}

table.radius td {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

table.round td {
  -webkit-border-radius: 500px;
  -moz-border-radius: 500px;
  border-radius: 500px;
}

.button table,
.tiny-button table,
.small-button table,
.medium-button table,
.large-button table {
  width: 100%;
  overflow: hidden;
}

.button table td,
.tiny-button table td,
.small-button table td,
.medium-button table td,
.large-button table td {
  display: block;
  width: auto !important;
  text-align: center;
  font-weight: bold;
  text-decoration: none;
  font-family: Helvetica, Arial, sans-serif;
  color: #ffffff;
  background: #2ba6cb;
  border: 1px solid #2284a1;
}

.tiny-button table td {
  padding: 5px 10px;
  font-size: 12px;
  font-weight: normal;
}

.button table td,
.small-button table td {
  padding: 8px 15px;
  font-size: 16px;
}

.medium-button table td {
  padding: 12px 24px;
  font-size: 20px;
}

.large-button table td {
  padding: 21px 30px;
  font-size: 24px;
}

.button:hover table td,
.tiny-button:hover table td,
.small-button:hover table td,
.medium-button:hover table td,
.large-button:hover table td {
  background: #2795b6 !important;
}

.button,
.button:hover,
.button:active,
.button:visited,
.tiny-button,
.tiny-button:hover,
.tiny-button:active,
.tiny-button:visited,
.small-button,
.small-button:hover,
.small-button:active,
.small-button:visited,
.medium-button,
.medium-button:hover,
.medium-button:active,
.medium-button:visited,
.large-button,
.large-button:hover,
.large-button:active,
.large-button:visited {
  color: #ffffff !important; 
  font-family: Helvetica, Arial, sans-serif; 
  text-decoration: none;
}

.secondary table td {
  background: #e9e9e9;
  border-color: #d0d0d0;
}

.secondary:hover table td {
  background: #d0d0d0 !important;
}

.success table td {
  background: #5da423;
  border-color: #457a1a;
}

.success:hover table td {
  background: #457a1a !important;
}

.alert table td {
  background: #c60f13;
  border-color: #970b0e;
}

.alert:hover table td {
  background: #970b0e !important;
}

.radius table td {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

.round table td {
  -webkit-border-radius: 500px;
  -moz-border-radius: 500px;
  border-radius: 500px;
}

/* Outlook First */

body.outlook p {
  display: inline !important;
}

/*  Media Queries */

@media only screen and (max-width: 600px) {

  table[class="body"] img {
    width: auto !important;
    height: auto !important;
  }

  table[class="body"] center {
    min-width: 0 !important;
  }

  table[class="body"] .container {
    width: 95% !important;
  }

  table[class="body"] .row {
    width: 100% !important;
    display: block !important;
  }

  table[class="body"] .wrapper {
    display: block !important;
    padding-right: 0 !important;
  }

  table[class="body"] .columns,
  table[class="body"] .column {
    table-layout: fixed !important;
    float: none !important;
    width: 100% !important;
    padding-right: 0px !important;
    padding-left: 0px !important;
    display: block !important;
  }

  table[class="body"] .wrapper.first .columns,
  table[class="body"] .wrapper.first .column {
    display: table !important;
  }

  table[class="body"] table.columns td,
  table[class="body"] table.column td {
    width: 100% !important;
  }

  table[class="body"] td.offset-by-one,
  table[class="body"] td.offset-by-two,
  table[class="body"] td.offset-by-three,
  table[class="body"] td.offset-by-four,
  table[class="body"] td.offset-by-five,
  table[class="body"] td.offset-by-six,
  table[class="body"] td.offset-by-seven,
  table[class="body"] td.offset-by-eight,
  table[class="body"] td.offset-by-nine,
  table[class="body"] td.offset-by-ten,
  table[class="body"] td.offset-by-eleven {
    padding-left: 0 !important;
  }

  table[class="body"] .expander {
    width: 9999px !important;
  }

  table[class="body"] .right-text-pad {
    padding-left: 10px !important;
  }

  table[class="body"] .left-text-pad {
    padding-right: 10px !important;
  }

  table[class="body"] .hide-for-small,
  table[class="body"] .show-for-desktop {
    display: none !important;
  }

  table[class="body"] .show-for-small,
  table[class="body"] .hide-for-desktop {
    display: inherit !important;
  }
}
  </style>
  <style>

    table.facebook td {
      background: #3b5998;
      border-color: #2d4473;
    }

    table.facebook:hover td {
      background: #2d4473 !important;
    }

    table.twitter td {
      background: #00acee;
      border-color: #0087bb;
    }

    table.twitter:hover td {
      background: #0087bb !important;
    }

    table.google-plus td {
      background-color: #DB4A39;
      border-color: #CC0000;
    }

    table.google-plus:hover td {
      background: #CC0000 !important;
    }

    .template-label {
      color: #ffffff;
      font-weight: bold;
      font-size: 11px;
    }

    .callout .panel {
      background: #ECF8FF;
      border-color: #b9e5ff;
    }

    .header {
      background: #999999;
    }

    .footer .wrapper {
      background: #ebebeb;
    }

    .footer h5 {
      padding-bottom: 10px;
    }

    table.columns .text-pad {
      padding-left: 10px;
      padding-right: 10px;
    }

    table.columns .left-text-pad {
      padding-left: 10px;
    }

    table.columns .right-text-pad {
      padding-right: 10px;
    }

    @media only screen and (max-width: 600px) {

      table[class="body"] .right-text-pad {
        padding-left: 10px !important;
      }

      table[class="body"] .left-text-pad {
        padding-right: 10px !important;
      }
    }

  </style>
</head>
<body>
  <table class="body">
    <tr>
      <td class="center" align="center" valign="top">
        <center>

          <table class="row header">
            <tr>
              <td class="center" align="center">
                <center>

                  <table class="container">
                    <tr>
                      <td class="wrapper last">

                        <table class="twelve columns">
                          <tr>
                            <td class="six sub-columns">
                              <img src="http://placehold.it/200x50">
                            </td>
                            <td class="six sub-columns last" style="text-align:right; vertical-align:middle;">
                              <span class="template-label">SIDEBAR HERO</span>
                            </td>

                          </tr>
                        </table>

                      </td>
                    </tr>
                  </table>

                </center>
              </td>
            </tr>
          </table>

          <br>

          <table class="container">
            <tr>
              <td>

              <!-- content start -->
              <table class="row">
                <tr>
                  <td class="wrapper last">

                    <table class="twelve columns">
                      <tr>
                        <td>
                          <h1>Welcome, Daneel Olivan</h1>
                          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
                          <img width="580" height="300" src="http://placehold.it/580x300">
                        </td>
                        <td class="expander"></td>
                      </tr>
                    </table>

                    <table class="twelve columns">
                      <tr>
                        <td class="panel">
                          <p>Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. <a href="#">Click it! »</a></p>
                        </td>
                        <td class="expander"></td>
                      </tr>
                    </table>

                  </td>
                </tr>
              </table>

              <br>  <!-- Break Tag for row -->

              <table class="row">
                <tr>
                  <td class="wrapper">

                    <table class="six columns">
                      <tr>
                        <td>

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

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

                          <table class="button">
                            <tr>
                              <td>
                                <a href="#">Click Me!</a>
                              </td>
                            </tr>
                          </table>

                        </td>
                        <td class="expander"></td>
                      </tr>
                    </table>

                  </td>
                  <td class="wrapper last">

                    <table class="six columns">
                      <tr>
                        <td class="panel">
                          <h6>Header Thing</h6>
                          <p>Sub-head or something</p>
                          <table>
                              <tr>
                                <td>
                                  <a href="#">Just a Plain Link &raquo;</a>
                                </td>
                              </tr>
                            </table>
                            <hr>
                            <table>
                              <tr>
                                <td>
                                  <a href="#">Just a Plain Link &raquo;</a>
                                </td>
                              </tr>
                            </table>
                            <hr>
                            <table>
                              <tr>
                                <td>
                                  <a href="#">Just a Plain Link &raquo;</a>
                                </td>
                              </tr>
                            </table>
                            <hr>
                            <table>
                              <tr>
                                <td>
                                  <a href="#">Just a Plain Link &raquo;</a>
                                </td>
                              </tr>
                            </table>
                            <hr>
                            <table>
                              <tr>
                                <td>
                                  <a href="#">Just a Plain Link &raquo;</a>
                                </td>
                              </tr>
                            </table>
                            <hr>
                            <table>
                              <tr>
                                <td>
                                  <a href="#">Just a Plain Link &raquo;</a>
                                </td>
                              </tr>
                            </table>
                            <hr>
                            <table>
                              <tr>
                                <td>
                                  <a href="#">Just a Plain Link &raquo;</a>
                                </td>
                              </tr>
                            </table>
                        </td>
                        <td class="expander"></td>
                      </tr>
                    </table>
                    <br>
                    <table class="six columns">
                      <tr>
                        <td class="panel">
                          <h6 style="margin-bottom:5px;">Connect With Us:</h6>
                          <table class="tiny-button facebook">
                              <tr>
                                <td>
                                  <a href="#">Facebook</a>
                                </td>
                              </tr>
                            </table>

                            <hr>

                            <table class="tiny-button twitter">
                              <tr>
                                <td>
                                  <a href="#">Twitter</a>
                                </td>
                              </tr>
                            </table>

                            <hr>

                            <table class="tiny-button google-plus">
                              <tr>
                                <td>
                                  <a href="#">Google +</a>
                                </td>
                              </tr>
                            </table>
                          <br>
                          <h6 style="margin-bottom:5px;">Contact Info:</h6>
                          <p>Phone: <b>408.341.0600</b></p>
                          <p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
                        </td>
                        <td class="expander"></td>
                      </tr>
                    </table>

                  </td>
                </tr>
              </table>
              <br>
              <br>
              <!-- Legal + Unsubscribe -->            
              <table class="row">
                <tr>
                  <td class="wrapper last">

                    <table class="twelve columns">
                      <tr>
                        <td align="center">
                          <center>
                            <p style="text-align:center;"><a href="#">Terms</a> | <a href="#">Privacy</a> | <a href="#"><unsubscribe>Unsubscribe</unsubscribe></a></p>
                          </center>
                        </td>
                        <td class="expander"></td>
                      </tr>
                    </table>

                  </td>
                </tr>
              </table>

              <!-- container end below -->
              </td>
            </tr>
          </table> 

        </center>
      </td>
    </tr>
  </table>
</body>
</html>

Bye Defcon0

Images on Gmail (Android)

Hi,

I did some test on Litmus and in Gmail (Android) preview, the responsive images doens't work, they are bigger than screen. Is that normal?

Image sizes in Outlook 2003

I've got a simple hero image in a template I've just created:

    <table class="body">
        <tr>
            <td class="center" align="center" valign="top">
        <center>


          <table class="container">
            <tr>
              <td>

                <table class="row">
                  <tr>
                    <td class="wrapper last">

                      <table class="twelve columns">
                        <tr>
                          <td>

                        <img width="580" height="300" src="http://placehold.it/580x300">

                          </td>
                          <td class="expander"></td>
                        </tr>
                      </table>

                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table> 

        </center>
            </td>
        </tr>
    </table>

It's been through the zurb inliner and is using ink 1.0.4 - but for Outlook 2003 (and Outlook 2002, 2000) the image width is wrong:

http://cl.ly/image/3T1A0x020v07/o

I can't see anything else to reduce the problem further - is there something I'm missing?

Thanks!

Andrew

Ipad mail: table doesn't stretch to 100%

In ipad mail space on the right side is added when using only 12 columns layouts in your email.

For example if you use the Ink basic.html template and leave out the row footer, the email is no longer 100% width in ipad mail.

I fixed this by adding min-width: 100% to the body instead of width: 100%:
body { min-width: 100% !important; }
table.body { min-width: 100%;}

Might be something to add in future releases.

Basic template not working in Gmail web

Extra spacing on both left and right side around the image

There're about 2px extra spacing on both left and right sides around the image. This issue appears in Outlook 2001-2003, AOL (IE & Firefox). See screenshot below or attached. At first, i thought i accidentally changed the code causing that problem. But I took Zurb's template and ran a test in Litmus, got the same issue. I couldn't use the framework unless it's fixed. Other than that, I love it.