]> git.ipfire.org Git - thirdparty/foundation/foundation-emails.git/commitdiff
updates more content to tips and tricks
authorRafiBomb <rafi@zurb.com>
Mon, 28 Mar 2016 18:09:28 +0000 (11:09 -0700)
committerRafiBomb <rafi@zurb.com>
Mon, 28 Mar 2016 18:09:28 +0000 (11:09 -0700)
docs/pages/inlined.html [new file with mode: 0644]
docs/pages/migration.md
docs/pages/tips-tricks.md
docs/partials/component-list.html

diff --git a/docs/pages/inlined.html b/docs/pages/inlined.html
new file mode 100644 (file)
index 0000000..eb5269f
--- /dev/null
@@ -0,0 +1 @@
+<!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></style></head><body style="-moz-box-sizing:border-box;-ms-text-size-adjust:100%;-webkit-box-sizing:border-box;-webkit-text-size-adjust:100%;Margin:0;box-sizing:border-box;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:1em;font-weight:400;line-height:1.35em;margin:0;min-width:100%;padding:0;text-align:left;width:100%!important"><style>@media only screen and (max-width:596px){.small-float-center{margin:0 auto!important;float:none!important;text-align:center!important}.small-text-center{text-align:center!important}.small-text-left{text-align:left!important}.small-text-right{text-align:right!important}}@media only screen and (max-width:596px){table.body table.container .hide-for-large{display:block!important;width:auto!important;overflow:visible!important}}@media only screen and (max-width:596px){table.body table.container .row.hide-for-large{display:table!important;width:100%!important}}@media only screen and (max-width:596px){table.body table.container .show-for-large{display:none!important;width:0;mso-hide:all;overflow:hidden}}@media only screen and (max-width:596px){table.body center{min-width:0!important}table.body .container{width:95%!important}table.body .column,table.body .columns{height:auto!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:16px!important;padding-right:16px!important}table.body .column .column,table.body .column .columns,table.body .columns .column,table.body .columns .columns{padding-left:0!important;padding-right:0!important}table.body .collapse .column,table.body .collapse .columns{padding-left:0!important;padding-right:0!important}td.small-1,th.small-1{display:inline-block!important;width:8.33333%!important}td.small-2,th.small-2{display:inline-block!important;width:16.66667%!important}td.small-3,th.small-3{display:inline-block!important;width:25%!important}td.small-4,th.small-4{display:inline-block!important;width:33.33333%!important}td.small-5,th.small-5{display:inline-block!important;width:41.66667%!important}td.small-6,th.small-6{display:inline-block!important;width:50%!important;padding:5px!important}td.small-7,th.small-7{display:inline-block!important;width:58.33333%!important}td.small-8,th.small-8{display:inline-block!important;width:66.66667%!important}td.small-9,th.small-9{display:inline-block!important;width:75%!important}td.small-10,th.small-10{display:inline-block!important;width:83.33333%!important}td.small-11,th.small-11{display:inline-block!important;width:91.66667%!important}td.small-12,th.small-12{display:inline-block!important;width:100%!important;padding:5px!important}.column td.small-12,.column th.small-12,.columns td.small-12,.columns th.small-12{display:block!important;width:100%!important}.body .column td.small-1,.body .column th.small-1,.body .columns td.small-1,.body .columns th.small-1,td.small-1 center,th.small-1 center{display:inline-block!important;width:8.33333%!important}.body .column td.small-2,.body .column th.small-2,.body .columns td.small-2,.body .columns th.small-2,td.small-2 center,th.small-2 center{display:inline-block!important;width:16.66667%!important}.body .column td.small-3,.body .column th.small-3,.body .columns td.small-3,.body .columns th.small-3,td.small-3 center,th.small-3 center{display:inline-block!important;width:25%!important}.body .column td.small-4,.body .column th.small-4,.body .columns td.small-4,.body .columns th.small-4,td.small-4 center,th.small-4 center{display:inline-block!important;width:33.33333%!important}.body .column td.small-5,.body .column th.small-5,.body .columns td.small-5,.body .columns th.small-5,td.small-5 center,th.small-5 center{display:inline-block!important;width:41.66667%!important}.body .column td.small-6,.body .column th.small-6,.body .columns td.small-6,.body .columns th.small-6,td.small-6 center,th.small-6 center{display:inline-block!important;width:50%!important}.body .column td.small-7,.body .column th.small-7,.body .columns td.small-7,.body .columns th.small-7,td.small-7 center,th.small-7 center{display:inline-block!important;width:58.33333%!important}.body .column td.small-8,.body .column th.small-8,.body .columns td.small-8,.body .columns th.small-8,td.small-8 center,th.small-8 center{display:inline-block!important;width:66.66667%!important}.body .column td.small-9,.body .column th.small-9,.body .columns td.small-9,.body .columns th.small-9,td.small-9 center,th.small-9 center{display:inline-block!important;width:75%!important}.body .column td.small-10,.body .column th.small-10,.body .columns td.small-10,.body .columns th.small-10,td.small-10 center,th.small-10 center{display:inline-block!important;width:83.33333%!important}.body .column td.small-11,.body .column th.small-11,.body .columns td.small-11,.body .columns th.small-11,td.small-11 center,th.small-11 center{display:inline-block!important;width:91.66667%!important}table.body td.small-offset-1,table.body th.small-offset-1{margin-left:8.33333%!important;Margin-left:8.33333%!important}table.body td.small-offset-2,table.body th.small-offset-2{margin-left:16.66667%!important;Margin-left:16.66667%!important}table.body td.small-offset-3,table.body th.small-offset-3{margin-left:25%!important;Margin-left:25%!important}table.body td.small-offset-4,table.body th.small-offset-4{margin-left:33.33333%!important;Margin-left:33.33333%!important}table.body td.small-offset-5,table.body th.small-offset-5{margin-left:41.66667%!important;Margin-left:41.66667%!important}table.body td.small-offset-6,table.body th.small-offset-6{margin-left:50%!important;Margin-left:50%!important}table.body td.small-offset-7,table.body th.small-offset-7{margin-left:58.33333%!important;Margin-left:58.33333%!important}table.body td.small-offset-8,table.body th.small-offset-8{margin-left:66.66667%!important;Margin-left:66.66667%!important}table.body td.small-offset-9,table.body th.small-offset-9{margin-left:75%!important;Margin-left:75%!important}table.body td.small-offset-10,table.body th.small-offset-10{margin-left:83.33333%!important;Margin-left:83.33333%!important}table.body td.small-offset-11,table.body th.small-offset-11{margin-left:91.66667%!important;Margin-left:91.66667%!important}table.body table.columns td.expander,table.body table.columns th.expander{display:none!important}table.body .right-text-pad,table.body .text-pad-right{padding-left:10px!important}table.body .left-text-pad,table.body .text-pad-left{padding-right:10px!important}table.menu{width:100%!important}table.menu td,table.menu th{width:auto!important;display:inline-block!important}table.menu.small-vertical td,table.menu.small-vertical th,table.menu.vertical td,table.menu.vertical th{display:block!important}table.button.expand{width:100%!important}}</style><table class="body" data-made-with-foundation="" style="Margin:0;background:#fff;border-collapse:collapse;border-spacing:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:1em;font-weight:400;height:100%;line-height:1.35em;margin:0;padding:0;text-align:left;vertical-align:top;width:100%"><tbody><tr style="padding:0;text-align:left;vertical-align:top"><td class="center" align="center" valign="top" style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:1em;font-weight:400;hyphens:auto;line-height:1.35em;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word"><center data-parsed="" style="min-width:580px;width:100%"><div class="top" align="center" style="background:#002E5E"><table class="container" style="Margin:0 auto;background:#002E5E;border-collapse:collapse;border-spacing:0;margin:0 auto;padding:0;text-align:inherit;vertical-align:top;width:580px"><tbody><tr style="padding:0;text-align:left;vertical-align:top"><td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:1em;font-weight:400;hyphens:auto;line-height:1.35em;margin:0;padding:0;padding-bottom:8px;padding-top:8px;text-align:left;vertical-align:top;word-wrap:break-word"><table class="row" style="border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%"><tbody><tr style="padding:0;text-align:left;vertical-align:top"><th class="small-12 large-12 columns" style="Margin:0 auto;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:1em;font-weight:400;line-height:1.35em;margin:0 auto;padding:0;padding-bottom:0;padding-left:8px;padding-right:8px;text-align:left;width:564px"><table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%"><tbody><tr style="padding:0;text-align:left;vertical-align:top"><th style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:1em;font-weight:400;line-height:1.35em;margin:0;padding:0;text-align:left"><p class="text-center" style="Margin:0;Margin-bottom:10px;color:#fff;font-family:Helvetica,Arial,sans-serif;font-size:.75em;font-weight:400;line-height:1.35em;margin:0;margin-bottom:10px;padding:0;text-align:center">Email not displaying correctly? Click <a href="[[web_link]]" style="color:#D5D9E1;font-weight:700;text-decoration:none">here</a> to view it in your browser.</p></th></tr></tbody></table></th></tr></tbody></table></td></tr></tbody></table></div><div class="header text-center" align="center" style="background:#D5D9E1"><table class="container" style="Margin:0 auto;background:#D5D9E1;border-collapse:collapse;border-spacing:0;margin:0 auto;padding:0;text-align:inherit;vertical-align:top;width:580px"><tbody><tr style="padding:0;text-align:left;vertical-align:top"><td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:1em;font-weight:400;hyphens:auto;line-height:1.35em;margin:0;padding:0;padding-bottom:16px;padding-top:16px;text-align:left;vertical-align:top;word-wrap:break-word"><table class="row collapse valign-middle" style="border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%"><tbody><tr style="padding:0;text-align:left;vertical-align:top"><th class="small-12 large-6 columns first" style="Margin:0 auto;color:#0a0a0a;display:table-cell;float:none;font-family:Helvetica,Arial,sans-serif;font-size:1em;font-weight:400;line-height:1.35em;margin:0 auto;padding:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;vertical-align:middle;width:298px"><table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%"><tbody><tr style="padding:0;text-align:left;vertical-align:top"><th style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:1em;font-weight:400;line-height:1.35em;margin:0;padding:0;text-align:left"><a href="http://www.slcatlanta.org/index.php" style="color:#002E5E;font-weight:700;text-decoration:none"><img src="http://www.slcatlanta.org/images/slclogotransparent.png" alt="SLC Logo" class="small-float-center" style="-ms-interpolation-mode:bicubic;border:none;clear:both;display:block;max-width:100%;outline:0;text-decoration:none"></a></th></tr></tbody></table></th><th class="small-12 large-6 columns last" style="Margin:0 auto;color:#0a0a0a;display:table-cell;float:none;font-family:Helvetica,Arial,sans-serif;font-size:1em;font-weight:400;line-height:1.35em;margin:0 auto;padding:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;vertical-align:middle;width:298px"><table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%"><tbody><tr style="padding:0;text-align:left;vertical-align:top"><th style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:1em;font-weight:400;line-height:1.35em;margin:0;padding:0;text-align:left"><p class="text-right small-text-center" style="Margin:0;Margin-bottom:10px;color:#000;font-family:Helvetica,Arial,sans-serif;font-size:.9em;font-weight:400;line-height:1.35em;margin:0;margin-bottom:10px;padding:0;text-align:right"><strong>New <em>SLC Regional Resource<br></em>Now Available</strong></p><p class="text-right small-text-center" style="Margin:0;Margin-bottom:10px;color:#000;font-family:Helvetica,Arial,sans-serif;font-size:.9em;font-weight:400;line-height:1.35em;margin:0;margin-bottom:10px;padding:0;text-align:right"><em>Heroin Epidemic in SLC Member States: Finding Solutions</em></p></th></tr></tbody></table></th></tr></tbody></table></td></tr></tbody></table></div><table class="container text-center" style="Margin:0 auto;background:#fefefe;border-collapse:collapse;border-spacing:0;margin:0 auto;padding:0;text-align:center;vertical-align:top;width:580px"><tbody><tr style="padding:0;text-align:left;vertical-align:top"><td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:1em;font-weight:400;hyphens:auto;line-height:1.35em;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word"><table class="row" style="border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%"><tbody><tr style="padding:0;text-align:left;vertical-align:top"><th class="small-12 large-12 columns" style="Margin:0 auto;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:1em;font-weight:400;line-height:1.35em;margin:0 auto;padding:0;padding-bottom:16px;padding-left:8px;padding-right:8px;text-align:left;width:564px"><table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%"><tbody><tr style="padding:0;text-align:left;vertical-align:top"><th style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:1em;font-weight:400;line-height:1.35em;margin:0;padding:0;text-align:left"><br><h1 style="Margin:0;Margin-bottom:10px;color:inherit;font-family:Helvetica,Arial,sans-serif;font-size:34px;font-weight:400;line-height:1.3;margin:0;margin-bottom:10px;padding:0;text-align:left;word-wrap:normal"><a href="http://www.slcatlanta.org/Publications/HSPS/HeroinEpidemic.pdf" style="color:#002E5E;font-weight:700;text-decoration:none"><img src="http://www.slcatlanta.org/images/heroinslide.jpg" alt="SLC Regional Resource on Southern Heroin Epidemic" class="float-center" style="-ms-interpolation-mode:bicubic;Margin:0 auto;border:none;clear:both;display:block;float:none;margin:0 auto;max-width:100%;outline:0;text-align:center;text-decoration:none"></a></h1><p class="lead" style="Margin:0;Margin-bottom:10px;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:1.4em;font-weight:400;line-height:1.5em;margin:0;margin-bottom:10px;padding:0;text-align:left">The Southern Legislative Conference (SLC) of The Council of State Governments has released its most recent <a href="http://www.slcatlanta.org/Publications/HSPS/HeroinEpidemic.pdf" style="color:#002E5E;font-weight:700;text-decoration:none"><em><strong>Regional Resource</strong></em>, <em>Heroin Epidemic in SLC Member States: Finding Solutions</em></a>.</p><p style="Margin:0;Margin-bottom:10px;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:1em;font-weight:400;line-height:1.35em;margin:0;margin-bottom:10px;padding:0;text-align:left">While the heroin epidemic largely has been concentrated in the Northeast, Appalachian, and Midwest regions of the country, substance abuse is an issue that crosses multiple areas of public policy, including behavioral and public health, criminal justice, and social services. As the South continues to lead the way in criminal justice reform, lessons from the plight of other regions allow SLC lawmakers to build on their efforts to combat prescription drug abuse and take a proactive stance in the heroin epidemic. In recent years, this awareness has led many SLC states to pass laws which expand availability and access to drugs that can help treat an opioid overdose and provide limited immunity from prosecution for individuals who seek medical assistance for themselves or another person experiencing an opioid overdose.</p><p style="Margin:0;Margin-bottom:10px;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:1em;font-weight:400;line-height:1.35em;margin:0;margin-bottom:10px;padding:0;text-align:left">This <em><strong>SLC Regional Resource</strong></em> examines what the SLC member states are doing to combat the heroin epidemic and what policies and/or practices can be implemented to mitigate its side effects and ensure a long-term solution.</p><table class="button expand" style="Margin:0 0 16px 0;border-collapse:collapse;border-spacing:0;margin:0 0 16px 0;padding:0;text-align:left;vertical-align:top;width:100%!important"><tbody><tr style="padding:0;text-align:left;vertical-align:top"><td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:1em;font-weight:400;hyphens:auto;line-height:1.35em;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word"><table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%"><tbody><tr style="padding:0;text-align:left;vertical-align:top"><td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;background:#002E5E;border:2px solid #9E8E63;border-collapse:collapse!important;color:#fefefe;font-family:Helvetica,Arial,sans-serif;font-size:1em;font-weight:400;hyphens:auto;line-height:1.35em;margin:0;padding:0;text-align:left;vertical-align:top;width:auto!important;word-wrap:break-word"><center data-parsed="" style="min-width:0;width:100%"><a href="http://www.slcatlanta.org/Publications/HSPS/HeroinEpidemic.pdf" align="center" class="text-center" style="border:0 solid #9E8E63;border-radius:3px;color:#fefefe;display:inline-block;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:700;padding:8px 16px 8px 16px;text-align:center;text-decoration:none;width:calc(100%-20px)">Download the full report</a></center></td></tr></tbody></table></td></tr></tbody></table></th></tr></tbody></table><table class="row" style="border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%"><tbody><tr style="padding:0;text-align:left;vertical-align:top"><th class="small-12 large-6 columns first" style="Margin:0 auto;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:1em;font-weight:400;line-height:1.35em;margin:0 auto;padding:0;padding-bottom:16px;padding-left:16px;padding-right:8px;text-align:left;width:50%"><table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%"><tbody><tr style="padding:0;text-align:left;vertical-align:top"><th style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:1em;font-weight:400;line-height:1.35em;margin:0;padding:0;text-align:left"><h5 style="Margin:0;Margin-bottom:10px;color:inherit;font-family:Helvetica,Arial,sans-serif;font-size:20px;font-weight:400;line-height:1.3;margin:0;margin-bottom:10px;padding:0;text-align:left;word-wrap:normal">For further information and details contact:</h5><p style="Margin:0;Margin-bottom:10px;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:1em;font-weight:400;line-height:1.35em;margin:0;margin-bottom:10px;padding:0;text-align:left">Roger Moore<br>Policy Analyst<br>Southern Legislative Conference<br>Phone: 404-633-1866<br>Email: <a href="mailto:rmoore@csg.org" style="color:#002E5E;font-weight:700;text-decoration:none"><em>rmoore@csg.org</em></a></p></th></tr></tbody></table></th><th class="small-12 large-6 columns last" style="Margin:0 auto;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:1em;font-weight:400;line-height:1.35em;margin:0 auto;padding:0;padding-bottom:16px;padding-left:8px;padding-right:16px;text-align:left;width:50%"><table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%"><tbody><tr style="padding:0;text-align:left;vertical-align:top"><th style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:1em;font-weight:400;line-height:1.35em;margin:0;padding:0;text-align:left"><h5 style="Margin:0;Margin-bottom:10px;color:inherit;font-family:Helvetica,Arial,sans-serif;font-size:20px;font-weight:400;line-height:1.3;margin:0;margin-bottom:10px;padding:0;text-align:left;word-wrap:normal">More recent publications from the SLC Human Services &amp;amp; Public Safety Committee</h5><ul style="padding:0 15px"><li><a href="http://www.slcatlanta.org/Publications/HSPS/EbolaIssueAlert.pdf" style="color:#002E5E;font-weight:700;text-decoration:none">State of Preparation: SLC States and the Ebola Virus</a><a href="#" style="color:#002E5E;font-weight:700;text-decoration:none"></a></li><li><a href="http://www.slcatlanta.org/Publications/cdrs/2014/2014_CDR_MEDICAID.pdf" style="color:#002E5E;font-weight:700;text-decoration:none">Comparative Data Report: Medicaid</a><a href="#" style="color:#002E5E;font-weight:700;text-decoration:none"></a></li><li><a href="http://www.slcatlanta.org/Publications/HSPS/medicalmarijuanaweb.pdf" style="color:#002E5E;font-weight:700;text-decoration:none">A Special Condition: Medical Marijuana in SLC States</a><a href="#" style="color:#002E5E;font-weight:700;text-decoration:none"></a></li></ul></th></tr></tbody></table></th></tr></tbody></table><table class="row" style="border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%"><tbody><tr style="padding:0;text-align:left;vertical-align:top"><th class="small-12 large-6 columns first" style="Margin:0 auto;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:1em;font-weight:400;line-height:1.35em;margin:0 auto;padding:0;padding-bottom:16px;padding-left:16px;padding-right:8px;text-align:left;width:50%"><table class="callout" style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%"><tbody><tr style="padding:0;text-align:left;vertical-align:top"><th class="callout-inner primary" style="Margin:0;background:#002E5E;border:1px solid #9E8D62;color:#fff;font-family:Helvetica,Arial,sans-serif;font-size:1em;font-weight:400;line-height:1.35em;margin:0;padding:5px;text-align:left;width:100%"><p class="text-center" style="Margin:0;Margin-bottom:10px;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:1em;font-weight:400;line-height:1.35em;margin:0!important;margin-bottom:10px;padding:0;text-align:center"><small style="color:#cacaca;font-size:80%"><a href="[[forward_link]]" style="color:#fff;font-weight:700;text-decoration:none">Forward this email</a></small></p></th></tr></tbody></table></th><th class="small-12 large-6 columns last" style="Margin:0 auto;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:1em;font-weight:400;line-height:1.35em;margin:0 auto;padding:0;padding-bottom:16px;padding-left:8px;padding-right:16px;text-align:left;width:50%"><table class="callout" style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%"><tbody><tr style="padding:0;text-align:left;vertical-align:top"><th class="callout-inner primary" style="Margin:0;background:#002E5E;border:1px solid #9E8D62;color:#fff;font-family:Helvetica,Arial,sans-serif;font-size:1em;font-weight:400;line-height:1.35em;margin:0;padding:5px;text-align:left;width:100%"><p class="text-center" style="Margin:0;Margin-bottom:10px;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:1em;font-weight:400;line-height:1.35em;margin:0!important;margin-bottom:10px;padding:0;text-align:center"><small style="color:#cacaca;font-size:80%"><a href="[[unsubscribe]]" title="One click unsubscribe" style="color:#fff;font-weight:700;text-decoration:none">Unsubscribe</a></small></p></th></tr></tbody></table></th></tr></tbody></table></th></tr></tbody></table></td></tr></tbody></table><div class="bottom text-center" align="center" style="background:#9E8D62"><table class="container" style="Margin:0 auto;background:#9E8D62;border-collapse:collapse;border-spacing:0;margin:0 auto;padding:0;text-align:inherit;vertical-align:top;width:580px"><tbody><tr style="padding:0;text-align:left;vertical-align:top"><td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:1em;font-weight:400;hyphens:auto;line-height:1.35em;margin:0;padding:0;padding-bottom:8px;padding-top:8px;text-align:left;vertical-align:top;word-wrap:break-word"><table class="row collapse valign-middle" style="border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%"><tbody><tr style="padding:0;text-align:left;vertical-align:top"><th class="small-12 large-6 columns first" style="Margin:0 auto;color:#0a0a0a;display:table-cell;float:none;font-family:Helvetica,Arial,sans-serif;font-size:1em;font-weight:400;line-height:1.35em;margin:0 auto;padding:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;vertical-align:middle;width:298px"><table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%"><tbody><tr style="padding:0;text-align:left;vertical-align:top"><th style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:1em;font-weight:400;line-height:1.35em;margin:0;padding:0;text-align:left"><p class="small-text-center" style="Margin:0;Margin-bottom:10px;color:#000;font-family:Helvetica,Arial,sans-serif;font-size:.75em;font-weight:400;line-height:1.35em;margin:0;margin-bottom:10px;padding:0;text-align:left"><strong>Southern Office of<br>The Council of State Governments</strong><br><a href="http://www.slcatlanta.org" style="color:#002E5E;font-weight:700;text-decoration:none"><em>www.slcatlanta.or</em>g<br></a>phone: (404) 633-1866<br>fax: (404) 633-4896<br>email: <a href="mailto:slc@csg.org" style="color:#002E5E;font-weight:700;text-decoration:none"><em>slc@csg.org<br></em></a>P.O. Box 98129<br>Atlanta, Georgia 30359</p></th></tr></tbody></table></th><th class="small-12 large-6 columns last" style="Margin:0 auto;color:#0a0a0a;display:table-cell;float:none;font-family:Helvetica,Arial,sans-serif;font-size:1em;font-weight:400;line-height:1.35em;margin:0 auto;padding:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;vertical-align:middle;width:298px"><table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%"><tbody><tr style="padding:0;text-align:left;vertical-align:top"><th style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:1em;font-weight:400;line-height:1.35em;margin:0;padding:0;text-align:left"><p class="small-text-center" style="Margin:0;Margin-bottom:10px;color:#000;font-family:Helvetica,Arial,sans-serif;font-size:.75em;font-weight:400;line-height:1.35em;margin:0;margin-bottom:10px;padding:0;text-align:left"><strong>The Southern Legislative Conference</strong>(SLC) of The Council of State Governments was established in 1947 and is composed of the presiding officers and key legislators from 15 Southern states. The SLC is a non-partisan organization located in Atlanta, Georgia.</p><p style="Margin:0;Margin-bottom:10px;color:#000;font-family:Helvetica,Arial,sans-serif;font-size:.75em;font-weight:400;line-height:1.35em;margin:0;margin-bottom:10px;padding:0;text-align:left">&amp;nbsp;</p><p style="Margin:0;Margin-bottom:10px;color:#000;font-family:Helvetica,Arial,sans-serif;font-size:.75em;font-weight:400;line-height:1.35em;margin:0;margin-bottom:10px;padding:0;text-align:left"><a href="http://www.slcatlanta.org" style="color:#002E5E;font-weight:700;text-decoration:none"><img class="float-center" src="http://www.slcatlanta.org/images/serving2.png" alt="Serving the South logo" style="-ms-interpolation-mode:bicubic;Margin:0 auto;border:none;clear:both;display:block;float:none;margin:0 auto;max-width:100%;outline:0;text-align:center;text-decoration:none"></a></p></th></tr></tbody></table></th></tr></tbody></table></td></tr></tbody></table></div></center></td></tr></tbody></table><p class="hide-for-small hide-for-desktop hide-for-large" style="Margin:0;Margin-bottom:10px;color:#0a0a0a;display:none;font-family:Helvetica,Arial,sans-serif;font-size:1em;font-weight:400;line-height:1.35em;margin:0;margin-bottom:10px;mso-hide:all;padding:0;text-align:left" title="Web beacon">[[tracking_beacon]]</p></body></html>
\ No newline at end of file
index b34014a6fb2364c3817fbf208704794087bbe249..21b95d514a221ec41a54d6ff2a8aafa850a44ed2 100644 (file)
@@ -125,6 +125,8 @@ In the Ink 1.0, we needed extra tags to support a wrapper element. This used to
 
 In Foundation for Emails 2, we’ve eliminated another tag in an effort to simplify your markup. Gutters are now directly applied to the column element itself. We still need to identify the last column with a `.last` class, and now the first column element with the `.first` class. If you have columns in the middle of first and last, they don't need a `.first` or `.last` class.
 
+Also, we stitched `<td>`'s to `<th>`'s because that allows Android 4 native to be responsive - win!
+
 ```
 <table class="container">
   <tr>
index 04b9e9e5eaa575dbb616faaa2c08214761b7b268..7358344bbd527e4724154f1cbcd3c488da71cfc7 100644 (file)
@@ -3,11 +3,11 @@ title: Tips &amp; Tricks
 description: We've put together some Responsive Emails Tips &amp; Tricks that will help you navigate the mine field that is coding HTML emails.
 ---
 
-Coding responsive emails can be a real pain. This guide will help you through some of the the most common issues you'd face.
+Coding responsive emails can be a real pain. This guide will help you through some of the the most common issues you'd face. It's a living document and will be updated periodically.
 
 ## Why Foundation for Emails
 
-
+Foundation for Emails, especially with Inky, help abstract away much of the pain of HTML email development. It's more than responsive templates you can use. 
 
 ## Need to know
 
@@ -41,7 +41,66 @@ If you are using the CSS version, you can use our [web inliner](http://foundatio
 
 ## HTML
 
+When it comes to making emails, `<div>`'s aren’t a thing. Don’t kill the messenger, but it’s true. For structural purposes at least. `<div>`'s can still be used for targeting CSS and for grouping semantically related elements, but shouldn’t be used for spacing or background colors.
+
+Tables are still the standard. 
+
+For those of you who haven’t used tables since Netscape Navigator (or ever) here’s a quick recap.
+
+There are three main tags in a table. The `<table>` tag wraps the entire table. The `<tr>` tag denotes a row. The `<td>` tag is used to wrap a table cell.
+
+```
+
+Some web browsers may be forgiving, but it’s important to include all three tags. Don’t get lazy and skip the `<tr>`. Email clients can be unpredictable, so the first step to good rendering is to have valid markup. 
+
+It makes debugging and sharing code a lot easier when you’re consistent. It lets other developers get oriented within the code and makes it easier to tell what you’re looking at, just like consistent indentation and comments.
+
+While semantic, the “table row” and “table data” elements aren’t that helpful for creating row and column layouts. They’re designed for spreadsheets or other *non-uniform* grids. They can’t be used structurally.
+
+Instead, we use nested tables. Think of a bunch of single-cell spreadsheets being nested.
+
+Where we would have `<div>`'s in website land…
+
+```html
+<div class="row">
+  <div class="small-12 columns">
+    <!-- Content -->
+  </div>
+</div>
+```
+
+…we have tables in email world. 
+
+```html
+<table class="container">
+  <tr>
+    <td>
+      <table class="row">
+        <tr>
+          <th class="first last small-12 large-12 columns">
+
+          </th>
+        </tr>
+      </table>
+    <th class="expander"></th>
+    </td>
+  </tr>
+</table>
+```
+
+A (`<table>`, `<tr>`, `<td>`) triplet is *almost*, but not quite, a one-to-one replacement for a structural `<div>`.
+
+Table elements have their own special “display” values. Sometimes we can override them to display as block elements. The display value (in combination with the HTML schema specified in the DOCTYPE), specifies the rules for rendering each element.
+
+Tables have all sorts of fancy HTML attributes not all of which can be set in CSS.
 
+```html
+<table align="center" valign="top" cellspacing="0">
+  …
+</table>
+```
+
+Some inliners (like Premailer and our inliner) will take care of this for you. This is unfortunate because separation of concerns dictates that we should try and keep our structure in the markup (HTML) and styles in the CSS, but alas HTML email is far from a perfect world.
 
 ## CSS
 
@@ -51,6 +110,10 @@ Support of CSS properties varies greatly between email clients. You're best off
 This guide will really save you some pain when writing CSS:
 [CSS Support Chart](https://www.campaignmonitor.com/css/b/)
 
+You should only set classes and IDs on `<tables>` or `<td>`/`<th>` tags, not `<tr>` tags. 
+
+If you need to apply padding, only do that on a `<td>`/`<th>` as well. Been there, done that — we had a lot of trouble of this while building Foundation for Emails. Your milage may vary, but just trying to help you out by saving you some time.
+
 For some things you can do and work-arounds, see the <a href="#progressive-enhancement">Progressive Enhancement</a> section below.
 
 ## JavaScript
@@ -85,10 +148,8 @@ Use it like this:
 <a id="progressive-enhancement"></a>
 ## Progressive Enhancement
 
+Think of any extra CSS you may use as upward-compatibility. You can always include some header style CSS if you want, but think of it as a bonus for people using email clients that support it. Then turn it off completely and make sure the design still makes sense.
 
-Tables are still the standard.
-
-Take a look at the code of almost any HTML email you've gotten. I'll bet ya it's formatted with a table. Tables are still the best way to achieve consistent results across email clients. The email equivalent of the browser window is the "viewport", or the area in an email client dedicated to showing the actual email. This varies quite a bit. A vary common technique is to set a table with a 100% width with a nested table inside of it that is centered with a static width. This seems to work very well. The outer table is also your big chance to set the background-color for the whole email. Too bad we can't just use a div with auto left and right margins for centering, but it won't work most email clients.
 
 What you CAN'T do:
 
index c42c5d6b707179416f013d732ab686e147a33710..b387ced9319875fa2e5d37de4f3ae079a119802f 100644 (file)
@@ -31,4 +31,7 @@
 
   <li class="docs-nav-title">Libraries</li>
   <li><a href="panini.html">Panini (Handlebars)</a></li>
+
+  <li class="docs-nav-title">Older Versions</li>
+  <li><a href="http://foundation.zurb.com/emails/docs/v1.0.5/index.html">v1 (Ink)</a></li>
 </ul>