Adding different layouts to templates
megamanii opened this issue · comments
Not really an issue, but I think it'd be cool to add more layouts to this template such as image right with text wrapping (and vice versa), different header layouts for a nav, etc.
@thegreygoose11 Can you tell me a little more about why you think these patterns would be useful? Do they come up often in your own work? Are these frequent hurdles you find yourself solving over and over again?
I'm hesitant to add more patterns since the goal is to provide just a few responsive email patterns that go a long way. The two examples suggested above could be created using existing patterns. But if you can provide more context and we can make a case for a new pattern, I'm game.
@TedGoas Yes, they come up often in my own work.
for a right aligned image with text wrapping:<!-- 1 Column Text + Button : BEGIN --> <tr style="text-size-adjust: 100%;"> <td style=" text-size-adjust: 100%; background-color: #ffffff;"> <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style=" border-spacing: 0px !important; border-collapse: collapse !important; table-layout: fixed !important; margin: 0px auto !important; text-size-adjust: 100%;"> <tbody style="text-size-adjust: 100%;"><tr style="text-size-adjust: 100%;"> <td style=" text-size-adjust: 100%; padding: 20px; font-family: sans-serif; font-size: 16px; color: #555555; padding-bottom: 0px;"> <table align="right" border="0" cellpadding="0" cellspacing="0" class="jbox" width="350" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"> <tbody> <tr> <td align="center" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"> <p style="margin-bottom:1em;"><a href="http://www.ihelpveterans.org/field-of-flags?s_src=email" target="_blank" ><img class="fluid" alt="A flag has been flown at DAV Headquarters" border="0" src="https://secure3.convio.net/dav/images/content/pagebuilder/2018-dav-independence-cert.jpg" width="350" ></a></p> </td> </tr> </tbody> </table> <p style=" text-size-adjust: 100%; font-size: 16px; margin: 0px 0px 12px;">Dear [[S1:first_name:Veteran Supporter]],</p> <p style=" text-size-adjust: 100%; font-size: 16px; margin: 0px 0px 12px;">On the Fourth of July we celebrate our nation’s independence and all the freedoms we are afforded as Americans. We must also remember those who fought for that freedom throughout our great nation’s history — and those who protect it today. </p> <p style=" text-size-adjust: 100%; font-size: 16px; margin: 0px 0px 12px;">That’s why we are creating a Field of Flags right here in our backyard. Each flag is dedicated to an American hero whose service and sacrifice made our freedom possible. <a href="http://www.ihelpveterans.org/field-of-flags?s_src=email"><strong>And when you fly a flag, you can download your certificate to share with the veteran you are honoring.</strong></a></p> <p style=" text-size-adjust: 100%; font-size: 16px; margin: 0px 0px 12px;">It’s not too late to fly a flag in honor of a special veteran — or ALL service members — this Fourth of July. <a style="text-decoration: underline;" href="http://www.ihelpveterans.org/field-of-flags?s_src=email"><strong>Claim yours today to ensure your flag joins the ranks of flags honoring the many who have served, fought and sacrificed for our independence.</strong></a></p> <!-- Button : BEGIN --> <table id="header-button-table" role="presentation" cellspacing="0" cellpadding="0" border="0" class="" style="margin-bottom: 1em !important;" align="center"> <tr> <td style=" background: #005d7d; text-align: center;" class="button-td"> <a href="http://www.ihelpveterans.org/field-of-flags?s_src=email" style="background: #005d7d; border: 15px solid #005d7d; font-family: sans-serif; font-size: 13px; line-height: 110%; text-align: center; text-decoration: none; display: block; font-weight: bold;" class="button-a"> <span style="color:#ffffff;" class="button-link">Get Your Flag</span> </a> </td> </tr> </table> <!-- Button : END --> <p style=" text-size-adjust: 100%; font-size: 16px; margin: 0px 0px 12px; margin-top: 1em;">Happy Independence Day,</p> <p style=" text-size-adjust: 100%; font-size: 16px; margin: 0px 0px 12px;"><img alt="J Marc Burgess" border="0" height="38" src="http://donate.dav.org/images/content/pagebuilder/j_marc_burgess_signature.jpg" width="175" style=" text-size-adjust: 100%;"></p> <p style=" text-size-adjust: 100%; font-size: 16px; margin: 0px 0px 12px;">J. Marc Burgess<br style="text-size-adjust: 100%;"> DAV National Adjutant/CEO</p> </td> </tr> </tbody></table> </td> </tr> <!-- 1 Column Text + Button : END -->
@thegreygoose11 I left this open for a bit to see if anyone else chimed in. At the moment, I'm hesitant to add more stuff like this (testing, support, maintenance, etc.). I'm happy to revisit this in the future, though.