Skip to content

Instantly share code, notes, and snippets.

@mikestreety

mikestreety/content.json

Created June 6, 2014 13:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mikestreety/f32e8e0fd98692bcc9e4 to your computer and use it in GitHub Desktop.
Save mikestreety/f32e8e0fd98692bcc9e4 to your computer and use it in GitHub Desktop.
Download ZIP
Sass Newsletter
Raw
content.json
{
"title" : "Welcome to Issue #17",
"intro_text" : "This issue features fun, frolics and even more articles from Hugo!",
"featured" : [{
"image" : "http://s30.postimg.org/7j2cpmqr5/hero.jpg",
"link" : "http://geek-rocket.de/frontend-development/scss-styleguide-with-bem-oocss-smacss/",
"title" : "Scss-Styleguide with BEM, OOCSS & SMACSS",
"text" : "Here's another great walk through of a Sass-y document styleguide and folder system."
}],
"content" : [{
"title" : "Headlines",
"stories" : [{
"link" : "http://sassconf.com/speaking/",
"title" : "Speak at Sassconf",
"text" : "Got a great idea for a talk or workshop? The closing date for submissions to this years Sassconf has been extended to May 30th. "
}, {
"link" : "http://sassconf.com/speaking/",
"title" : "Speak at Sassconf",
"text" : "Got a great idea for a talk or workshop? The closing date for submissions to this years Sassconf has been extended to May 30th. "
}]
},
{
"title" : "In Other News...",
"stories" : [{
"link" : "http://sassconf.com/speaking/",
"title" : "Speak at Sassconf",
"text" : "Got a great idea for a talk or workshop? The closing date for submissions to this years Sassconf has been extended to May 30th. "
}, {
"link" : "http://sassconf.com/speaking/",
"title" : "Speak at Sassconf",
"text" : "Got a great idea for a talk or workshop? The closing date for submissions to this years Sassconf has been extended to May 30th. "
}]
}]
}
Raw
email.php
<?php $email = json_decode(file_get_contents('content.json')); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title><?=$email->title?></title>
<style type="text/css">
#outlook a{padding:0;}
.ExternalClass,.ExternalClass p,.ExternalClass span,.ExternalClass font,.ExternalClass td,.ExternalClass div{line-height:100%;}
body,table,td,p,a,li,blockquote{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
table,td{mso-table-lspace:0;mso-table-rspace:0;}
img{-ms-interpolation-mode:bicubic;border:0;height:auto;line-height:100%;outline:none;text-decoration:none;}
body{margin:0;padding:0;}
table{border-collapse:collapse!important;}
body,#bodyTable,#bodyCell{height:100%!important;width:100%!important;background:#f9f9f9;margin:0;padding:0;}
#bodyCell{padding:20px;}
#templateContainer{width:600px;border:3px solid #ca6099;}
h1{color:#202020!important;display:block;font-family:HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-size:26px;font-style:normal;font-weight:400;line-height:100%;letter-spacing:normal;text-align:left;margin:0 0 10px;}
h2{color:#404040!important;display:block;font-family:HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-size:25px;font-style:normal;font-weight:500;line-height:100%;letter-spacing:normal;text-align:left;margin:0 0 20px;}
h3{color:#606060!important;display:block;font-family:HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-size:16px;font-style:italic;font-weight:500;line-height:100%;letter-spacing:normal;text-align:left;margin:0 0 10px;}
h4{color:gray!important;display:block;font-family:HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-size:18px;font-weight:500;line-height:100%;letter-spacing:normal;text-align:left;margin:0 0 10px;}
#templatePreheader{background-color:#fff;border-bottom:1px solid #CCC;}
.preheaderContent{color:gray;font-family:HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-size:10px;line-height:125%;text-align:left;}
.headerContent{color:#505050;font-family:HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-size:20px;font-weight:700;line-height:100%;text-align:left;vertical-align:middle;padding:0; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;;}
.headerContent a:link,.headerContent a:visited,.headerContent a .yshortcuts{color:#EB4102;font-weight:500;text-decoration:underline;}
#headerImage{height:auto;max-width:600px;}
.bodyContent{color:#505050;font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;font-size:14px;line-height:150%;text-align:left;padding:20px; padding-bottom: 0; background: #fff}
.bodyContent a:link,.bodyContent a:visited,.bodyContent a .yshortcuts{color:#ca6099;font-weight:500;text-decoration:underline;}
.bodyContent img{display:inline;height:auto;max-width:560px;}
#templateFooter{background-color:#fff;border-top:1px solid #FFF;}
.footerContent{color:gray;font-family:HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-size:10px;line-height:150%;text-align:left;padding:20px;}
.ReadMsgBody,.ExternalClass{width:100%;}
.preheaderContent a:link,.preheaderContent a:visited,.preheaderContent a .yshortcuts,.footerContent a:link,.footerContent a:visited,.footerContent a .yshortcuts,.footerContent a span{color:#606060;font-weight:500;text-decoration:underline;}
#templateHeader,#templateBody{background-color:#fff;border-top:1px solid #FFF;}
@media (max-width: 480px){
body,table,td,p,a,li,blockquote{-webkit-text-size-adjust:none!important;}
body{width:100%!important;min-width:100%!important;}
#bodyCell{padding:10px!important;}
#templateContainer{max-width:600px!important;width:100%!important;}
h1{font-size:24px!important;line-height:100%!important;}
h2{font-size:20px!important;line-height:100%!important;}
h3{font-size:18px!important;line-height:100%!important;}
h4{font-size:16px!important;line-height:100%!important;}
#templatePreheader{display:none!important;}
#headerImage{height:auto!important;max-width:600px!important;width:100%!important;}
.headerContent{font-size:20px!important;line-height:125%!important;}
.bodyContent{font-size:18px!important;line-height:125%!important;}
.footerContent{font-size:14px!important;line-height:115%!important;}
.footerContent a{display:block!important;}
}
</style>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;margin: 0;padding: 0;background: #f9f9f9;height: 100%!important;width: 100%!important;">
<center>
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;background: #f9f9f9;margin: 0;padding: 0;border-collapse: collapse!important;height: 100%!important;width: 100%!important;">
<tr>
<td align="center" valign="top" id="bodyCell" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;background: #f9f9f9;margin: 0;padding: 20px;height: 100%!important;width: 100%!important;">
<!-- BEGIN TEMPLATE // -->
<table border="0" cellpadding="0" cellspacing="0" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;border-collapse: collapse!important;"><tr><td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;"><div style="display: block; margin-bottom: 10px; font-size: 12px; font-family: Arial;">Email not displaying correctly? <a style="color: #CA6099;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;" href="*|ARCHIVE|*" target="_blank">View it in your browser</a>.</div></td></tr></table>
<table border="0" cellpadding="0" cellspacing="0" id="templateContainer" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;width: 600px;border: 3px solid #ca6099;border-collapse: collapse!important;">
<tr>
<td align="center" valign="top" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;">
<!-- BEGIN HEADER // -->
<table border="0" cellpadding="0" cellspacig="0" width="100%" id="templateHeader" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;background-color: #fff;border-top: 1px solid #FFF;border-collapse: collapse!important;">
<tr>
<td valign="top" class="bodyContent" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;color: #505050;font-family: Arial,&quot;Helvetica Neue&quot;,Helvetica,sans-serif;font-size: 14px;line-height: 150%;text-align: left;padding: 20px;padding-bottom: 0;background: #fff;">
<img src="http://www.alwaystwisted.com/Sassnews-logo.png" style="max-width: 160px;-ms-interpolation-mode: bicubic;border: 0;height: auto;line-height: 100%;outline: none;text-decoration: none;display: inline;" mc:label="header_image" mc:edit="header_image">
</td>
</tr>
<tr>
<td valign="top" class="bodyContent" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;color: #505050;font-family: Arial,&quot;Helvetica Neue&quot;,Helvetica,sans-serif;font-size: 14px;line-height: 150%;text-align: left;padding: 20px;padding-bottom: 0;background: #fff;">
<h1 style="display: block;font-family: HelveticaNeue-Light,&quot;Helvetica Neue Light&quot;,&quot;Helvetica Neue&quot;,Helvetica,Arial,&quot;Lucida Grande&quot;,sans-serif;font-size: 26px;font-style: normal;font-weight: 400;line-height: 100%;letter-spacing: normal;text-align: left;margin: 0 0 10px;color: #202020!important;"><?=$email->title?></h1>
<?=$email->intro_text?>
<br><br>
</td>
</tr>
</table>
</td>
</tr>
<?php foreach($email->featured as $f) : ?>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateHeader" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;border-collapse: collapse!important;">
<tr>
<td valign="top" class="headerContent" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;color: #505050;font-family: HelveticaNeue-Light,&quot;Helvetica Neue Light&quot;,&quot;Helvetica Neue&quot;,Helvetica,Arial,&quot;Lucida Grande&quot;,sans-serif;font-size: 20px;font-weight: 700;line-height: 100%;text-align: left;vertical-align: middle;padding: 0;border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;">
<a href="<?=$f->url?>" style="text-decoration: none;color: #ca6099;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;font-weight: 500;"><img src="<?=$f->image?>" style="max-width: 600px;-ms-interpolation-mode: bicubic;border: 0;height: auto;line-height: 100%;outline: none;text-decoration: none;" id="headerImage" mc:label="header_image" id="headerImage" mc:label="header_image" mc:edit="header_image" /></a>
</td>
</tr>
</table>
<!-- // END HEADER -->
</td>
</tr>
<tr>
<td align="center" valign="top" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;">
<!-- BEGIN BODY // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;border-collapse: collapse!important;">
<tr>
<td valign="top" class="bodyContent" mc:edit="body_content" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;color: #505050;font-family: Arial,&quot;Helvetica Neue&quot;,Helvetica,sans-serif;font-size: 14px;line-height: 150%;text-align: left;padding: 20px;padding-bottom: 0;background: #fff;">
<h1 style="display: block;font-family: HelveticaNeue-Light,&quot;Helvetica Neue Light&quot;,&quot;Helvetica Neue&quot;,Helvetica,Arial,&quot;Lucida Grande&quot;,sans-serif;font-size: 26px;font-style: normal;font-weight: 400;line-height: 100%;letter-spacing: normal;text-align: left;margin: 0 0 10px;color: #202020!important;"><a href="<?=$f->url?>" style="text-decoration: none;color: #ca6099;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;font-weight: 500;"><?=$f->title?></a></h1>
<?=$f->text?>
</td>
</tr>
</table>
</td>
</tr>
<?php endforeach; ?>
<tr>
<td align="center" valign="top" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;">
<!-- BEGIN BODY // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateBody" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;background-color: #fff;border-top: 1px solid #FFF;border-collapse: collapse!important;">
<tr>
<td valign="top" class="bodyContent" mc:edit="body_content" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;color: #505050;font-family: Arial,&quot;Helvetica Neue&quot;,Helvetica,sans-serif;font-size: 14px;line-height: 150%;text-align: left;padding: 20px;padding-bottom: 0;background: #fff;">
<?php foreach($email->content as $content) : ?>
<p style="border-top: 3px solid #ca6099;margin-top: 0;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;"></p>
<h2 style="display: block;font-family: HelveticaNeue-Light,&quot;Helvetica Neue Light&quot;,&quot;Helvetica Neue&quot;,Helvetica,Arial,&quot;Lucida Grande&quot;,sans-serif;font-size: 25px;font-style: normal;font-weight: 500;line-height: 100%;letter-spacing: normal;text-align: left;margin: 0 0 20px;color: #404040!important;"><?=$content->title?></h2>
<?php foreach($content->stories as $s) : ?>
<h4 style="display: block;font-family: HelveticaNeue-Light,&quot;Helvetica Neue Light&quot;,&quot;Helvetica Neue&quot;,Helvetica,Arial,&quot;Lucida Grande&quot;,sans-serif;font-size: 18px;font-weight: 500;line-height: 100%;letter-spacing: normal;text-align: left;margin: 0 0 10px;color: gray!important;"><a href="<?=$s->link?>" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;color: #ca6099;font-weight: 500;text-decoration: underline;"><?=$s->title?></a></h4>
<?=$s->text?>
<br />
<br />
<?php endforeach;?>
<?php endforeach; ?>
<p style="border-top: 3px solid #ca6099; margin-top: 0;"></p>
</td>
</tr>
</table>
<!-- // END BODY -->
</td>
</tr>
<tr>
<td align="center" valign="top" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;">
<!-- BEGIN FOOTER // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateFooter" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;background-color: #fff;border-top: 1px solid #FFF;border-collapse: collapse!important;">
<tr>
<td valign="top" class="footerContent" style="padding-top: 0;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;color: gray;font-family: HelveticaNeue-Light,&quot;Helvetica Neue Light&quot;,&quot;Helvetica Neue&quot;,Helvetica,Arial,&quot;Lucida Grande&quot;,sans-serif;font-size: 10px;line-height: 150%;text-align: left;padding: 20px;" mc:edit="footer_content01">
<em>Copyright &copy; *|CURRENT_YEAR|* *|LIST:COMPANY|*, All rights reserved.</em>
<br>
*|IFNOT:ARCHIVE_PAGE|* *|LIST:DESCRIPTION|*
<br>
<br>
<strong>Our mailing address is:</strong>
<br>
*|HTML:LIST_ADDRESS_HTML|* *|END:IF|*
</td>
</tr>
<tr>
<td valign="top" class="footerContent" style="padding-top: 0;padding-bottom: 40px;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;color: gray;font-family: HelveticaNeue-Light,&quot;Helvetica Neue Light&quot;,&quot;Helvetica Neue&quot;,Helvetica,Arial,&quot;Lucida Grande&quot;,sans-serif;font-size: 10px;line-height: 150%;text-align: left;padding: 20px;" mc:edit="footer_content02">
<a href="*|UNSUB|*" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;color: #606060;font-weight: 500;text-decoration: underline;">unsubscribe from this list</a>&nbsp;&nbsp;&nbsp;<a href="*|UPDATE_PROFILE|*" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;color: #606060;font-weight: 500;text-decoration: underline;">update subscription preferences</a>&nbsp;
</td>
</tr>
</table>
<!-- // END FOOTER -->
</td>
</tr>
</table>
<!-- // END TEMPLATE -->
</td>
</tr>
</table>
</center>
</body>
</html>
Raw
gistfile1.txt
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Welcome to Issue #17</title>
<style type="text/css">
#outlook a{padding:0;}
.ExternalClass,.ExternalClass p,.ExternalClass span,.ExternalClass font,.ExternalClass td,.ExternalClass div{line-height:100%;}
body,table,td,p,a,li,blockquote{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
table,td{mso-table-lspace:0;mso-table-rspace:0;}
img{-ms-interpolation-mode:bicubic;border:0;height:auto;line-height:100%;outline:none;text-decoration:none;}
body{margin:0;padding:0;}
table{border-collapse:collapse!important;}
body,#bodyTable,#bodyCell{height:100%!important;width:100%!important;background:#f9f9f9;margin:0;padding:0;}
#bodyCell{padding:20px;}
#templateContainer{width:600px;border:3px solid #ca6099;}
h1{color:#202020!important;display:block;font-family:HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-size:26px;font-style:normal;font-weight:400;line-height:100%;letter-spacing:normal;text-align:left;margin:0 0 10px;}
h2{color:#404040!important;display:block;font-family:HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-size:25px;font-style:normal;font-weight:500;line-height:100%;letter-spacing:normal;text-align:left;margin:0 0 20px;}
h3{color:#606060!important;display:block;font-family:HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-size:16px;font-style:italic;font-weight:500;line-height:100%;letter-spacing:normal;text-align:left;margin:0 0 10px;}
h4{color:gray!important;display:block;font-family:HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-size:18px;font-weight:500;line-height:100%;letter-spacing:normal;text-align:left;margin:0 0 10px;}
#templatePreheader{background-color:#fff;border-bottom:1px solid #CCC;}
.preheaderContent{color:gray;font-family:HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-size:10px;line-height:125%;text-align:left;}
.headerContent{color:#505050;font-family:HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-size:20px;font-weight:700;line-height:100%;text-align:left;vertical-align:middle;padding:0; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;;}
.headerContent a:link,.headerContent a:visited,.headerContent a .yshortcuts{color:#EB4102;font-weight:500;text-decoration:underline;}
#headerImage{height:auto;max-width:600px;}
.bodyContent{color:#505050;font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;font-size:14px;line-height:150%;text-align:left;padding:20px; padding-bottom: 0; background: #fff}
.bodyContent a:link,.bodyContent a:visited,.bodyContent a .yshortcuts{color:#ca6099;font-weight:500;text-decoration:underline;}
.bodyContent img{display:inline;height:auto;max-width:560px;}
#templateFooter{background-color:#fff;border-top:1px solid #FFF;}
.footerContent{color:gray;font-family:HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-size:10px;line-height:150%;text-align:left;padding:20px;}
.ReadMsgBody,.ExternalClass{width:100%;}
.preheaderContent a:link,.preheaderContent a:visited,.preheaderContent a .yshortcuts,.footerContent a:link,.footerContent a:visited,.footerContent a .yshortcuts,.footerContent a span{color:#606060;font-weight:500;text-decoration:underline;}
#templateHeader,#templateBody{background-color:#fff;border-top:1px solid #FFF;}
@media (max-width: 480px){
body,table,td,p,a,li,blockquote{-webkit-text-size-adjust:none!important;}
body{width:100%!important;min-width:100%!important;}
#bodyCell{padding:10px!important;}
#templateContainer{max-width:600px!important;width:100%!important;}
h1{font-size:24px!important;line-height:100%!important;}
h2{font-size:20px!important;line-height:100%!important;}
h3{font-size:18px!important;line-height:100%!important;}
h4{font-size:16px!important;line-height:100%!important;}
#templatePreheader{display:none!important;}
#headerImage{height:auto!important;max-width:600px!important;width:100%!important;}
.headerContent{font-size:20px!important;line-height:125%!important;}
.bodyContent{font-size:18px!important;line-height:125%!important;}
.footerContent{font-size:14px!important;line-height:115%!important;}
.footerContent a{display:block!important;}
}
</style>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;margin: 0;padding: 0;background: #f9f9f9;height: 100%!important;width: 100%!important;">
<center>
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;background: #f9f9f9;margin: 0;padding: 0;border-collapse: collapse!important;height: 100%!important;width: 100%!important;">
<tr>
<td align="center" valign="top" id="bodyCell" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;background: #f9f9f9;margin: 0;padding: 20px;height: 100%!important;width: 100%!important;">
<!-- BEGIN TEMPLATE // -->
<table border="0" cellpadding="0" cellspacing="0" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;border-collapse: collapse!important;"><tr><td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;"><div style="display: block; margin-bottom: 10px; font-size: 12px; font-family: Arial;">Email not displaying correctly? <a style="color: #CA6099;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;" href="*|ARCHIVE|*" target="_blank">View it in your browser</a>.</div></td></tr></table>
<table border="0" cellpadding="0" cellspacing="0" id="templateContainer" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;width: 600px;border: 3px solid #ca6099;border-collapse: collapse!important;">
<tr>
<td align="center" valign="top" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;">
<!-- BEGIN HEADER // -->
<table border="0" cellpadding="0" cellspacig="0" width="100%" id="templateHeader" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;background-color: #fff;border-top: 1px solid #FFF;border-collapse: collapse!important;">
<tr>
<td valign="top" class="bodyContent" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;color: #505050;font-family: Arial,&quot;Helvetica Neue&quot;,Helvetica,sans-serif;font-size: 14px;line-height: 150%;text-align: left;padding: 20px;padding-bottom: 0;background: #fff;">
<img src="http://www.alwaystwisted.com/Sassnews-logo.png" style="max-width: 160px;-ms-interpolation-mode: bicubic;border: 0;height: auto;line-height: 100%;outline: none;text-decoration: none;display: inline;" mc:label="header_image" mc:edit="header_image">
</td>
</tr>
<tr>
<td valign="top" class="bodyContent" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;color: #505050;font-family: Arial,&quot;Helvetica Neue&quot;,Helvetica,sans-serif;font-size: 14px;line-height: 150%;text-align: left;padding: 20px;padding-bottom: 0;background: #fff;">
<h1 style="display: block;font-family: HelveticaNeue-Light,&quot;Helvetica Neue Light&quot;,&quot;Helvetica Neue&quot;,Helvetica,Arial,&quot;Lucida Grande&quot;,sans-serif;font-size: 26px;font-style: normal;font-weight: 400;line-height: 100%;letter-spacing: normal;text-align: left;margin: 0 0 10px;color: #202020!important;">Welcome to Issue #17</h1>
This issue features fun, frolics and even more articles from Hugo! <br><br>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateHeader" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;border-collapse: collapse!important;">
<tr>
<td valign="top" class="headerContent" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;color: #505050;font-family: HelveticaNeue-Light,&quot;Helvetica Neue Light&quot;,&quot;Helvetica Neue&quot;,Helvetica,Arial,&quot;Lucida Grande&quot;,sans-serif;font-size: 20px;font-weight: 700;line-height: 100%;text-align: left;vertical-align: middle;padding: 0;border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;">
<a href="" style="text-decoration: none;color: #ca6099;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;font-weight: 500;"><img src="http://s30.postimg.org/7j2cpmqr5/hero.jpg" style="max-width: 600px;-ms-interpolation-mode: bicubic;border: 0;height: auto;line-height: 100%;outline: none;text-decoration: none;" id="headerImage" mc:label="header_image" id="headerImage" mc:label="header_image" mc:edit="header_image" /></a>
</td>
</tr>
</table>
<!-- // END HEADER -->
</td>
</tr>
<tr>
<td align="center" valign="top" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;">
<!-- BEGIN BODY // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;border-collapse: collapse!important;">
<tr>
<td valign="top" class="bodyContent" mc:edit="body_content" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;color: #505050;font-family: Arial,&quot;Helvetica Neue&quot;,Helvetica,sans-serif;font-size: 14px;line-height: 150%;text-align: left;padding: 20px;padding-bottom: 0;background: #fff;">
<h1 style="display: block;font-family: HelveticaNeue-Light,&quot;Helvetica Neue Light&quot;,&quot;Helvetica Neue&quot;,Helvetica,Arial,&quot;Lucida Grande&quot;,sans-serif;font-size: 26px;font-style: normal;font-weight: 400;line-height: 100%;letter-spacing: normal;text-align: left;margin: 0 0 10px;color: #202020!important;"><a href="" style="text-decoration: none;color: #ca6099;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;font-weight: 500;">Scss-Styleguide with BEM, OOCSS & SMACSS</a></h1>
Here's another great walk through of a Sass-y document styleguide and folder system. </td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;">
<!-- BEGIN BODY // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateBody" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;background-color: #fff;border-top: 1px solid #FFF;border-collapse: collapse!important;">
<tr>
<td valign="top" class="bodyContent" mc:edit="body_content" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;color: #505050;font-family: Arial,&quot;Helvetica Neue&quot;,Helvetica,sans-serif;font-size: 14px;line-height: 150%;text-align: left;padding: 20px;padding-bottom: 0;background: #fff;">
<p style="border-top: 3px solid #ca6099;margin-top: 0;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;"></p>
<h2 style="display: block;font-family: HelveticaNeue-Light,&quot;Helvetica Neue Light&quot;,&quot;Helvetica Neue&quot;,Helvetica,Arial,&quot;Lucida Grande&quot;,sans-serif;font-size: 25px;font-style: normal;font-weight: 500;line-height: 100%;letter-spacing: normal;text-align: left;margin: 0 0 20px;color: #404040!important;">Headlines</h2>
<h4 style="display: block;font-family: HelveticaNeue-Light,&quot;Helvetica Neue Light&quot;,&quot;Helvetica Neue&quot;,Helvetica,Arial,&quot;Lucida Grande&quot;,sans-serif;font-size: 18px;font-weight: 500;line-height: 100%;letter-spacing: normal;text-align: left;margin: 0 0 10px;color: gray!important;"><a href="http://sassconf.com/speaking/" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;color: #ca6099;font-weight: 500;text-decoration: underline;">Speak at Sassconf</a></h4>
Got a great idea for a talk or workshop? The closing date for submissions to this years Sassconf has been extended to May 30th. <br />
<br />
<h4 style="display: block;font-family: HelveticaNeue-Light,&quot;Helvetica Neue Light&quot;,&quot;Helvetica Neue&quot;,Helvetica,Arial,&quot;Lucida Grande&quot;,sans-serif;font-size: 18px;font-weight: 500;line-height: 100%;letter-spacing: normal;text-align: left;margin: 0 0 10px;color: gray!important;"><a href="http://sassconf.com/speaking/" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;color: #ca6099;font-weight: 500;text-decoration: underline;">Speak at Sassconf</a></h4>
Got a great idea for a talk or workshop? The closing date for submissions to this years Sassconf has been extended to May 30th. <br />
<br />
<p style="border-top: 3px solid #ca6099;margin-top: 0;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;"></p>
<h2 style="display: block;font-family: HelveticaNeue-Light,&quot;Helvetica Neue Light&quot;,&quot;Helvetica Neue&quot;,Helvetica,Arial,&quot;Lucida Grande&quot;,sans-serif;font-size: 25px;font-style: normal;font-weight: 500;line-height: 100%;letter-spacing: normal;text-align: left;margin: 0 0 20px;color: #404040!important;">In Other News...</h2>
<h4 style="display: block;font-family: HelveticaNeue-Light,&quot;Helvetica Neue Light&quot;,&quot;Helvetica Neue&quot;,Helvetica,Arial,&quot;Lucida Grande&quot;,sans-serif;font-size: 18px;font-weight: 500;line-height: 100%;letter-spacing: normal;text-align: left;margin: 0 0 10px;color: gray!important;"><a href="http://sassconf.com/speaking/" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;color: #ca6099;font-weight: 500;text-decoration: underline;">Speak at Sassconf</a></h4>
Got a great idea for a talk or workshop? The closing date for submissions to this years Sassconf has been extended to May 30th. <br />
<br />
<h4 style="display: block;font-family: HelveticaNeue-Light,&quot;Helvetica Neue Light&quot;,&quot;Helvetica Neue&quot;,Helvetica,Arial,&quot;Lucida Grande&quot;,sans-serif;font-size: 18px;font-weight: 500;line-height: 100%;letter-spacing: normal;text-align: left;margin: 0 0 10px;color: gray!important;"><a href="http://sassconf.com/speaking/" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;color: #ca6099;font-weight: 500;text-decoration: underline;">Speak at Sassconf</a></h4>
Got a great idea for a talk or workshop? The closing date for submissions to this years Sassconf has been extended to May 30th. <br />
<br />
<p style="border-top: 3px solid #ca6099; margin-top: 0;"></p>
</td>
</tr>
</table>
<!-- // END BODY -->
</td>
</tr>
<tr>
<td align="center" valign="top" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;">
<!-- BEGIN FOOTER // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateFooter" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;background-color: #fff;border-top: 1px solid #FFF;border-collapse: collapse!important;">
<tr>
<td valign="top" class="footerContent" style="padding-top: 0;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;color: gray;font-family: HelveticaNeue-Light,&quot;Helvetica Neue Light&quot;,&quot;Helvetica Neue&quot;,Helvetica,Arial,&quot;Lucida Grande&quot;,sans-serif;font-size: 10px;line-height: 150%;text-align: left;padding: 20px;" mc:edit="footer_content01">
<em>Copyright &copy; *|CURRENT_YEAR|* *|LIST:COMPANY|*, All rights reserved.</em>
<br>
*|IFNOT:ARCHIVE_PAGE|* *|LIST:DESCRIPTION|*
<br>
<br>
<strong>Our mailing address is:</strong>
<br>
*|HTML:LIST_ADDRESS_HTML|* *|END:IF|*
</td>
</tr>
<tr>
<td valign="top" class="footerContent" style="padding-top: 0;padding-bottom: 40px;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0;mso-table-rspace: 0;color: gray;font-family: HelveticaNeue-Light,&quot;Helvetica Neue Light&quot;,&quot;Helvetica Neue&quot;,Helvetica,Arial,&quot;Lucida Grande&quot;,sans-serif;font-size: 10px;line-height: 150%;text-align: left;padding: 20px;" mc:edit="footer_content02">
<a href="*|UNSUB|*" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;color: #606060;font-weight: 500;text-decoration: underline;">unsubscribe from this list</a>&nbsp;&nbsp;&nbsp;<a href="*|UPDATE_PROFILE|*" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;color: #606060;font-weight: 500;text-decoration: underline;">update subscription preferences</a>&nbsp;
</td>
</tr>
</table>
<!-- // END FOOTER -->
</td>
</tr>
</table>
<!-- // END TEMPLATE -->
</td>
</tr>
</table>
</center>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment