Email HTML template

Email HTML Template/Template/Source/Sass/dna.config

@@ -0,0 +1,3 @@
+{
+    "outputPath": "../../WebRoot/Assets/Css"
+}

Email HTML Template/Template/Source/Sass/reset.scss

@@ -0,0 +1,49 @@
+// Body
+body
+{
+    // Reset margin/padding
+    margin: 0;
+    padding: 0;
+}
+
+// Image
+img
+{
+    // Remove border
+    border: 0 none;
+
+    // Auto height
+    height: auto;
+
+    // Set line-height so inline works
+    line-height: 100%;
+
+    // No outline
+    outline: none;
+
+    // No text decoration
+    text-decoration: none;
+}
+
+a img 
+{
+    // Remove border
+    border: 0 none;
+}
+
+// Table and column
+table, td
+{
+    // Remove extra spacing
+    border-collapse: collapse;
+
+    // No padding
+    padding: 0;
+}
+
+// Header
+h1,h2,h3,h4,h5,h6
+{
+    // Margin
+    margin: 0;
+}

Email HTML Template/Template/Source/Sass/style.scss

@@ -0,0 +1,185 @@
+$background-color: #0d9e73;
+$content-background-color: white;
+$text-color: black;
+$button-background-color: #fbbd1f;
+$button-text-color: #833b20;
+$default-font-family: sans-serif;
+$web-font-family: 'Quicksand';
+$font-size-normal: 24px;
+$font-size-large: 48px;
+$line-height: 1.4;
+$base-size: 16px;
+
+$spacing-small: $base-size * 0.5;
+$spacing-normal: $base-size;
+$spacing-tiny: $base-size * 0.25;
+$spacing-large: $base-size * 1.5;
+$spacing-larger: $base-size * 2;
+$spacing-huge: $base-size * 3;
+
+body
+{
+    // Round font by default
+    font-family: $default-font-family;
+    font-family: $web-font-family;
+}
+
+// Main Header
+h1
+{
+    font-size: $font-size-large;
+}
+
+// Top-most table inside body
+.container
+{    
+    // Web-font if supported
+    font-family: $default-font-family;
+    font-family: $web-font-family;
+
+    // Reset margins/padding
+    margin:0;
+    padding:0;
+
+    // Set background color
+    background-color: $background-color;
+
+    // Fill all available area
+    width:100% !important;
+    height:100% !important;
+
+    // Font size
+    font-size: $font-size-normal;
+
+    // Line height
+    line-height: $line-height;
+
+    // Don't change our font size
+    -ms-text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%; 
+}
+
+// Wraps contents to email width
+.wrapper
+{
+    // Block display
+    display: block;
+
+    // Padding around all content
+    padding: $spacing-larger;
+}
+
+// Content item
+.content-item
+{
+    // Add padding
+    padding: $spacing-large;
+}
+
+// Center text
+.text-center
+{
+    text-align: center;
+}
+
+// Inline-block
+.inline-block
+{
+    display: inline-block;
+}
+
+// Page behind visuals
+.page-behind-1, .page-behind-2
+{
+    // Remove any whitespace oversize
+    font-size: 0;
+    line-height: 0;
+
+    table > tbody > tr > td
+    {
+        // Remove any whitespace oversize
+        font-size: 0;
+        line-height: 0;
+
+        // Clear padding
+        padding: 0;
+
+        // Set inner column to take all width
+        width: 100%;
+
+        // Margin below
+        margin-bottom: $spacing-tiny;
+
+        // Display inline block
+        display: inline-block;
+
+        // Solid bar of color
+        border-top: $spacing-tiny solid $content-background-color;
+    }
+}
+
+// Page behind visual
+.page-behind-1 table
+{
+    width: 75%;
+}
+
+// Page behind visual
+.page-behind-2 table
+{
+    width: 90%;
+}
+
+// Main page content
+.page-content
+{
+    // Set background color
+    background: $content-background-color;   
+
+    // Add some padding
+    padding: $spacing-huge;
+}
+
+// Button table container
+.button
+{
+    // Size to content
+    //width: auto;
+
+    td
+    {
+        // Rounded button
+        border-radius: $spacing-normal;
+
+        // Background color
+        background-color: $button-background-color;
+
+        // Button link
+        a
+        {
+            // Duplicate the border for anchor
+            // as Mail for Windows doesn't like 
+            // honoring padding if there is no border
+            border-radius: $spacing-normal;
+            border: solid 1px $button-background-color;
+    
+            // Text color
+            color: $button-text-color;    
+
+            // Padding
+            padding: $spacing-normal $spacing-larger;
+
+            // No underline
+            text-decoration: none;
+
+            // Inline block so padding works
+            display: inline-block;
+        }
+    }
+}   
+
+.text-logo
+{
+    padding-top: $spacing-huge * 2;
+    padding-bottom: $spacing-larger;
+}