Email IA

docs/_data/nav.yml

@@ -1,7 +1,7 @@
 # URLs below should be exactly the same as real paths. Just follow examples…
 - title: Product
   url: product/guidelines/using-stacks/
-  sublinks: 
+  sublinks:
     - title: Guidelines
       subsublinks:
         - title: Using Stacks
@@ -103,11 +103,31 @@
           url: email/best-practices
         - title: FAQ
           url: email/faq
-    - title: Elements
+    - title: Templates
+      subsublinks:
+        - title: Short Transactional
+          url: email/templates/short-transactional
+        - title: Long Transactional
+          url: email/templates/long-transactional
+        - title: Promotional
+          url: email/templates/promotional
+    - title: Base
       subsublinks:
-        - title: Templates
-          url: email/templates
-        - title: Components
-          url: email/components
-        - title: Patterns
-          url: email/patterns
+        - title: Border Radius
+          url: email/base/border-radius
+        - title: Outlook Conditional CSS
+          url: email/base/mso
+        - title: Responsiveness
+          url: email/base/responsive
+        - title: Typography
+          url: email/base/typography
+    - title: Components
+      subsublinks:
+        - title: Buttons
+          url: email/components/buttons
+        - title: Images
+          url: email/components/images
+        - title: Tags
+          url: email/components/tags
+        - title: Team Identification
+          url: email/components/team-identification

docs/_includes/notice-email-head-support.html

@@ -0,0 +1,6 @@
+<div class="grid ai-start s-notice s-notice__info mb16">
+    <div class="grid--cell mr8">{% svg /product/resources/svg-icons/Alert.svg width="18" height="18" %}</div>
+    <div class="grid--cell lh-lg">
+        <strong>Note:</strong> Only <a href="https://www.campaignmonitor.com/css/style-element/style-in-head/">email clients that support <code class="stacks-code bg-powder-200">&lt;style&gt;</code> in <code class="stacks-code bg-powder-200">&lt;head&gt;</code></a> will render this.
+    </div>
+</div>

docs/_includes/notice-email-master-templates.html

@@ -0,0 +1,6 @@
+<div class="grid ai-start s-notice s-notice__info mb16">
+    <div class="grid--cell mr8">{% svg /product/resources/svg-icons/Alert.svg width="18" height="18" %}</div>
+    <div class="grid--cell lh-lg">
+        <strong>Note:</strong> If an email inherits from a master template (eg. <code class="stacks-code bg-powder-200">_Stacks-Layout.Html.cshtml</code>), only the middle part of the template is needed (the <code class="stacks-code bg-powder-200">&lt;head&gt;</code>, logo, and footer are automatically included). Each template includes <code class="stacks-code bg-powder-200">&lt;!-- EMAIL BODY : BEGIN --&gt;</code> and <code class="stacks-code bg-powder-200">&lt;!-- EMAIL BODY : END --&gt;</code> markers indicating this middle&nbsp;section.
+    </div>
+</div>

docs/_includes/notice-unset.html

@@ -1,5 +1,5 @@
 <div class="grid ai-start s-notice s-notice__info mb48">
-    <div class="grid--cell mr8">{% svg /product/resources/svg-icons/Alert.svg width="18" height="18" aria-hidden="true" class="svg-icon iconAlert" %}</div>
+    <div class="grid--cell mr8">{% svg /product/resources/svg-icons/Alert.svg width="18" height="18" %}</div>
     <div class="grid--cell lh-lg">
         <strong>Note:</strong> The <code class="stacks-code bg-powder-200">unset</code> property is a combination property that resets a property to its inherited value. It behaves like the <code class="stacks-code bg-powder-200">inherit</code> and the <code class="stacks-code bg-powder-200">initial</code> keywords, but it properly selects the right value for you. Unfortunately, <code class="stacks-code bg-powder-200">unset</code> is not fully supported in Internet Explorer. Because of this all <code class="stacks-code bg-powder-200">unset</code> values have the correct <code class="stacks-code bg-powder-200">inherit</code> or <code class="stacks-code bg-powder-200">initial</code> value applied.
     </div>

docs/email/base/border-radius.html

@@ -0,0 +1,149 @@
+---
+layout: page
+title: Border Radius
+description: Border radius classes are provided as a progressive enhancement to email containers. The border radius on containers are removed at smaller breakpoints, once the width of the container matches the width of its viewport.
+---
+
+<!-- TAGS -->
+<section class="stacks-section">
+    {% header {element: 'h2', text: 'Border Radius Classes'} %}
+    <table class="s-table s-table__hover mb32 va-top">
+        <thead>
+            <tr>
+                <th class="s-table--cell2" scope="col">Class</th>
+                <th class="s-table--cell4"scope="col">Output</th>
+                <th scope="col">Use Case</th>
+           </tr>
+        </thead>
+        <tbody>
+            <tr class="ff-mono">
+                <th>.bar</th>
+                <td>border-radius: 5px;</td>
+                <td class="ff-sans">Rounding all four corners of <a href="/email/templates/short-transactional">a simple email</a>.</td>
+            </tr>
+            <tr class="ff-mono">
+                <th>.btr</th>
+                <td>border-top-left-radius: 5px;<br>border-top-right-radius: 5px;</td>
+                <td class="ff-sans">Rounding the top corners of <a href="/email/templates/promotional">a complex promotional email</a> in one location…</td>
+            </tr>
+            <tr class="ff-mono">
+                <th>.bbr</th>
+                <td>border-bottom-left-radius: 5px;<br>border-bottom-right-radius: 5px;</td>
+                <td class="ff-sans">…and rounding the bottom corners in another location.</td>
+            </tr>
+        </tbody>
+    </table>
+    <div class="stacks-preview mb24">
+{% highlight html linenos %}
+<tr>
+    <td style="background-color: #ffffff;" class="bar">
+        ...
+    </td>
+</tr>
+
+<img class="btr">
+{% endhighlight %}
+        <div class="stacks-preview--example">
+
+            <ul class="list-reset grid ai-center bc-black-3 py16 gs8 gsx">
+                <li class="grid--cell sm:d-none">
+                    <a href="#" class="s-link s-link__muted py8 px12 bar-pill js-sm-btn js-query-select-btn">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="svg-icon va-text-top" width="10" height="14" viewBox="0 0 10 14">
+                          <path d="M2,2 L2,10 L8,10 L8,2 L2,2 Z M2,0 L8,0 C9.1045695,0 10,0.8954305 10,2 L10,12 C10,13.1045695 9.1045695,14 8,14 L2,14 C0.8954305,14 0,13.1045695 0,12 L0,2 C0,0.8954305 0.8954305,0 2,0 Z M4,11 L4,13 L6,13 L6,11 L4,11 Z"/>
+                        </svg>
+                        Small
+                    </a>
+                </li>
+                <li class="grid--cell sm:d-none">
+                    <a href="#" class="s-link s-link__muted py8 px12 bar-pill bg-black-100 fc-black-600 js-lg-btn js-query-select-btn">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="svg-icon va-text-top" width="26" height="14" viewBox="0 0 26 14">
+                          <path fill-rule="evenodd" d="M5,0 L21,0 C22.1045695,0 23,0.8954305 23,2 L23,12 L26,12 L26,14 L0,14 L0,12 L3,12 L3,2 C3,0.8954305 3.8954305,0 5,0 Z M5,2 L5,11 L21,11 L21,2 L5,2 Z"/>
+                        </svg>
+                        Large
+                    </a>
+                </li>
+            </ul>
+            <div style="background-color: #000;" class="py48 ta-center">
+                <style>
+                    .bar {
+                        border-radius: 5px;
+                    }
+                    .btr {
+                        border-top-left-radius: 5px;
+                        border-top-right-radius: 5px;
+                    }
+                    .ex-narrow {
+                        display: none;
+                    }
+                    .ws4 .bar,
+                    .ws4 .btr {
+                        border-top-left-radius: 0;
+                        border-top-right-radius: 0;
+                        border-bottom-left-radius: 0;
+                        border-bottom-right-radius: 0;
+                    }
+                    .ws4 .ex-narrow {
+                        display: block;
+                    }
+                    .ws4 .ex-wide {
+                        display: none;
+                    }
+                    @media screen and (max-width: 1100px) {
+                        .bar,
+                        .btr {
+                            border-top-left-radius: 0;
+                            border-top-right-radius: 0;
+                            border-bottom-left-radius: 0;
+                            border-bottom-right-radius: 0;
+                        }
+                        .ex-narrow {
+                            display: block;
+                        }
+                        .ex-wide {
+                            display: none;
+                        }
+                    }
+                </style>
+                <div class="m-auto ta-center w100 js-frame" style="max-width: 680px;">
+                    <div style="padding: 30px; margin-bottom: 30px; background-color: #ffffff;" class="bar">
+                        <h2 class="ex-wide" style="font-weight: bold; font-size: 21px; line-height: 21px; color: #0C0D0E; margin: 0 auto;">Round corners in wide viewports.</h2>
+                        <h2 class="ex-narrow" style="font-weight: bold; font-size: 21px; line-height: 21px; color: #0C0D0E; margin: 0 auto;">Square corners in narrow viewports.</h2>
+                    </div>
+                    <img src="https://placehold.it/1280x200?text=Works+on+Foreground+Images+Too" width="680" height="" alt="Works on Foreground Images Too" border="0" style="width: 100%; max-width: 680px; height: auto; display: block; margin: auto;" class="btr">
+               </div>
+            </div>
+
+        </div>
+    </div>
+    {% include notice-email-head-support.html %}
+</section>
+<script>
+    $(function(){
+        var smBtn = $(".js-sm-btn");
+        var lgBtn = $(".js-lg-btn");
+        var btns = $(".js-query-select-btn");
+        var gridTarget = $(".js-frame");
+
+        smBtn.click(function(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            removeClasses1();
+            addSelection1($(this));
+            gridTarget.addClass("ws4");
+        });
+        lgBtn.click(function(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            removeClasses1();
+            addSelection1($(this));
+            gridTarget.addClass("w100");
+        });
+        function removeClasses1() {
+            gridTarget.removeClass("ws4 w100");
+            btns.removeClass("bg-black-100 fc-black-600");
+        };
+        function addSelection1(obj) {
+            obj.addClass("bg-black-100 fc-black-600");
+        };
+    });
+</script>