Merge pull request #22 from ThemeMountain/develop

Update CSS resets and markup.
ThemeMountain · Sep 26, 2018 · 68ae4c2 · 68ae4c2
2 parents e4a8699 + 11d57ed
commit 68ae4c2
Show file tree

Hide file tree

Showing 53 changed files with 336 additions and 315 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,34 @@
 # Changelog
 
+## 2.1.0
+
+This release adds major changes to how CSS resets, typography, spacing, and components work in Pine. It is inspired by the approach in our [Acorn framework](https://github.com/ThemeMountain/acorn).
+
+### Highlights
+
+* Smarter CSS resets => less inlined styles when your ESP does automatic inlining
+* Better button visuals for Outlook: using `mso-padding-alt` to keep the looks consistent with more modern email clients
+* More flexible mobile spacing utilities
+    * Spacers and Dividers also allow for more control on mobile
+* New breakpoint for landscape phones
+* Better image resets
+
+#### Added
+
+* New breakpoint (`max-width: 730px`), for landscape phones. Column widths stay the same as for desktop, but container is forced to 100% width
+
+#### Updated
+
+* All examples and components, to use the new CSS
+* Outlook VML backgrounds - not using `<v:fill>` anymore (not needed for them to work)
+* Spacers now use `&zwnj;` instead of `&nbsp;`
+* Spacers on mobile are reset to zero-height. Use the new mobile spacing utilities to define how high a spacer should be on mobile (up to 60px)
+* Renamed `body-bkg-image.html` example to `vml-body-bkg-image.html`
+
+#### Removed
+
+* Double `<head>` hack for Yahoo! on mobile
+
 ## 2.0.0
 
 Pine has been re-written (almost) from scratch, to make it more user friendly and flexible.

diff --git a/components/accordion/accordion.html b/components/accordion/accordion.html
@@ -1,7 +1,7 @@
-<table align="center" cellpadding="20" cellspacing="0" role="presentation" width="100%">
+<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
   <tr>
     <td style="padding: 0 20px;">
-      <div class="spacer" style="line-height: 40px;">&nbsp;</div>
+      <div class="spacer py-sm-10" style="line-height: 40px;">&zwnj;</div>
       <table cellpadding="0" cellspacing="0" role="presentation" width="100%">
         <tr>
           <td class="col" width="640" style="padding: 0 10px;">
@@ -60,7 +60,7 @@ <h2 style="font-size: 28px;">Lorem ipsum dolor</h2>
           </td>
         </tr>
       </table>
-      <div class="spacer" style="line-height: 40px;">&nbsp;</div>
+      <div class="spacer py-sm-10" style="line-height: 40px;">&zwnj;</div>
     </td>
   </tr>
 </table>
diff --git a/components/alerts/alert-bg.html b/components/alerts/alert-bg.html
@@ -1,6 +1,6 @@
-<table align="center" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
   <tr>
-    <td bgcolor="#0099E5" style="color: #FFFFFF; padding: 15px 30px;">
+    <td class="col" bgcolor="#0099E5" style="color: #FFFFFF; padding: 15px 30px;">
       This is an alert with background colour
     </td>
   </tr>

diff --git a/components/alerts/alert-outlined.html b/components/alerts/alert-outlined.html
@@ -1,6 +1,6 @@
-<table align="center" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="border: 2px solid #0099E5;">
+<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
   <tr>
-    <td style="color: #0099E5; padding: 15px 30px;">
+    <td class="col" style="border: 2px solid #0099E5; color: #0099E5; padding: 15px 30px;">
       This is an alert with an outline border
     </td>
   </tr>

diff --git a/components/buttons/button-filled.html b/components/buttons/button-filled.html
@@ -1,7 +1,7 @@
-<table bgcolor="#34BF49" cellpadding="0" cellspacing="0" role="presentation" style="border-radius: 3px;">
+<table cellpadding="0" cellspacing="0" role="presentation">
   <tr>
-    <th>
-      <a href="http://thememountain.com" style="border: 0 solid #34BF49; color: #FFFFFF; display: inline-block; font-size: 13px; padding: 8px 50px; text-decoration: none;">Button text</a>
+    <th bgcolor="#34BF49" style="border-radius: 3px; line-height: 100%; mso-padding-alt: 5px 50px 10px;">
+      <a href="http://thememountain.com" style="color: #FFFFFF; display: block; font-size: 13px; padding: 10px 50px; text-decoration: none;">Button text</a>
     </th>
   </tr>
 </table>
diff --git a/components/buttons/button-outlined.html b/components/buttons/button-outlined.html
@@ -1,7 +1,7 @@
 <table cellpadding="0" cellspacing="0" role="presentation">
   <tr>
-    <th>
-      <a href="http://thememountain.com" style="border: 2px solid #34BF49; border-radius: 3px; color: #34BF49; display: inline-block; font-size: 13px; padding: 8px 50px; text-decoration: none;">Button text</a>
+    <th style="border: 2px solid #34BF49; border-radius: 3px; line-height: 100%; mso-padding-alt: 5px 50px 10px;">
+      <a href="http://thememountain.com" style="color: #34BF49; display: block; font-size: 13px; padding: 10px 50px; text-decoration: none;">Button text</a>
     </th>
   </tr>
 </table>
diff --git a/components/buttons/button-pill.html b/components/buttons/button-pill.html
@@ -1,7 +1,7 @@
-<table bgcolor="#34BF49" cellpadding="0" cellspacing="0" role="presentation" style="border-radius: 50px;">
+<table cellpadding="0" cellspacing="0" role="presentation">
   <tr>
-    <th>
-      <a href="http://thememountain.com" style="border: 0 solid #34BF49; color: #FFFFFF; display: inline-block; font-size: 13px; padding: 8px 50px; text-decoration: none;">Button text</a>
+    <th bgcolor="#34BF49" style="border-radius: 50px; line-height: 100%; mso-padding-alt: 5px 50px 10px;">
+      <a href="http://thememountain.com" style="color: #FFFFFF; display: block; font-size: 13px; padding: 10px 50px; text-decoration: none;">Button text</a>
     </th>
   </tr>
 </table>
diff --git a/components/coupon/coupon-dashed.html b/components/coupon/coupon-dashed.html
@@ -1,16 +1,16 @@
-<table align="center" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
   <tr>
     <td style="padding: 0 20px;">
-      <table cellpadding="10" cellspacing="0" role="presentation" width="100%">
+      <table cellpadding="0" cellspacing="0" role="presentation" width="100%">
         <tr>
           <td class="col" align="center" width="640" style="padding: 0 10px;">
             <table cellpadding="0" cellspacing="0" role="presentation" width="100%">
               <tr>
-                <td class="spacer" height="40" style="line-height: 40px;">&nbsp;</td>
+                <td class="spacer py-sm-20" style="line-height: 40px;">&zwnj;</td>
               </tr>
               <tr>
-                <td class="px-sm-1" align="center" width="100%" style="padding: 30px; border: 4px dashed #CCCCCC; color: #000000;">
-                  <table align="center" cellpadding="0" cellspacing="0" role="presentation" style="margin: 0 auto;">
+                <td class="px-sm-10" align="center" width="100%" style="border: 4px dashed #CCCCCC; color: #000000; padding: 30px;">
+                  <table cellpadding="0" cellspacing="0" role="presentation">
                     <tr>
                       <th style="font-size: 110px; line-height: 100%; word-break: break-all;">25</th>
                       <th style="vertical-align: middle;">
@@ -19,20 +19,20 @@
                       </th>
                     </tr>
                   </table>
-                  <div style="color: #999999;">With coupon <span style="border: 1px solid #EA4B35; border-radius: 3px; color: #EA4B35; display: inline-block; font-size: 90%; padding: 1px 5px;">25OFFTODAY</span></div>
-                  <div class="spacer" style="line-height: 30px;">&nbsp;</div>
-                  <table bgcolor="#000000" cellpadding="0" cellspacing="0" role="presentation">
+                  <p style="color: #999999; margin: 0;">With coupon <span style="border: 1px solid #EA4B35; border-radius: 3px; color: #EA4B35; display: inline-block; font-size: 90%; padding: 1px 5px;">25OFFTODAY</span></p>
+                  <div class="spacer py-sm-10" style="line-height: 30px;">&zwnj;</div>
+                  <table cellpadding="0" cellspacing="0" role="presentation">
                     <tr>
-                      <th>
-                        <a href="http://thememountain.com" style="border: 0 solid #000000; color: #FFFFFF; display: inline-block; font-size: 13px; padding: 8px 30px; text-decoration: none;">REDEEM COUPON &rarr;</a>
+                      <th bgcolor="#000000" style="line-height: 100%; mso-padding-alt: 5px 30px 10px;">
+                        <a href="http://thememountain.com" style="color: #FFFFFF; display: block; font-size: 13px; padding: 10px 30px; text-decoration: none;">REDEEM COUPON &rarr;</a>
                       </th>
                     </tr>
                   </table>
-                  <div class="spacer" style="line-height: 15px; height: 15px;">&nbsp;</div>
+                  <div class="spacer py-sm-10" style="line-height: 20px;">&zwnj;</div>
                 </td>
               </tr>
               <tr>
-                <td class="spacer" height="40" style="line-height: 40px;">&nbsp;</td>
+                <td class="spacer py-sm-20" style="line-height: 40px;">&zwnj;</td>
               </tr>
             </table>
           </td>

diff --git a/components/coupon/coupon-filled.html b/components/coupon/coupon-filled.html
@@ -1,18 +1,18 @@
-<table align="center" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
   <tr>
-    <td class="col px-sm-2" bgcolor="#008DF6" width="640" style="padding: 30px;">
+    <td class="col px-sm-20" bgcolor="#008DF6" width="640" style="padding: 30px;">
       <table cellpadding="0" cellspacing="0" role="presentation" width="100%">
         <tr>
-          <td class="col px-sm-1" align="center" width="100%" style="padding: 30px; border: 1px solid #FFFFFF; color: #FFFFFF;">
+          <td class="col px-sm-10" align="center" style="border: 1px solid #FFFFFF; color: #FFFFFF; padding: 30px;" width="100%">
             <div style="font-size: 13px; text-transform: uppercase;">Thanks for signing up!<br>Enjoy</div>
             <div style="font-size: 72px; font-weight: 700; line-height: 100%;">$10 OFF</div>
-            <div class="spacer" style="line-height: 15px;">&nbsp;</div>
+            <div class="spacer pb-sm-20" style="line-height: 15px;">&zwnj;</div>
             <div style="font-size: 20px; letter-spacing: 2px; line-height: 100%; text-transform: uppercase;">Your first order</div>
-            <div class="spacer" style="line-height: 30px;">&nbsp;</div>
-            <table bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" role="presentation">
+            <div class="spacer pb-sm-20" style="line-height: 30px;">&zwnj;</div>
+            <table cellpadding="0" cellspacing="0" role="presentation">
               <tr>
-                <th>
-                  <a href="http://thememountain.com" style="border: 0 solid #FFFFFF; color: #008DF6; display: inline-block; font-size: 13px; padding: 10px 30px; text-decoration: none;">SHOP NOW</a>
+                <th bgcolor="#FFFFFF" style="mso-padding-alt: 5px 30px 10px;">
+                  <a href="http://thememountain.com" style="color: #008DF6; display: block; font-size: 13px; padding: 10px 30px; text-decoration: none;">SHOP NOW</a>
                 </th>
               </tr>
             </table>

diff --git a/components/coupon/coupon-with-image-left.html b/components/coupon/coupon-with-image-left.html
@@ -1,30 +1,30 @@
-<table align="center" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+<table bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" role="presentation" width="100%">
   <tr>
-    <td class="spacer" height="40" style="line-height: 40px;">&nbsp;</td>
+    <td class="spacer py-sm-10" style="line-height: 40px;">&zwnj;</td>
   </tr>
   <tr>
     <td style="padding: 0 20px;">
       <table cellpadding="0" cellspacing="0" role="presentation" width="100%">
         <tr>
-          <td class="col pb-sm-2" width="310" style="padding: 0 10px;">
-            <img src="https://picsum.photos/620/620?image=1062" class="align-sm-center" width="310" alt="Coupon Image" style="max-width: 310px; width: 100%;">
+          <td class="col pb-sm-30" align="center" width="310" style="padding: 0 10px;">
+            <img src="https://picsum.photos/620/620?image=1062" alt="Coupon Image" width="310">
           </td>
           <td class="col" width="310" style="padding: 0 10px; vertical-align: middle;">
             <table cellpadding="0" cellspacing="0" role="presentation" width="100%">
               <tr>
-                <td align="center" width="100%" style="padding: 30px; border: 3px dashed #CCCCCC; color: #000000;">
-                  <div class="spacer" style="line-height: 35px;">&nbsp;</div>
+                <td align="center" style="border: 3px dashed #CCCCCC; color: #000000; padding: 30px;">
+                  <div class="spacer py-sm-10" style="line-height: 35px;">&zwnj;</div>
                   <div style="color: #999999; font-size: 13px; margin-bottom: 10px; line-height: 16px; text-transform: uppercase;">Mondays suck, so</div>
                   <div style="font-size: 36px; font-weight: 700; line-height: 100%;">Get $25 OFF</div>
                   <div style="color: #999999; font-size: 13px; margin-bottom: 30px; text-transform: uppercase;">Your next order</div>
-                  <table align="center" bgcolor="#4C4054" cellpadding="0" cellspacing="0" role="presentation" style="margin: 0 auto;">
+                  <table cellpadding="0" cellspacing="0" role="presentation">
                     <tr>
-                      <th>
-                        <a href="http://thememountain.com" target="_blank" style="border: 0 solid #4C4054; color: #FFFFFF; display: block; font-size: 15px; padding: 10px 30px; text-decoration: none;">REDEEM COUPON &rarr;</a>
+                      <th bgcolor="#4C4054" style="line-height: 100%; mso-padding-alt: 5px 30px 10px;">
+                        <a href="http://thememountain.com" target="_blank" style="color: #FFFFFF; display: block; font-size: 15px; padding: 10px 30px; text-decoration: none;">REDEEM COUPON &rarr;</a>
                       </th>
                     </tr>
                   </table>
-                  <div class="spacer" style="line-height: 35px;">&nbsp;</div>
+                  <div class="spacer py-sm-10" style="line-height: 35px;">&zwnj;</div>
                 </td>
               </tr>
             </table>
@@ -34,6 +34,6 @@
     </td>
   </tr>
   <tr>
-    <td class="spacer" height="40" style="line-height: 40px;">&nbsp;</td>
+    <td class="spacer py-sm-10" style="line-height: 40px;">&zwnj;</td>
   </tr>
 </table>
diff --git a/components/divider/divider.html b/components/divider/divider.html
@@ -1,7 +1,7 @@
-<table align="center" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
   <tr>
-    <td class="divider" height="60">
-      <div style="border-top: 1px solid #EEEEEE; line-height: 0;">&nbsp;</div>
+    <td class="divider" style="padding: 15px 30px;">
+      <div style="background: #EEEEEE; height: 1px; line-height: 1px;">&zwnj;</div>
     </td>
   </tr>
 </table>
diff --git a/components/feature-columns/feature-columns.html b/components/feature-columns/feature-columns.html
@@ -1,17 +1,17 @@
-<table align="center" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
   <tr>
     <td>
       <table cellpadding="0" cellspacing="0" role="presentation" width="100%">
         <tr>
-          <td class="col px-sm-2" align="center" width="290" style="padding: 30px;">
-            <img src="https://i.imgur.com/XqzhK67.png" width="36" alt="Download" style="max-width: 36px; width: 100%;" />
+          <td class="col" align="center" width="290" style="padding: 30px;">
+            <img src="https://i.imgur.com/XqzhK67.png" width="36" alt="Download">
             <h3>Download our app</h3>
-            <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
+            <p style="margin: 0;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
           </td>
-          <td class="col px-sm-2" align="center" bgcolor="#7E57C2" width="290" style="padding: 30px;">
-            <img src="https://i.imgur.com/BuBHL3w.png" width="36" alt="Download" style="max-width: 36px; width: 100%;" />
+          <td class="col" align="center" bgcolor="#7E57C2" width="290" style="padding: 30px;">
+            <img src="https://i.imgur.com/BuBHL3w.png" width="36" alt="Download">
             <h3 style="color: #FFFFFF;">Take control</h3>
-            <div style="color: #FFFFFF;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
+            <p style="color: #FFFFFF; margin: 0;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
           </td>
         </tr>
       </table>

diff --git a/components/navigation/nav-basic.html b/components/navigation/nav-basic.html
@@ -1,15 +1,15 @@
 <table class="nav" cellpadding="0" cellspacing="0" role="presentation">
   <tr>
-    <td class="nav-item" style="padding-right: 30px;">
+    <td class="nav-item px-sm-10" style="padding-right: 30px; display: inline-block;">
       <a href="http://example.com" style="color: #000000; text-decoration: none;">News</a>
     </td>
-    <td class="nav-item" style="padding-right: 30px;">
+    <td class="nav-item px-sm-10" style="padding-right: 30px; display: inline-block;">
       <a href="http://example.com" style="color: #000000; text-decoration: none;">Services</a>
     </td>
-    <td class="nav-item" style="padding-right: 30px;">
+    <td class="nav-item px-sm-10" style="padding-right: 30px; display: inline-block;">
       <a href="http://example.com" style="color: #000000; text-decoration: none;">Work</a>
     </td>
-    <td class="nav-item">
+    <td class="nav-item px-sm-10" style="display: inline-block;">
       <a href="http://example.com" style="color: #000000; text-decoration: none;">Store</a>
     </td>
   </tr>

diff --git a/components/navigation/nav-hamburger.html b/components/navigation/nav-hamburger.html
@@ -1,20 +1,20 @@
 <div>
   <!--[if !mso 9]><!-->
-  <img class="toggle-trigger show-sm p-sm-1" src="https://i.imgur.com/RIRjWm6.png" width="20" aria-hidden="true" style="display: none; max-height: 0; max-width: 20px; width: 100%;">
+  <img src="https://i.imgur.com/RIRjWm6.png" class="toggle-trigger show-sm p-sm-10" aria-hidden="true" width="20" style="display: none; max-height: 0;">
   <!--<![endif]-->
   <div class="toggle-content">
     <table class="nav nav-sm-vertical" cellpadding="0" cellspacing="0" role="presentation">
       <tr>
-        <td class="nav-item" style="padding-right: 30px;">
+        <td class="nav-item px-sm-10" style="padding-right: 30px; display: inline-block;">
           <a href="http://example.com" style="color: #999999; text-decoration: none;">News</a>
         </td>
-        <td class="nav-item" style="padding-right: 30px;">
+        <td class="nav-item px-sm-10" style="padding-right: 30px; display: inline-block;">
           <a href="http://example.com" style="color: #999999; text-decoration: none;">Services</a>
         </td>
-        <td class="nav-item" style="padding-right: 30px;">
+        <td class="nav-item px-sm-10" style="padding-right: 30px; display: inline-block;">
           <a href="http://example.com" style="color: #999999; text-decoration: none;">Work</a>
         </td>
-        <td class="nav-item">
+        <td class="nav-item px-sm-10" style="display: inline-block;">
           <a href="http://example.com" style="color: #999999; text-decoration: none;">Store</a>
         </td>
       </tr>