<!--
👋 hey there, thanks for stopping by!
You're looking at the compiled template from the "How to use the WordPress API to create a newsletter from your posts" Maizzle tutorial.
Read tutorial here: https://maizzle.com/guides/wordpress-api-posts-email-newsletter/
GitHub repo: https://github.com/maizzle/example-wordpress
-->
<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="x-apple-disable-message-reformatting">
<title>Latest posts on CSS-Tricks</title>
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<style>
table {border-collapse: collapse;}
td,th,div,p,a,h1,h2,h3,h4,h5,h6 {font-family: "Segoe UI", sans-serif; mso-line-height-rule: exactly;}
</style>
<![endif]-->
<style>
.hover-bg-indigo-700:hover {
background-color: #4c51bf !important;
}
.hover-text-gray-700:hover {
color: #4a5568 !important;
}
.hover-text-blue-400:hover {
color: #63b3ed !important;
}
@media (max-width: 600px) {
.sm-inline-block {
display: inline-block !important;
}
.sm-h-32 {
height: 32px !important;
}
.sm-leading-40 {
line-height: 40px !important;
}
.sm-px-0 {
padding-left: 0 !important;
padding-right: 0 !important;
}
.sm-px-16 {
padding-left: 16px !important;
padding-right: 16px !important;
}
.sm-px-24 {
padding-left: 24px !important;
padding-right: 24px !important;
}
.sm-py-32 {
padding-top: 32px !important;
padding-bottom: 32px !important;
}
.sm-pb-32 {
padding-bottom: 32px !important;
}
.sm-w-16 {
width: 16px !important;
}
.sm-w-full {
width: 100% !important;
}
}
</style>
</head>
<body style="margin: 0; padding: 0; width: 100%; word-break: break-word; -webkit-font-smoothing: antialiased; background-color: #edf2f7;">
<div style="display: none;">👀 Lorem, ipsum, and much dolor in this week's edition</div>
<table style="font-family: -apple-system, 'Segoe UI', sans-serif; width: 100%;" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td align="center" class="sm-px-16" style="background-color: #edf2f7;" bgcolor="#edf2f7">
<table class="sm-w-full" style="width: 600px;" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td class="sm-py-32 sm-px-24" style="padding: 48px; text-align: center;" align="center">
<a href="https://maizzle.com">
<img src="https://css-tricks.com/apple-touch-icon.png" width="100" alt="CSS-Tricks" style="border: 0; max-width: 100%; line-height: 100%; vertical-align: middle;">
</a>
</td>
</tr>
<tr>
<td style="background-image: url('https://res.cloudinary.com/css-tricks/image/upload/v1582755217//layouts-flexbox.png'); background-position: top; background-repeat: no-repeat; background-size: cover; border-radius: 4px; text-align: left;" background="https://res.cloudinary.com/css-tricks/image/upload/v1582755217//layouts-flexbox.png" align="left">
<!--[if mso]>
<v:image src="https://res.cloudinary.com/css-tricks/image/upload/v1582755217//layouts-flexbox.png" xmlns:v="urn:schemas-microsoft-com:vml" style="width:600px;height:400px;" />
<v:rect fill="false" stroke="false" style="position:absolute;width:600px;height:400px;">
<v:textbox inset="0,0,0,0"><div><![endif]-->
<div style="line-height: 32px;">‌</div>
<table style="width: 100%;" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td class="sm-w-16" style="width: 48px;"></td>
<td>
<h1 class="sm-leading-40" style="margin: 0; margin-bottom: 16px; color: #ffffff; font-size: 36px;">A Follow-Up to PHP Templating</h1>
<div style="line-height: 24px; margin: 0; color: #ffffff; font-size: 18px;">
<p>Not long ago, I posted about PHP templating in just PHP (which is basically HEREDOC syntax). I’m literally using that technique for some super basic...</p>
</div>
<div style="line-height: 32px;">‌</div>
<table cellpadding="0" cellspacing="0" role="presentation">
<tr>
<th class="hover-bg-indigo-700" style="mso-padding-alt: 16px 24px; background-color: #434190; border-radius: 4px;" bgcolor="#434190">
<a href="https://css-tricks.com/a-follow-up-to-php-templating/" style="display: block; font-weight: 600; line-height: 100%; padding-top: 16px; padding-bottom: 16px; padding-left: 24px; padding-right: 24px; color: #ffffff; font-size: 16px; text-decoration: none;">Read more →</a>
</th>
</tr>
</table>
</td>
<td class="sm-w-16" style="width: 48px;"></td>
</tr>
</table>
<div style="line-height: 32px;">‌</div>
<!--[if mso]></div></v:textbox></v:rect><![endif]-->
</td>
</tr>
<tr>
<td style="height: 32px;"></td>
</tr>
<tr>
<td class="sm-px-0" style="padding-left: 24px; padding-right: 24px; text-align: left; width: 100%;" align="left">
<table style="width: 100%;" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td class="sm-w-full sm-inline-block" style="padding-bottom: 32px; width: 100%;">
<table style="width: 100%;" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td style="background-color: #ffffff; border-radius: 4px; padding: 24px;" bgcolor="#ffffff">
<p style="margin: 0; margin-bottom: 4px; color: #a0aec0; font-size: 14px;">Feb 28, 2020</p>
<h2 style="line-height: 24px; margin: 0; margin-bottom: 24px; font-size: 24px;">
<a href="https://css-tricks.com/how-to-customize-the-woocommerce-cart-page-on-a-wordpress-site/" class="hover-text-gray-700" style="color: #000000; text-decoration: none;">How to Customize the WooCommerce Cart Page on a WordPress Site</a>
</h2>
<div style="margin: 0; margin-bottom: 24px; color: #2d3748; font-size: 16px;">
<p>A standard e-commerce site has a few common pages. There are product pages, shop pages that list products, and let’s not forget pages for the user account, […]</p>
</div>
<a href="https://css-tricks.com/how-to-customize-the-woocommerce-cart-page-on-a-wordpress-site/" class="hover-text-blue-400" style="color: #4299e1; font-size: 16px; text-decoration: none;">Read more →</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="sm-px-0" style="padding-left: 24px; padding-right: 24px; text-align: left; width: 100%;" align="left">
<table style="width: 100%;" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td class="sm-px-0 sm-pb-32 sm-w-full sm-inline-block" style="padding-right: 16px; width: 50%;">
<table style="width: 100%;" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td style="background-color: #ffffff; border-radius: 4px; padding: 24px;" bgcolor="#ffffff">
<p style="margin: 0; margin-bottom: 4px; color: #a0aec0; font-size: 14px;">Feb 28, 2020</p>
<h2 style="line-height: 24px; margin: 0; margin-bottom: 24px; font-size: 24px;">
<a href="https://css-tricks.com/where-to-learn-wordpress-theme-development/" class="hover-text-gray-700" style="color: #000000; text-decoration: none;">Where to Learn WordPress Theme Development</a>
</h2>
<div style="margin: 0; margin-bottom: 24px; color: #2d3748; font-size: 16px;">
<p>Over a decade ago, I did a little three-part video series on Designing for […]</p>
</div>
<a href="https://css-tricks.com/where-to-learn-wordpress-theme-development/" class="hover-text-blue-400" style="color: #4299e1; font-size: 16px; text-decoration: none;">Read more →</a>
</td>
</tr>
</table>
</td>
<td class="sm-px-0 sm-w-full sm-inline-block" style="padding-left: 16px; width: 50%;">
<table style="width: 100%;" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td style="background-color: #ffffff; border-radius: 4px; padding: 24px;" bgcolor="#ffffff">
<p style="margin: 0; margin-bottom: 4px; color: #a0aec0; font-size: 14px;">Feb 28, 2020</p>
<h2 style="line-height: 24px; margin: 0; margin-bottom: 24px; font-size: 24px;">
<a href="https://css-tricks.com/data-driven-jamstack-with-sourcebit/" class="hover-text-gray-700" style="color: #000000; text-decoration: none;">Data-driven Jamstack with Sourcebit</a>
</h2>
<div style="margin: 0; margin-bottom: 24px; color: #2d3748; font-size: 16px;">
<p>Think of building sites with Gatsby as an hourglass shape. Gatsby itself is […]</p>
</div>
<a href="https://css-tricks.com/data-driven-jamstack-with-sourcebit/" class="hover-text-blue-400" style="color: #4299e1; font-size: 16px; text-decoration: none;">Read more →</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="sm-h-32" style="height: 64px;"></td>
</tr>
<tr>
<td class="sm-px-24" style="padding-left: 48px; padding-right: 48px; text-align: left;" align="left">
<h3 style="font-weight: 600; margin: 0; color: #a0aec0; font-size: 16px; text-transform: uppercase;">From the archives</h3>
<div style="line-height: 24px;">‌</div>
<table style="width: 100%;" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td>
<p style="margin-bottom: 2px; color: #a0aec0; font-size: 12px;">Feb 27, 2020</p>
<h4 style="font-weight: 600; margin: 0; margin-bottom: 4px; font-size: 20px;">
<a href="https://css-tricks.com/when-css-blocks/" class="hover-text-blue-400" style="color: #4299e1; text-decoration: none;">When CSS Blocks</a>
</h4>
<div style="margin: 0; color: #a0aec0;">
<p>Tim Kadlec: One particular pattern [for loading...</p>
</div>
<table style="width: 100%;" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td style="padding-top: 24px; padding-bottom: 24px;">
<div style="background-color: #e2e8f0; height: 1px; line-height: 1px;">‌</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<p style="margin-bottom: 2px; color: #a0aec0; font-size: 12px;">Feb 27, 2020</p>
<h4 style="font-weight: 600; margin: 0; margin-bottom: 4px; font-size: 20px;">
<a href="https://css-tricks.com/instant-graphql-backend-using-faunadb/" class="hover-text-blue-400" style="color: #4299e1; text-decoration: none;">Instant GraphQL Backend with Fine-grained Security Using FaunaDB</a>
</h4>
<div style="margin: 0; color: #a0aec0;">
<p>GraphQL is becoming popular and developers are constantly...</p>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="sm-h-32" style="height: 64px;"></td>
</tr>
<tr>
<td class="sm-px-24" style="background-color: #e2e8f0; border-radius: 4px; padding-top: 16px; padding-bottom: 16px; padding-left: 48px; padding-right: 48px; text-align: left;" bgcolor="#e2e8f0" align="left">
<p style="margin: 0; color: #718096; font-size: 14px;">
You are receiving this email because you signed up for Website Newsletter Weekly.
You can <a href="https://example.com" class="hover-text-blue-400" style="color: #4299e1; text-decoration: none;">unsubscribe</a> at any time.
</p>
</td>
</tr>
<tr>
<td class="sm-h-32" style="height: 48px;"></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
!
