--- /dev/null
+# Ink
+
+Ink is a framework for creating responsive emails. It supports a large number of platforms out of the box (including Outlook) and includes many of the core features of Foundation, such as a responsive grid, buttons and panels. To use the framework, simply include the CSS at the top of your email (in a `style` tag, rather than linked in an external stylesheet) and follow the syntax layed out in this document, as well as the two included sample templates. Once your email is fully coded, run it through a CSS-inliner tool (we recommend Campaign Monitor's tool) and send it out using an HTML email provider. We use Litmus for testing a variety of clients, but obviously we can't cover every combination, so let us know if you find things that don't work.
+
+# Tested Platforms
+
+* Gmail
+* Apple Mail
+* Microsoft Outlook
+* Android Native
+* iOS Native
+* AOL Mail
+* Yahoo Mail
+
+# Features
+
+## Grid
+
+```
+table.body
+ td.center
+
+ table.container
+
+ table.row
+ td.wrapper(.last)
+
+ table(.one).columns
+ td.expander
+```
+
+## Sub-grid
+
+```
+table(.three).columns
+ td(.two).small-columns(.last)
+ td.expander
+```
+
+## Full-width Headers/Footers
+
+```
+table.body
+ td.center
+
+ table.row
+ td.center
+
+ table.container
+ td.wrapper(.last)
+
+ table(.four).columns
+ td.expander
+```
+
+## Visibility Classes
+
+Apply a class `hide-for-small` or `show-for-small` to a table to toggle its visibility based on the media query.
+
+## Panels
+
+Apply a class `panel` to a td that's a descendant of a `columns` table. Cannot be applied to an element positioned with an offset class.
+
+## Grid Offsets
+
+Apply an offset class to a `wrapper` td or a small offset class to a `small-columns` td to force it to the right by that many columns, without the need for an empty `columns` element. The available offsets are:
+
+* offset-by-one
+* offset-by-two
+* offset-by-three
+* small-offset-by-one
+* small-offset-by-two
+* small-offset-by-three
+
+## Buttons
+
+Apply a button class to an anchor tag, and include a table within the anchor. Optional treatment or color classes may be added to the anchor tag as well.
+
+```
+a.button(.radius)(.success)
+ table
+ tr
+ td
+```
+
+Button Classes:
+
+* button (same as `small-button`)
+* tiny-button
+* small-button
+* medium-button
+* large-button
+
+Treatment Classes:
+
+* radius
+* round
+
+Color Classes:
+
+* secondary
+* success
+* alert
+
+
+# General Email Quirks and Notes
+
+* Yahoo doesn't respect media queries, tries to render CSS inside them as normal. Use bracket notation to confuse the beast and keep your MQs from rendering in Yahoo.
+* Chrome will only render padding on `td`s, not `table`s.
+* Classes can only be applied to `table` and `td` (unknown origin).
+* Media queries must use the `!important` modifer in order to override inline styles.
+* Outlook (and, from the looks of it, Thunderbird) force images full width, irregardless of `width` or `max-width`.
+* Expander `td` causes weird resizing in some cases in Outlook <= 2003 (ex. Wakefield hero), though I don't know the pattern yet.
+* To hide images in Gmail, the wrapper and the image need to have `display:none;` [Note: confirm this]
--- /dev/null
+/**********************************************
+* Client-specific Styles & Reset *
+**********************************************/
+
+/* Force Outlook to provide a "view in browser" menu link. */
+#outlook a {
+ padding:0;
+}
+
+body{
+ width:100% !important;
+ -webkit-text-size-adjust:100%;
+ -ms-text-size-adjust:100%;
+ margin:0;
+ padding:0;
+}
+
+/* Force Hotmail to display emails at full width */
+.ExternalClass {
+ width:100%;
+}
+
+/* Force Hotmail to display normal line spacing. More on that: http://www.emailonacid.com/forum/viewthread/43/ */
+.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;
+}
+
+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;
+}
+
+@media only screen and (max-device-width: 480px) {
+ a[href^="tel"],
+ a[href^="sms"] {
+ text-decoration: none;
+ pointer-events: none;
+ cursor: default;
+ }
+
+ .mobile_link a[href^="tel"],
+ .mobile_link a[href^="sms"] {
+ text-decoration: default;
+ color: orange !important;
+ pointer-events: auto;
+ cursor: default;
+ }
+}
+
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
+ a[href^="tel"], a[href^="sms"] {
+ text-decoration: none;
+ color: blue;
+ pointer-events: none;
+ cursor: default;
+ }
+ .mobile_link a[href^="tel"],
+ .mobile_link a[href^="sms"] {
+ text-decoration: default;
+ color: orange !important;
+ pointer-events: auto;
+ cursor: default;
+ }
+}
+
+/**********************************************
+* Responsive Grid *
+**********************************************/
+
+table.body {
+ height: 100%;
+ width: 100%;
+}
+
+table.container {
+ width: 600px;
+ 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 {
+ margin: 0 auto;
+}
+
+table.columns td {
+ padding: 0px 0px 10px;
+}
+
+table.columns td.small-columns {
+ padding-right: 4%;
+}
+
+table.row td.last {
+ padding-right: 0px;
+}
+
+table.one { width: 135px; }
+table.two { width: 290px; }
+table.three { width: 445px; }
+table.four { width: 600px; }
+
+td.one { width: 25% !important; }
+td.two { width: 50% !important; }
+td.three { width: 75% !important; }
+td.four { width: 100% !important; }
+
+td.offset-by-one { padding-left: 155px; }
+td.offset-by-two { padding-left: 310px; }
+td.offset-by-three { padding-left: 465px; }
+
+td.small-offset-by-one { padding-left: 25% !important; }
+td.small-offset-by-two { padding-left: 50% !important; }
+td.small-offset-by-three { padding-left: 75% !important; }
+
+td.expander {
+ visibility: hidden;
+ width: 0px;
+}
+
+/**********************************************
+* 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 {
+ display: none;
+}
+
+/**********************************************
+* Typography *
+**********************************************/
+
+body, h1, h2, h3, h4, h5, h6, p {
+ color: #222222;
+ display: block;
+ font-family: "Helvetica", "Arial", sans-serif;
+ font-weight: normal;
+ padding:0;
+ margin: 0;
+ text-align: left;
+ line-height: 1.3;
+}
+
+h1 {font-size: 59px;}
+h2 {font-size: 45px;}
+h3 {font-size: 37px;}
+h4 {font-size: 28px;}
+h5 {font-size: 23px;}
+h6 {font-size: 17px;}
+body, p {font-size: 14px;line-height:19px;}
+
+p {
+ /*padding-bottom: 10px;*/
+}
+
+small {
+ font-size: 10px;
+}
+
+a {
+ color: #2ba6cb;
+ text-decoration: none !important;
+}
+
+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 *
+**********************************************/
+
+a.button table,
+a.tiny-button table,
+a.small-button table,
+a.medium-button table,
+a.large-button table {
+ width: 100%;
+ overflow: hidden;
+}
+
+a.button td,
+a.tiny-button td,
+a.small-button td,
+a.medium-button td,
+a.large-button 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;
+}
+
+a.tiny-button td {
+ padding: 5px 10px;
+ font-size: 12px;
+ font-weight: normal;
+}
+
+a.button td,
+a.small-button td {
+ padding: 8px 15px;
+ font-size: 16px;
+}
+
+a.medium-button td {
+ padding: 12px 24px;
+ font-size: 20px;
+}
+
+a.large-button td {
+ padding: 21px 30px;
+ font-size: 24px;
+}
+
+a:hover.button td,
+a:hover.tiny-button td,
+a:hover.small-button td,
+a:hover.medium-button td,
+a:hover.large-button td {
+ background: #2795b6 !important;
+}
+
+a.button,
+a:hover.button,
+a:active.button,
+a:visited.button,
+a.tiny-button,
+a:hover.tiny-button,
+a:active.tiny-button,
+a:visited.tiny-button,
+a.small-button,
+a:hover.small-button,
+a:active.small-button,
+a:visited.small-button,
+a.medium-button,
+a:hover.medium-button,
+a:active.medium-button,
+a:visited.medium-button,
+a.large-button,
+a:hover.large-button,
+a:active.large-button,
+a:visited.large-button {
+ color: #ffffff !important;
+ font-family: Helvetica, Arial, sans-serif;
+ text-decoration: none;
+}
+
+a.secondary td {
+ background: #e9e9e9;
+ border-color: #d0d0d0;
+}
+
+a:hover.secondary td {
+ background: #d0d0d0 !important;
+}
+
+a.success td {
+ background: #5da423;
+ border-color: #457a1a;
+}
+
+a:hover.success td {
+ background: #457a1a !important;
+}
+
+a.alert td {
+ background: #c60f13;
+ border-color: #970b0e;
+}
+
+a:hover.alert td {
+ background: #970b0e !important;
+}
+
+a.radius td {
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+}
+
+a.rounded td {
+ -webkit-border-radius: 500px;
+ -moz-border-radius: 500px;
+ border-radius: 500px;
+}
+/**********************************************
+* Media Queries *
+**********************************************/
+
+@media only screen and (max-width: 600px) {
+
+ 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-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 {
+ display: table !important;
+ }
+
+ table[class="body"] table.columns td {
+ width: 100%;
+ }
+
+ table[class="body"] td.offset-by-one,
+ table[class="body"] td.offset-by-two,
+ table[class="body"] td.offset-by-three {
+ padding-left: 0 !important;
+ }
+
+ table[class="body"] .hide-for-small {
+ display: none !important;
+ }
+
+ table[class="body"] .show-for-small {
+ display:inherit !important;
+ }
+}
+
+/**********************************************
+* Outlook First *
+**********************************************/
+
+body.outlook img {
+ width: auto !important;
+ max-width: none !important;
+}
\ No newline at end of file
projects / thirdparty / foundation / foundation-emails.git / commitdiff
