├── .DS_Store
├── .github
    └── FUNDING.yml
├── README.md
├── boilerplate.html
├── components
    ├── .DS_Store
    ├── heros
    │   ├── background-image-text-overlay.html
    │   ├── image-hero-with-mobile-block.html
    │   └── single-image-hero.html
    └── others
    │   ├── .DS_Store
    │   ├── content.html
    │   ├── mobile-hack.html
    │   ├── mspace.html
    │   ├── row.html
    │   └── spacer.html
├── elements
    ├── .DS_Store
    ├── buttons
    │   ├── button-border-radius.html
    │   ├── button-ghost.html
    │   └── button-square.html
    ├── images
    │   └── image.html
    ├── links
    │   └── link.html
    ├── lists
    │   └── list.html
    └── typography
    │   └── typography.html
├── grids
    ├── .DS_Store
    ├── fluid
    │   ├── fluid-grid-master.html
    │   ├── fluid-grid1.html
    │   ├── fluid-grid2.html
    │   ├── fluid-grid3.html
    │   ├── fluid-grid4.html
    │   └── fluid-grid5.html
    ├── hybrid
    │   ├── hybrid-grid-master.html
    │   ├── hybrid-grid1.html
    │   ├── hybrid-grid2.html
    │   └── hybrid-grid3.html
    └── responsive
    │   ├── responsive-grid-master.html
    │   ├── responsive-grid1.html
    │   ├── responsive-grid2.html
    │   ├── responsive-grid3.html
    │   ├── responsive-grid4.html
    │   └── responsive-grid5.html
├── mail.css
└── snippets
    ├── atom
        └── snippets.cson
    └── sublime
        ├── arial.sublime-snippet
        ├── boilerplate.sublime-snippet
        ├── button.sublime-snippet
        ├── content.sublime-snippet
        ├── css.sublime-snippet
        ├── fgrid1.sublime-snippet
        ├── fgrid2.sublime-snippet
        ├── fgrid3.sublime-snippet
        ├── fgrid4.sublime-snippet
        ├── fgrid5.sublime-snippet
        ├── hgrid1.sublime-snippet
        ├── hgrid2.sublime-snippet
        ├── hgrid3.sublime-snippet
        ├── img.sublime-snippet
        ├── mobile-block-hack.sublime-snippet
        ├── mspace.sublime-snippet
        ├── rgrid1.sublime-snippet
        ├── rgrid2.sublime-snippet
        ├── rgrid3.sublime-snippet
        ├── rgrid4.sublime-snippet
        ├── rgrid5.sublime-snippet
        ├── row.sublime-snippet
        └── space.sublime-snippet


/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/g13nn/Email-Framework/6b0c3c0b875ca142731e405f4f15c3ce9ba29d7a/.DS_Store


--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | github: g13nn


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Email Framework
 2 | 
 3 | The HTML [Email Framework](https://emailframe.work "Email Framework") developed to help you build responsive HTML email templates.
 4 | 
 5 | ### Getting Started
 6 | 
 7 | * [Documentation](http://emailframe.work "Documentation")
 8 | * [Download](https://github.com/g13nn/Email-Framework/archive/master.zip "Download")
 9 | 
10 | ### Support
11 | 
12 | Need some help, or have a question.  Get in touch:
13 | 
14 | * [Get in touch](https://glennsmith.me/#contact "Get in touch")
15 | * [Submit an Issue](https://github.com/g13nn/Email-Framework/issues/new "Submit an Issue")
16 | * [Sponsor](https://github.com/sponsors/g13nn "Sponsor")
17 | 
18 | ### License
19 | 
20 | ```
21 | Copyright (C) 2024 Glenn Smith
22 | 
23 | Permission is hereby granted, free of charge, to any person obtaining a
24 | copy of this software and associated documentation files (the
25 | "Software"), to deal in the Software without restriction, including
26 | without limitation the rights to use, copy, modify, merge, publish,
27 | distribute, sublicense, and/or sell copies of the Software, and to
28 | permit persons to whom the Software is furnished to do so, subject to
29 | the following conditions:
30 | 
31 | The above copyright notice and this permission notice shall be included
32 | in all copies or substantial portions of the Software.
33 | 
34 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
35 | OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
36 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
37 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
38 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
39 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
40 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
41 | ```
42 | 


--------------------------------------------------------------------------------
/boilerplate.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2 | <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
  3 | <head>
  4 |   <meta name="robots" content="noindex, nofollow"/>
  5 |   <meta name="referrer" content="no-referrer"/>
  6 |   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7 |   <meta name="viewport" content="width=device-width, initial-scale=1">
  8 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  9 |   <meta name="color-scheme" content="light dark">
 10 |   <meta name="supported-color-schemes" content="light dark">  
 11 |   <title>Email Framework</title>
 12 | 
 13 |   <style type="text/css">
 14 | 
 15 |     /* CLIENT-SPECIFIC STYLES */
 16 |     body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
 17 |     table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
 18 |     img { -ms-interpolation-mode: bicubic; }
 19 | 
 20 |     /* RESET STYLES */
 21 |     img { border: 0; outline: none; text-decoration: none; }
 22 |     table { border-collapse: collapse !important; }
 23 |     body { margin: 0 !important; padding: 0 !important; width: 100% !important; }
 24 | 
 25 |     /* iOS BLUE LINKS */
 26 |     a[x-apple-data-detectors] {
 27 |       color: inherit !important;
 28 |       text-decoration: none !important;
 29 |       font-size: inherit !important;
 30 |       font-family: inherit !important;
 31 |       font-weight: inherit !important;
 32 |       line-height: inherit !important;
 33 |     }
 34 | 
 35 |     /* ANDROID CENTER FIX */
 36 |     div[style*="margin: 16px 0;"] { margin: 0 !important; }
 37 | 
 38 |     /* MEDIA QUERIES */
 39 |     @media all and (max-width:639px){ 
 40 |       .wrapper{ width:320px!important; padding: 0 !important; }
 41 |       .container{ width:300px!important;  padding: 0 !important; }
 42 |       .mobile{ width:300px!important; display:block!important; padding: 0 !important; }
 43 |       .img{ width:100% !important; height:auto !important; }
 44 |       *[class="mobileOff"] { width: 0px !important; display: none !important; }
 45 |       *[class*="mobileOn"] { display: block !important; max-height:none !important; }
 46 |     }
 47 | 
 48 |     /* DARK MODE STYLES */
 49 |     :root {
 50 |       color-scheme: light dark;
 51 |       supported-color-schemes: light dark;
 52 |       -webkit-font-smoothing: antialiased;
 53 |       -moz-osx-font-smoothing: grayscale;
 54 |     }
 55 |     @media ( prefers-color-scheme: dark ) {
 56 | 
 57 |       body { background-color: #262626 !important; }
 58 |       [data-ogsb] body { background-color: #262626 !important; } 
 59 | 
 60 |       table { background-color: #212121 !important; }
 61 |       [data-ogsb] table { background-color: #212121 !important; } 
 62 | 
 63 |       .logo-light { display:none; display:none !important; }
 64 |       [data-ogsc] .logo-light { display:none !important; }
 65 | 
 66 |       .logo-dark { display:block !important; }
 67 |       [data-ogsc] .logo-dark { display:block !important; }
 68 | 
 69 |       h1 { color: #FFFFFF !important; }
 70 |       [data-ogsc] h1 { color: #FFFFFF !important; }
 71 | 
 72 |       h2 { color: #FFFFFF !important; }
 73 |       [data-ogsc] h2 { color: #ffffff !important; }
 74 | 
 75 |       h3 { color: #FFFFFF !important; }
 76 |       [data-ogsc] h3 { color: #FFFFFF !important; }
 77 | 
 78 |       h4 { color: #FFFFFF !important; }
 79 |       [data-ogsc] h4 { color: #FFFFFF !important; }
 80 | 
 81 |       h5 { color: #FFFFFF !important; }
 82 |       [data-ogsc] h5 { color: #FFFFFF !important; }
 83 | 
 84 |       h6 { color: #FFFFFF !important; }
 85 |       [data-ogsc] h6 { color: #FFFFFF !important; }
 86 | 
 87 |       .hr { background:#FFFFFF!important; }
 88 |       [data-ogsc] .hr { background:#FFFFFF!important; }
 89 | 
 90 |       p { color: #ffffff !important; }
 91 |       [data-ogsc] p { color: #FFFFFF !important; }
 92 | 
 93 |       li  { color: #FFFFFF !important; }
 94 |       [data-ogsc] li { color: #FFFFFF !important; }
 95 |       
 96 |       li>span { color: #FFFFFF !important; }
 97 |       [data-ogsc] li>span { color: #FFFFFF !important; } 
 98 | 
 99 |       .link { color: #FFFFFF !important; }
100 |       [data-ogsc] .link { color: #FFFFFF !important; }
101 | 
102 |       .button { background-color: #FFFFFF !important; color:#000000!important; }
103 |       [data-ogsb] .button { background-color: #FFFFFF !important; color:#000000!important; }
104 |       
105 |     }
106 | 
107 |   </style> 
108 | 
109 |   <!--[if gte mso 9]>     
110 |     <xml>       
111 |       <o:OfficeDocumentSettings>         
112 |         <o:AllowPNG/>         
113 |         <o:PixelsPerInch>96</o:PixelsPerInch>       
114 |       </o:OfficeDocumentSettings>     
115 |     </xml>     
116 |   <![endif]-->
117 |   
118 |   <!--[if mso]>     
119 |     <style type="text/css">       
120 |       body, table, td {
121 |         font-family : Arial, helvetica, sans-serif;             
122 |       }
123 |     </style>     
124 |   <![endif]-->  
125 | 
126 | </head>
127 | <body style="margin:0; padding:0; background-color:#F2F2F2;">
128 | 
129 |   <div style="display:none;">Preheader Text</div>
130 | 
131 |   <center>
132 |     <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#F2F2F2">
133 |         <tr>
134 |             <td align="center" valign="top">
135 |               
136 |             </td>
137 |         </tr>
138 |     </table>
139 |   </center>
140 |   
141 | </body>
142 | </html>
143 | 


--------------------------------------------------------------------------------
/components/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/g13nn/Email-Framework/6b0c3c0b875ca142731e405f4f15c3ce9ba29d7a/components/.DS_Store


--------------------------------------------------------------------------------
/components/heros/background-image-text-overlay.html:
--------------------------------------------------------------------------------
 1 | <table width="640" height="400" cellpadding="0" cellspacing="0" border="0" class="header" background="http://placehold.it/640x400" style="background-image: url(http://placehold.it/640x400);">
 2 |   <tr>
 3 |     <td align="center">
 4 |     <!--[if gte mso 9]>
 5 |     <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px">
 6 |     <v:fill type="frame" src="http://placehold.it/640x400" color="#ffffff" />
 7 |     <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
 8 |     <div style="font-size:1px;line-height:1px">
 9 |     <table width="640" cellspacing="0" cellpadding="0" border="0" align="center">
10 |     <tbody>
11 |     <tr>
12 |     <td height="400" align="center">
13 |     <![endif]-->
14 | 
15 |     <table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
16 |       <tr>
17 |         <td align="center" class="mobile" style="font-family:arial, sans-serif; font-size:20px; line-height:26px; font-weight:bold;">
18 |           Testing Modules for the email framework
19 |         </td>
20 |       </tr>
21 |       <tr>
22 |         <td height="20" style="font-size:10px; line-height:10px;">&nbsp;</td>
23 |       </tr>
24 |       <tr>
25 |         <td align="center" class="mobile" style="font-family:arial, sans-serif; font-size:14px; line-height:20px;">
26 |           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta purus porttitor enim scelerisque, vel malesuada lorem mattis. Curabitur ac orci libero.
27 |         </td>
28 |       </tr>
29 |       <tr>
30 |         <td height="20" style="font-size:10px; line-height:10px;">&nbsp;</td>
31 |       </tr>
32 |       <tr>
33 |         <td class="mobile" style="font-size:14px; line-height:20px;" align="center">
34 | 
35 |           <table width="200" height="44" cellpadding="0" cellspacing="0" border="0" bgcolor="#2b3a63" style="border-radius:4px;">
36 |             <tr>
37 |               <td align="center" valign="middle" height="44" style="font-family: Arial, sans-serif; font-size:14px; font-weight:bold;">
38 |                 <a href="#" target="_blank" style="font-family: Arial, sans-serif; color:#ffffff; display: inline-block; text-decoration: none; line-height:44px; width:200px; font-weight:bold;">Button</a>
39 |               </td>
40 |             </tr>
41 |           </table>
42 | 
43 |         </td>
44 |       </tr>
45 |     </table>
46 | 
47 |     <!--[if gte mso 9]>
48 |     </td>
49 |     </tr>
50 |     </tbody>
51 |     </table>
52 |     </div>
53 |     </v:textbox>
54 |     </v:rect>
55 |     <![endif]-->
56 | 
57 |     </td>
58 |   </tr>
59 | </table>
60 | 


--------------------------------------------------------------------------------
/components/heros/image-hero-with-mobile-block.html:
--------------------------------------------------------------------------------
 1 | <table width="640" cellpadding="0" cellspacing="0" border="0" class="mobileOff" bgcolor="#FFFFFF">
 2 |   <tr>
 3 |     <td align="center">
 4 | 
 5 |       <table width="640" cellpadding="0" cellspacing="0" border="0" class="container">
 6 |         <tr>
 7 |           <td width="600" class="mobile">
 8 |             <img src="http://placehold.it/640x400" width="640" height="400" style="margin:0; padding:0; border:none; display:block;" border="0" class="img" alt="" />
 9 |           </td>
10 |         </tr>
11 |       </table>
12 | 
13 |     </td>
14 |   </tr>
15 | </table>
16 | 
17 | <!--[if !mso]><!-- -->
18 | <div class="mobileOn" style="font-size: 0; max-height: 0; overflow: hidden; display: none">
19 |   <table width="320" cellspacing="0" cellpadding="0" border="0" class="wrapper" align="center">
20 |     <tr>
21 |       <td align="center">
22 |         <img src="http://placehold.it/320x300" width="320" height="300" style="margin:0; padding:0; border:none; display:block;" border="0" class="img" alt="" />
23 |       </td>
24 |     </tr>
25 |   </table>
26 | </div>
27 | <!--<![endif]-->


--------------------------------------------------------------------------------
/components/heros/single-image-hero.html:
--------------------------------------------------------------------------------
 1 | <table width="640" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#FFFFFF">
 2 |   <tr>
 3 |     <td align="center">
 4 | 
 5 |       <table width="640" cellpadding="0" cellspacing="0" border="0" class="wrapper">
 6 |         <tr>
 7 |           <td width="640" class="wrapper">
 8 |             <img src="http://placehold.it/640x400" width="640" height="400" style="margin:0; padding:0; border:none; display:block;" border="0" class="img" alt="" />
 9 |           </td>
10 |         </tr>
11 |       </table>
12 | 
13 |     </td>
14 |   </tr>
15 | </table>
16 | 


--------------------------------------------------------------------------------
/components/others/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/g13nn/Email-Framework/6b0c3c0b875ca142731e405f4f15c3ce9ba29d7a/components/others/.DS_Store


--------------------------------------------------------------------------------
/components/others/content.html:
--------------------------------------------------------------------------------
1 | <table width="100%" cellpadding="0" cellspacing="0" border="0">
2 |   <tr>
3 |     <td align="center" valign="top">
4 | 
5 |     </td>
6 |   </tr>
7 | </table>
8 | 


--------------------------------------------------------------------------------
/components/others/mobile-hack.html:
--------------------------------------------------------------------------------
 1 | <!--[if !mso]><!-- -->
 2 | <div class="mobileOn" style="font-size: 0; max-height: 0; overflow: hidden; display: none">                
 3 |   <table width="100%" cellspacing="0" cellpadding="0" border="0" class="mobile" align="center">    
 4 |     <tr>
 5 |       <td align="center" valign="top" style="color: #000000; font-size: 12px; line-height: 18px;">
 6 | 
 7 |       </td>
 8 |     </tr>
 9 |   </table>                                                                    
10 | </div>                                                                    
11 | <!--<![endif]-->


--------------------------------------------------------------------------------
/components/others/mspace.html:
--------------------------------------------------------------------------------
1 | <td height="10" style="font-size:10px; line-height:10px;" class="mobileOn">&nbsp;</td>


--------------------------------------------------------------------------------
/components/others/row.html:
--------------------------------------------------------------------------------
1 | <tr>
2 |   <td align="center" valign="top">
3 |     
4 |   </td>
5 | </tr>


--------------------------------------------------------------------------------
/components/others/spacer.html:
--------------------------------------------------------------------------------
1 | <tr>
2 |   <td height="10" style="font-size:10px; line-height:10px;">&nbsp;</td>
3 | </tr>


--------------------------------------------------------------------------------
/elements/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/g13nn/Email-Framework/6b0c3c0b875ca142731e405f4f15c3ce9ba29d7a/elements/.DS_Store


--------------------------------------------------------------------------------
/elements/buttons/button-border-radius.html:
--------------------------------------------------------------------------------
1 | <table width="200" height="44" cellpadding="0" cellspacing="0" border="0" bgcolor="#2b3a63" style="border-radius:4px;">
2 |   <tr>
3 |     <td align="center" valign="middle" height="44" style="font-family: Arial, sans-serif; font-size:14px; font-weight:bold;">
4 |     	<a href="#" target="_blank" style="font-family: Arial, sans-serif; color:#ffffff; display: inline-block; text-decoration: none; line-height:44px; width:200px; font-weight:bold;">Button</a>
5 |     </td>
6 |   </tr>
7 | </table>


--------------------------------------------------------------------------------
/elements/buttons/button-ghost.html:
--------------------------------------------------------------------------------
1 | <table width="200" height="44" cellpadding="0" cellspacing="0" border="0" bgcolor="#2b3a63" style="border-radius:4px;">
2 |   <tr>
3 |     <td align="center" valign="middle" height="44" style="font-family: Arial, sans-serif; font-size:14px; font-weight:bold;">
4 |     	<a href="#" target="_blank" style="font-family: Arial, sans-serif; color:#ffffff; display: inline-block; text-decoration: none; line-height:44px; width:200px; font-weight:bold;">Button</a>
5 |     </td>
6 |   </tr>
7 | </table>


--------------------------------------------------------------------------------
/elements/buttons/button-square.html:
--------------------------------------------------------------------------------
1 | <table width="200" height="44" cellpadding="0" cellspacing="0" border="0" bgcolor="#2b3a63" style="border-radius:4px;">
2 |   <tr>
3 |     <td align="center" valign="middle" height="44" style="font-family: Arial, sans-serif; font-size:14px; font-weight:bold;">
4 |     	<a href="#" target="_blank" style="font-family: Arial, sans-serif; color:#ffffff; display: inline-block; text-decoration: none; line-height:44px; width:200px; font-weight:bold;">Button</a>
5 |     </td>
6 |   </tr>
7 | </table>


--------------------------------------------------------------------------------
/elements/images/image.html:
--------------------------------------------------------------------------------
1 | <img src="http://placehold.it/100x100" width="100" height="100" style="margin:0; padding:0; border:none; display:block;" border="0" class="img" alt="">


--------------------------------------------------------------------------------
/elements/links/link.html:
--------------------------------------------------------------------------------
1 | <a href="#" target="_blank" style="color:#66cccc; text-decoration:underline;">Link</a>
2 | 


--------------------------------------------------------------------------------
/elements/lists/list.html:
--------------------------------------------------------------------------------
 1 | <ul style="list-style-type: disc;">
 2 |   <li style="color:#336699">
 3 |     <span style="color:#000000;">
 4 |       Lorem ipsum dolor sit, amet consectetur adipisicing elit.
 5 |     </span>
 6 |   </li>
 7 |   <li style="color:#336699">
 8 |     <span style="color:#000000;">
 9 |       Lorem ipsum dolor sit, amet consectetur adipisicing elit.
10 |     </span>
11 |   </li>
12 |   <li style="color:#336699">
13 |     <span style="color:#000000;">
14 |       Lorem ipsum dolor sit, amet consectetur adipisicing elit.
15 |     </span>
16 |   </li>
17 | </ul>


--------------------------------------------------------------------------------
/elements/typography/typography.html:
--------------------------------------------------------------------------------
1 | <h1 style="margin:0; padding:0; margin-bottom:16px; Margin-bottom:16px;">Heading</h1>
2 | <h2 style="margin:0; padding:0; margin-bottom:16px; Margin-bottom:16px;">Heading</h2>
3 | <h3 style="margin:0; padding:0; margin-bottom:16px; Margin-bottom:16px;">Heading</h3>
4 | <h4 style="margin:0; padding:0; margin-bottom:16px; Margin-bottom:16px;">Heading</h4>
5 | <h5 style="margin:0; padding:0; margin-bottom:16px; Margin-bottom:16px;">Heading</h5>
6 | <h6 style="margin:0; padding:0; margin-bottom:16px; Margin-bottom:16px;">Heading</h6>
7 | <p style="margin:0; padding:0; margin-bottom:16px; Margin-bottom:16px;">Paragraph</p>
8 | <a href="" target="_blank" style="color:#336699; text-decoration:underline;">Link</a>
9 | 


--------------------------------------------------------------------------------
/grids/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/g13nn/Email-Framework/6b0c3c0b875ca142731e405f4f15c3ce9ba29d7a/grids/.DS_Store


--------------------------------------------------------------------------------
/grids/fluid/fluid-grid-master.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2 | <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
  3 | <head>
  4 |   <meta name="robots" content="noindex, nofollow"/>
  5 |   <meta name="referrer" content="no-referrer"/>
  6 |   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7 |   <meta name="viewport" content="width=device-width, initial-scale=1">
  8 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  9 |   <meta name="color-scheme" content="light dark">
 10 |   <meta name="supported-color-schemes" content="light dark">  
 11 |   <title>Fluid Grid Master</title>
 12 | 
 13 |   <style type="text/css">
 14 | 
 15 |     /* CLIENT-SPECIFIC STYLES */
 16 |     body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
 17 |     table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
 18 |     img { -ms-interpolation-mode: bicubic; }
 19 | 
 20 |     /* RESET STYLES */
 21 |     img { border: 0; outline: none; text-decoration: none; }
 22 |     table { border-collapse: collapse !important; }
 23 |     body { margin: 0 !important; padding: 0 !important; width: 100% !important; }
 24 | 
 25 |     /* iOS BLUE LINKS */
 26 |     a[x-apple-data-detectors] {
 27 |       color: inherit !important;
 28 |       text-decoration: none !important;
 29 |       font-size: inherit !important;
 30 |       font-family: inherit !important;
 31 |       font-weight: inherit !important;
 32 |       line-height: inherit !important;
 33 |     }
 34 | 
 35 |     /* ANDROID CENTER FIX */
 36 |     div[style*="margin: 16px 0;"] { margin: 0 !important; }
 37 | 
 38 |     /* MEDIA QUERIES */
 39 |     @media all and (max-width:639px){ 
 40 |       .wrapper{ width:320px!important; padding: 0 !important; }
 41 |       .container{ width:300px!important;  padding: 0 !important; }
 42 |       .mobile{ width:300px!important; display:block!important; padding: 0 !important; }
 43 |       .img{ width:100% !important; height:auto !important; }
 44 |       *[class="mobileOff"] { width: 0px !important; display: none !important; }
 45 |       *[class*="mobileOn"] { display: block !important; max-height:none !important; }
 46 |     }
 47 | 
 48 |     /* DARK MODE STYLES */
 49 |     :root {
 50 |       color-scheme: light dark;
 51 |       supported-color-schemes: light dark;
 52 |       -webkit-font-smoothing: antialiased;
 53 |       -moz-osx-font-smoothing: grayscale;
 54 |     }
 55 |     @media ( prefers-color-scheme: dark ) {
 56 | 
 57 |       body { background-color: #262626 !important; }
 58 |       [data-ogsb] body { background-color: #262626 !important; } 
 59 | 
 60 |       table { background-color: #212121 !important; }
 61 |       [data-ogsb] table { background-color: #212121 !important; } 
 62 | 
 63 |       .logo-light { display:none; display:none !important; }
 64 |       [data-ogsc] .logo-light { display:none !important; }
 65 | 
 66 |       .logo-dark { display:block !important; }
 67 |       [data-ogsc] .logo-dark { display:block !important; }
 68 | 
 69 |       h1 { color: #FFFFFF !important; }
 70 |       [data-ogsc] h1 { color: #FFFFFF !important; }
 71 | 
 72 |       h2 { color: #FFFFFF !important; }
 73 |       [data-ogsc] h2 { color: #ffffff !important; }
 74 | 
 75 |       h3 { color: #FFFFFF !important; }
 76 |       [data-ogsc] h3 { color: #FFFFFF !important; }
 77 | 
 78 |       h4 { color: #FFFFFF !important; }
 79 |       [data-ogsc] h4 { color: #FFFFFF !important; }
 80 | 
 81 |       h5 { color: #FFFFFF !important; }
 82 |       [data-ogsc] h5 { color: #FFFFFF !important; }
 83 | 
 84 |       h6 { color: #FFFFFF !important; }
 85 |       [data-ogsc] h6 { color: #FFFFFF !important; }
 86 | 
 87 |       .hr { background:#FFFFFF!important; }
 88 |       [data-ogsc] .hr { background:#FFFFFF!important; }
 89 | 
 90 |       p { color: #ffffff !important; }
 91 |       [data-ogsc] p { color: #FFFFFF !important; }
 92 | 
 93 |       li  { color: #FFFFFF !important; }
 94 |       [data-ogsc] li { color: #FFFFFF !important; }
 95 |       
 96 |       li>span { color: #FFFFFF !important; }
 97 |       [data-ogsc] li>span { color: #FFFFFF !important; } 
 98 | 
 99 |       .link { color: #FFFFFF !important; }
100 |       [data-ogsc] .link { color: #FFFFFF !important; }
101 | 
102 |       .button { background-color: #FFFFFF !important; color:#000000!important; }
103 |       [data-ogsb] .button { background-color: #FFFFFF !important; color:#000000!important; }
104 |       
105 |     }
106 |     
107 |   </style> 
108 |   
109 |   <!--[if gte mso 9]>     
110 |     <xml>       
111 |       <o:OfficeDocumentSettings>         
112 |         <o:AllowPNG/>         
113 |         <o:PixelsPerInch>96</o:PixelsPerInch>       
114 |       </o:OfficeDocumentSettings>     
115 |     </xml>     
116 |   <![endif]-->
117 |   
118 |   <!--[if mso]>     
119 |     <style type="text/css">       
120 |       body, table, td {
121 |         font-family : Arial, helvetica, sans-serif;             
122 |       }
123 |     </style>     
124 |   <![endif]-->  
125 |   
126 | </head>
127 | <body style="margin:0; padding:0; background-color:#F2F2F2;">
128 | 
129 |   <div style="display:none;">Preheader Text</div>
130 | 
131 |   <center>
132 | 
133 |     <div style="background-color:#F2F2F2; max-width: 640px; margin: auto;">
134 |     <!--[if mso]>
135 |     <table role="presentation" width="640" cellspacing="0" cellpadding="0" border="0" align="center">
136 |     <tr>
137 |     <td>
138 |     <![endif]-->
139 | 
140 |       <table width="640" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:640px; width:100%;" bgcolor="#FFFFFF">
141 |         <tr>
142 |           <td align="center" valign="top" style="padding:10px;">
143 |             
144 |             <table width="600" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:600px; width:100%;">
145 |               <tr>
146 |                 <td align="center" valign="top" style="padding:10px;">
147 |                   Grid 1
148 |                 </td>
149 |               </tr>
150 |             </table>
151 | 
152 |           </td>
153 |         </tr>
154 |       </table>
155 | 
156 |       <table width="640" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:640px; width:100%;" bgcolor="#FFFFFF">
157 |         <tr>
158 |           <td align="center" valign="top" style="padding:10px;">
159 |             
160 |             <table width="600" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:600px; width:100%;">
161 |               <tr>
162 |                 <td width="300" align="center" valign="top" style="padding:10px;">
163 |                   Grid 2
164 |                 </td>
165 |                 <td width="300" align="center" valign="top" style="padding:10px;">
166 |                   Grid 2
167 |                 </td>
168 |               </tr>
169 |             </table>
170 | 
171 |           </td>
172 |         </tr>
173 |       </table>
174 | 
175 |       <table width="640" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:640px; width:100%;" bgcolor="#FFFFFF">
176 |         <tr>
177 |           <td align="center" valign="top" style="padding:10px;">
178 |             
179 |             <table width="600" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:600px; width:100%;">
180 |               <tr>
181 |                 <td width="200" align="center" valign="top" style="padding:10px;">
182 |                   Grid 3
183 |                 </td>
184 |                 <td width="200" align="center" valign="top" style="padding:10px;">
185 |                   Grid 3
186 |                 </td>
187 |                 <td width="200" align="center" valign="top" style="padding:10px;">
188 |                   Grid 3
189 |                 </td>
190 |               </tr>
191 |             </table>
192 | 
193 |           </td>
194 |         </tr>
195 |       </table>
196 | 
197 |       <table width="640" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:640px; width:100%;" bgcolor="#FFFFFF">
198 |         <tr>
199 |           <td align="center" valign="top" style="padding:10px;">
200 |             
201 |             <table width="600" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:600px; width:100%;">
202 |               <tr>
203 |                 <td width="150" align="center" valign="top" style="padding:10px;">
204 |                   Grid 4
205 |                 </td>
206 |                 <td width="150" align="center" valign="top" style="padding:10px;">
207 |                   Grid 4
208 |                 </td>
209 |                 <td width="150" align="center" valign="top" style="padding:10px;">
210 |                   Grid 4
211 |                 </td>
212 |                 <td width="150" align="center" valign="top" style="padding:10px;">
213 |                   Grid 4
214 |                 </td>
215 |               </tr>
216 |             </table>
217 | 
218 |           </td>
219 |         </tr>
220 |       </table>
221 | 
222 |       <table width="640" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:640px; width:100%;" bgcolor="#FFFFFF">
223 |         <tr>
224 |           <td align="center" valign="top" style="padding:10px;">
225 |             
226 |             <table width="600" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:600px; width:100%;">
227 |               <tr>
228 |                 <td width="120" align="center" valign="top" style="padding:10px;">
229 |                   Grid 5
230 |                 </td>
231 |                 <td width="120" align="center" valign="top" style="padding:10px;">
232 |                   Grid 5
233 |                 </td>
234 |                 <td width="120" align="center" valign="top" style="padding:10px;">
235 |                   Grid 5
236 |                 </td>
237 |                 <td width="120" align="center" valign="top" style="padding:10px;">
238 |                   Grid 5
239 |                 </td>
240 |                 <td width="120" align="center" valign="top" style="padding:10px;">
241 |                   Grid 5
242 |                 </td>
243 |               </tr>
244 |             </table>
245 | 
246 |           </td>
247 |         </tr>
248 |       </table>
249 | 
250 |     <!--[if mso]>
251 |     </td>
252 |     </tr>
253 |     </table>
254 |     <![endif]-->
255 |     </div>
256 | 
257 |   </center>
258 | </body>
259 | </html>


--------------------------------------------------------------------------------
/grids/fluid/fluid-grid1.html:
--------------------------------------------------------------------------------
 1 | <table width="640" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:640px; width:100%;" bgcolor="#FFFFFF">
 2 |   <tr>
 3 |     <td align="center" valign="top" style="padding:10px;">
 4 |       
 5 |       <table width="600" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:600px; width:100%;">
 6 |         <tr>
 7 |           <td align="center" valign="top" style="padding:10px;">
 8 |             Grid 1
 9 |           </td>
10 |         </tr>
11 |       </table>
12 | 
13 |     </td>
14 |   </tr>
15 | </table>


--------------------------------------------------------------------------------
/grids/fluid/fluid-grid2.html:
--------------------------------------------------------------------------------
 1 | <table width="640" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:640px; width:100%;" bgcolor="#FFFFFF">
 2 |   <tr>
 3 |     <td align="center" valign="top" style="padding:10px;">
 4 |       
 5 |       <table width="600" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:600px; width:100%;">
 6 |         <tr>
 7 |           <td width="300" align="center" valign="top" style="padding:10px;">
 8 |             Grid 2
 9 |           </td>
10 |           <td width="300" align="center" valign="top" style="padding:10px;">
11 |             Grid 2
12 |           </td>
13 |         </tr>
14 |       </table>
15 | 
16 |     </td>
17 |   </tr>
18 | </table>


--------------------------------------------------------------------------------
/grids/fluid/fluid-grid3.html:
--------------------------------------------------------------------------------
 1 | <table width="640" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:640px; width:100%;" bgcolor="#FFFFFF">
 2 |   <tr>
 3 |     <td align="center" valign="top" style="padding:10px;">
 4 |       
 5 |       <table width="600" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:600px; width:100%;">
 6 |         <tr>
 7 |           <td width="200" align="center" valign="top" style="padding:10px;">
 8 |             Grid 3
 9 |           </td>
10 |           <td width="200" align="center" valign="top" style="padding:10px;">
11 |             Grid 3
12 |           </td>
13 |           <td width="200" align="center" valign="top" style="padding:10px;">
14 |             Grid 3
15 |           </td>
16 |         </tr>
17 |       </table>
18 | 
19 |     </td>
20 |   </tr>
21 | </table>


--------------------------------------------------------------------------------
/grids/fluid/fluid-grid4.html:
--------------------------------------------------------------------------------
 1 | <table width="640" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:640px; width:100%;" bgcolor="#FFFFFF">
 2 |   <tr>
 3 |     <td align="center" valign="top" style="padding:10px;">
 4 |       
 5 |       <table width="600" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:600px; width:100%;">
 6 |         <tr>
 7 |           <td width="150" align="center" valign="top" style="padding:10px;">
 8 |             Grid 4
 9 |           </td>
10 |           <td width="150" align="center" valign="top" style="padding:10px;">
11 |             Grid 4
12 |           </td>
13 |           <td width="150" align="center" valign="top" style="padding:10px;">
14 |             Grid 4
15 |           </td>
16 |           <td width="150" align="center" valign="top" style="padding:10px;">
17 |             Grid 4
18 |           </td>
19 |         </tr>
20 |       </table>
21 | 
22 |     </td>
23 |   </tr>
24 | </table>


--------------------------------------------------------------------------------
/grids/fluid/fluid-grid5.html:
--------------------------------------------------------------------------------
 1 | <table width="640" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:640px; width:100%;" bgcolor="#FFFFFF">
 2 |   <tr>
 3 |     <td align="center" valign="top" style="padding:10px;">
 4 |       
 5 |       <table width="600" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:600px; width:100%;">
 6 |         <tr>
 7 |           <td width="120" align="center" valign="top" style="padding:10px;">
 8 |             Grid 5
 9 |           </td>
10 |           <td width="120" align="center" valign="top" style="padding:10px;">
11 |             Grid 5
12 |           </td>
13 |           <td width="120" align="center" valign="top" style="padding:10px;">
14 |             Grid 5
15 |           </td>
16 |           <td width="120" align="center" valign="top" style="padding:10px;">
17 |             Grid 5
18 |           </td>
19 |           <td width="120" align="center" valign="top" style="padding:10px;">
20 |             Grid 5
21 |           </td>
22 |         </tr>
23 |       </table>
24 | 
25 |     </td>
26 |   </tr>
27 | </table>


--------------------------------------------------------------------------------
/grids/hybrid/hybrid-grid-master.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2 | <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
  3 | <head>
  4 |   <meta name="robots" content="noindex, nofollow"/>
  5 |   <meta name="referrer" content="no-referrer"/>
  6 |   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7 |   <meta name="viewport" content="width=device-width, initial-scale=1">
  8 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  9 |   <meta name="color-scheme" content="light dark">
 10 |   <meta name="supported-color-schemes" content="light dark">  
 11 |   <title>Hybrid Grid Master</title>
 12 |   <style type="text/css">
 13 | 
 14 |     table td { border: 1px solid cyan;}  
 15 |     @media only screen and (max-width: 600px) {
 16 |       .wrapper{width:95% !important;}
 17 |     }   
 18 | 
 19 |     /* CLIENT-SPECIFIC STYLES */
 20 |     body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
 21 |     table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
 22 |     img { -ms-interpolation-mode: bicubic; }
 23 | 
 24 |     /* RESET STYLES */
 25 |     img { border: 0; outline: none; text-decoration: none; }
 26 |     table { border-collapse: collapse !important; }
 27 |     body { margin: 0 !important; padding: 0 !important; width: 100% !important; }
 28 | 
 29 |     /* iOS BLUE LINKS */
 30 |     a[x-apple-data-detectors] {
 31 |       color: inherit !important;
 32 |       text-decoration: none !important;
 33 |       font-size: inherit !important;
 34 |       font-family: inherit !important;
 35 |       font-weight: inherit !important;
 36 |       line-height: inherit !important;
 37 |     }
 38 | 
 39 |     /* ANDROID CENTER FIX */
 40 |     div[style*="margin: 16px 0;"] { margin: 0 !important; }
 41 | 
 42 |     /* MEDIA QUERIES */
 43 |     @media all and (max-width:639px){ 
 44 |       .wrapper{ width:320px!important; padding: 0 !important; }
 45 |       .container{ width:300px!important;  padding: 0 !important; }
 46 |       .mobile{ width:300px!important; display:block!important; padding: 0 !important; }
 47 |       .img{ width:100% !important; height:auto !important; }
 48 |       *[class="mobileOff"] { width: 0px !important; display: none !important; }
 49 |       *[class*="mobileOn"] { display: block !important; max-height:none !important; }
 50 |     }
 51 | 
 52 |     /* DARK MODE STYLES */
 53 |     :root {
 54 |       color-scheme: light dark;
 55 |       supported-color-schemes: light dark;
 56 |       -webkit-font-smoothing: antialiased;
 57 |       -moz-osx-font-smoothing: grayscale;
 58 |     }
 59 |     @media ( prefers-color-scheme: dark ) {
 60 | 
 61 |       body { background-color: #262626 !important; }
 62 |       [data-ogsb] body { background-color: #262626 !important; } 
 63 | 
 64 |       table { background-color: #212121 !important; }
 65 |       [data-ogsb] table { background-color: #212121 !important; } 
 66 | 
 67 |       .logo-light { display:none; display:none !important; }
 68 |       [data-ogsc] .logo-light { display:none !important; }
 69 | 
 70 |       .logo-dark { display:block !important; }
 71 |       [data-ogsc] .logo-dark { display:block !important; }
 72 | 
 73 |       h1 { color: #FFFFFF !important; }
 74 |       [data-ogsc] h1 { color: #FFFFFF !important; }
 75 | 
 76 |       h2 { color: #FFFFFF !important; }
 77 |       [data-ogsc] h2 { color: #ffffff !important; }
 78 | 
 79 |       h3 { color: #FFFFFF !important; }
 80 |       [data-ogsc] h3 { color: #FFFFFF !important; }
 81 | 
 82 |       h4 { color: #FFFFFF !important; }
 83 |       [data-ogsc] h4 { color: #FFFFFF !important; }
 84 | 
 85 |       h5 { color: #FFFFFF !important; }
 86 |       [data-ogsc] h5 { color: #FFFFFF !important; }
 87 | 
 88 |       h6 { color: #FFFFFF !important; }
 89 |       [data-ogsc] h6 { color: #FFFFFF !important; }
 90 | 
 91 |       .hr { background:#FFFFFF!important; }
 92 |       [data-ogsc] .hr { background:#FFFFFF!important; }
 93 | 
 94 |       p { color: #ffffff !important; }
 95 |       [data-ogsc] p { color: #FFFFFF !important; }
 96 | 
 97 |       li  { color: #FFFFFF !important; }
 98 |       [data-ogsc] li { color: #FFFFFF !important; }
 99 |       
100 |       li>span { color: #FFFFFF !important; }
101 |       [data-ogsc] li>span { color: #FFFFFF !important; } 
102 | 
103 |       .link { color: #FFFFFF !important; }
104 |       [data-ogsc] .link { color: #FFFFFF !important; }
105 | 
106 |       .button { background-color: #FFFFFF !important; color:#000000!important; }
107 |       [data-ogsb] .button { background-color: #FFFFFF !important; color:#000000!important; }
108 |       
109 |     }
110 | 
111 |   </style>
112 | 
113 |   <!--[if gte mso 9]>     
114 |     <xml>       
115 |       <o:OfficeDocumentSettings>         
116 |         <o:AllowPNG/>         
117 |         <o:PixelsPerInch>96</o:PixelsPerInch>       
118 |       </o:OfficeDocumentSettings>     
119 |     </xml>     
120 |   <![endif]-->
121 |   
122 |   <!--[if mso]>     
123 |     <style type="text/css">       
124 |       body, table, td {
125 |         font-family : Arial, helvetica, sans-serif;             
126 |       }
127 |     </style>     
128 |   <![endif]-->  
129 | 
130 | </head>
131 | <body style="margin:0; padding:0; background-color:#F8F8F8">
132 | 
133 |   <div style="display:none;">Preheader Text</div>
134 | 
135 |   <center>
136 | 
137 |     <table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#F8F8F8" class="wrapper">
138 |         
139 |       <tr>
140 |         <td align="center" height="100%" valign="top" width="100%">
141 |           <!--[if (gte mso 9)|(IE)]>
142 |           <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
143 |           <tr>
144 |           <td align="center" valign="top" width="600">
145 |           <![endif]-->
146 |             <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;" bgcolor="#ffffff">
147 |               <tr>
148 |                 <td align="center" valign="top" style="font-size:14px;">
149 | 
150 |                   Grid One
151 | 
152 |                 </td>
153 |               </tr>
154 |             </table>
155 |           <!--[if (gte mso 9)|(IE)]>
156 |           </td>
157 |           </tr>
158 |           </table>
159 |           <![endif]-->
160 |         </td>
161 |       </tr>
162 | 
163 |       <tr>
164 |         <td align="center" valign="top" width="100%">
165 | 
166 |           <!--[if (gte mso 9)|(IE)]>
167 |           <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
168 |           <tr>
169 |           <td align="center" valign="top" width="600">
170 |           <![endif]-->
171 |           <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;" bgcolor="#FFFFFF">
172 |             <tr>
173 |               <td align="center" valign="top" style="font-size:0;">
174 |                 <!--[if (gte mso 9)|(IE)]>
175 |                 <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
176 |                 <tr>
177 |                 <td align="left" valign="top" width="295">
178 |                 <![endif]-->
179 |                 <div style="display:inline-block; max-width:295px; vertical-align:top; width:100%;">
180 |                   <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:295px;" class="deviceWidth">
181 |                     <tr>
182 |                       <td align="center" valign="top" style="font-size:14px;">
183 | 
184 |                         Grid Two
185 | 
186 |                       </td>
187 |                     </tr>
188 |                   </table>
189 |                 </div>
190 |                 <!--[if (gte mso 9)|(IE)]>
191 |                 </td>
192 |                 <td align="left" valign="top" width="295">
193 |                 <![endif]-->
194 |                 <div style="display:inline-block; max-width:295px; vertical-align:top; width:100%;">
195 |                   <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:295px;" class="deviceWidth">
196 |                     <tr>
197 |                       <td align="center" valign="top" style="font-size:14px;">
198 | 
199 |                         Grid Two  
200 | 
201 |                       </td>
202 |                     </tr>
203 |                   </table>
204 |                 </div>
205 |                 <!--[if (gte mso 9)|(IE)]>
206 |                 </td>
207 |                 </tr>
208 |                 </table>
209 |                 <![endif]-->
210 |               </td>
211 |             </tr>
212 |           </table>
213 |           <!--[if (gte mso 9)|(IE)]>
214 |           </td>
215 |           </tr>
216 |           </table>
217 |           <![endif]-->
218 | 
219 |         </td>
220 |       </tr>
221 | 
222 |       <tr>
223 |         <td align="center" valign="top" width="100%">
224 |           <!--[if (gte mso 9)|(IE)]>
225 |           <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
226 |           <tr>
227 |           <td align="center" valign="top" width="600">
228 |           <![endif]-->
229 |           <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;" bgcolor="#FFFFFF">
230 |             <tr>
231 |               <td align="center" valign="top" style="font-size:0;">
232 |                 <!--[if (gte mso 9)|(IE)]>
233 |                 <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
234 |                 <tr>
235 |                 <td align="left" valign="top" width="195">
236 |                 <![endif]-->
237 |                 <div style="display:inline-block; max-width:195px; vertical-align:top; width:100%;">
238 |                   <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:195px;" class="deviceWidth">
239 |                     <tr>
240 |                       <td align="center" valign="top" style="font-size:14px;">
241 | 
242 |                         Grid Three
243 | 
244 |                       </td>
245 |                     </tr>
246 |                   </table>
247 |                 </div>
248 |                 <!--[if (gte mso 9)|(IE)]>
249 |                 </td>
250 |                 <td align="left" valign="top" width="195">
251 |                 <![endif]-->
252 |                 <div style="display:inline-block; max-width:195px; vertical-align:top; width:100%;">
253 |                   <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:195px;" class="deviceWidth">
254 |                     <tr>
255 |                       <td align="center" valign="top" style="font-size:14px;">
256 | 
257 |                         Grid Three
258 | 
259 |                       </td>
260 |                     </tr>
261 |                   </table>
262 |                 </div>
263 |                 <!--[if (gte mso 9)|(IE)]>
264 |                 </td>
265 |                 <td align="left" valign="top" width="195">
266 |                 <![endif]-->
267 |                 <div style="display:inline-block; max-width:195px; vertical-align:top; width:100%;">
268 |                   <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:195px;" class="deviceWidth">
269 |                     <tr>
270 |                       <td align="center" valign="top" style="font-size:14px;">
271 | 
272 |                         Grid Three
273 | 
274 |                       </td>
275 |                     </tr>
276 |                   </table>
277 |                 </div>
278 |                 <!--[if (gte mso 9)|(IE)]>
279 |                 </td>
280 |                 </tr>
281 |                 </table>
282 |                 <![endif]-->
283 |               </td>
284 |             </tr>
285 |           </table>
286 |           <!--[if (gte mso 9)|(IE)]>
287 |           </td>
288 |           </tr>
289 |           </table>
290 |           <![endif]-->
291 |         </td>
292 |       </tr>
293 | 
294 |     </table>
295 |   </center>
296 | 
297 | </body>
298 | </html>


--------------------------------------------------------------------------------
/grids/hybrid/hybrid-grid1.html:
--------------------------------------------------------------------------------
 1 | <tr>
 2 |   <td align="center" height="100%" valign="top" width="100%">
 3 |     <!--[if (gte mso 9)|(IE)]>
 4 |     <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
 5 |     <tr>
 6 |     <td align="center" valign="top" width="600">
 7 |     <![endif]-->
 8 |       <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;" bgcolor="#ffffff">
 9 |         <tr>
10 |           <td align="center" valign="top" style="font-size:14px;">
11 | 
12 |             Grid One
13 | 
14 |           </td>
15 |         </tr>
16 |       </table>
17 |     <!--[if (gte mso 9)|(IE)]>
18 |     </td>
19 |     </tr>
20 |     </table>
21 |     <![endif]-->
22 |   </td>
23 | </tr>
24 | 


--------------------------------------------------------------------------------
/grids/hybrid/hybrid-grid2.html:
--------------------------------------------------------------------------------
 1 | <tr>
 2 |   <td align="center" valign="top" width="100%">
 3 | 
 4 |     <!--[if (gte mso 9)|(IE)]>
 5 |     <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
 6 |     <tr>
 7 |     <td align="center" valign="top" width="600">
 8 |     <![endif]-->
 9 |     <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;" bgcolor="#FFFFFF">
10 |       <tr>
11 |         <td align="center" valign="top" style="font-size:0;">
12 |           <!--[if (gte mso 9)|(IE)]>
13 |           <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
14 |           <tr>
15 |           <td align="left" valign="top" width="295">
16 |           <![endif]-->
17 |           <div style="display:inline-block; max-width:295px; vertical-align:top; width:100%;">
18 |             <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:295px;" class="deviceWidth">
19 |               <tr>
20 |                 <td align="center" valign="top" style="font-size:14px;">
21 | 
22 |                   Grid Two
23 | 
24 |                 </td>
25 |               </tr>
26 |             </table>
27 |           </div>
28 |           <!--[if (gte mso 9)|(IE)]>
29 |           </td>
30 |           <td align="left" valign="top" width="295">
31 |           <![endif]-->
32 |           <div style="display:inline-block; max-width:295px; vertical-align:top; width:100%;">
33 |             <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:295px;" class="deviceWidth">
34 |               <tr>
35 |                 <td align="center" valign="top" style="font-size:14px;">
36 | 
37 |                   Grid Two  
38 | 
39 |                 </td>
40 |               </tr>
41 |             </table>
42 |           </div>
43 |           <!--[if (gte mso 9)|(IE)]>
44 |           </td>
45 |           </tr>
46 |           </table>
47 |           <![endif]-->
48 |         </td>
49 |       </tr>
50 |     </table>
51 |     <!--[if (gte mso 9)|(IE)]>
52 |     </td>
53 |     </tr>
54 |     </table>
55 |     <![endif]-->
56 | 
57 |   </td>
58 | </tr>


--------------------------------------------------------------------------------
/grids/hybrid/hybrid-grid3.html:
--------------------------------------------------------------------------------
 1 | <tr>
 2 |   <td align="center" valign="top" width="100%">
 3 |     <!--[if (gte mso 9)|(IE)]>
 4 |     <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
 5 |     <tr>
 6 |     <td align="center" valign="top" width="600">
 7 |     <![endif]-->
 8 |     <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;" bgcolor="#FFFFFF">
 9 |       <tr>
10 |         <td align="center" valign="top" style="font-size:0;">
11 |           <!--[if (gte mso 9)|(IE)]>
12 |           <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
13 |           <tr>
14 |           <td align="left" valign="top" width="195">
15 |           <![endif]-->
16 |           <div style="display:inline-block; max-width:195px; vertical-align:top; width:100%;">
17 |             <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:195px;" class="deviceWidth">
18 |               <tr>
19 |                 <td align="center" valign="top" style="font-size:14px;">
20 | 
21 |                   Grid Three
22 | 
23 |                 </td>
24 |               </tr>
25 |             </table>
26 |           </div>
27 |           <!--[if (gte mso 9)|(IE)]>
28 |           </td>
29 |           <td align="left" valign="top" width="195">
30 |           <![endif]-->
31 |           <div style="display:inline-block; max-width:195px; vertical-align:top; width:100%;">
32 |             <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:195px;" class="deviceWidth">
33 |               <tr>
34 |                 <td align="center" valign="top" style="font-size:14px;">
35 | 
36 |                   Grid Three
37 | 
38 |                 </td>
39 |               </tr>
40 |             </table>
41 |           </div>
42 |           <!--[if (gte mso 9)|(IE)]>
43 |           </td>
44 |           <td align="left" valign="top" width="195">
45 |           <![endif]-->
46 |           <div style="display:inline-block; max-width:195px; vertical-align:top; width:100%;">
47 |             <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:195px;" class="deviceWidth">
48 |               <tr>
49 |                 <td align="center" valign="top" style="font-size:14px;">
50 | 
51 |                   Grid Three
52 | 
53 |                 </td>
54 |               </tr>
55 |             </table>
56 |           </div>
57 |           <!--[if (gte mso 9)|(IE)]>
58 |           </td>
59 |           </tr>
60 |           </table>
61 |           <![endif]-->
62 |         </td>
63 |       </tr>
64 |     </table>
65 |     <!--[if (gte mso 9)|(IE)]>
66 |     </td>
67 |     </tr>
68 |     </table>
69 |     <![endif]-->
70 |   </td>
71 | </tr>


--------------------------------------------------------------------------------
/grids/responsive/responsive-grid-master.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2 | <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
  3 | <head>
  4 |   <meta name="robots" content="noindex, nofollow"/>
  5 |   <meta name="referrer" content="no-referrer"/>
  6 |   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7 |   <meta name="viewport" content="width=device-width, initial-scale=1">
  8 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  9 |   <meta name="color-scheme" content="light dark">
 10 |   <meta name="supported-color-schemes" content="light dark">  
 11 |   <title>Grids Master Template</title>
 12 | 
 13 |   <style type="text/css">
 14 |     
 15 |     CLIENT-SPECIFIC STYLES
 16 |     body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
 17 |     table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
 18 |     img { -ms-interpolation-mode: bicubic; }
 19 | 
 20 |     /* RESET STYLES */
 21 |     img { border: 0; outline: none; text-decoration: none; }
 22 |     table { border-collapse: collapse !important; }
 23 |     body { margin: 0 !important; padding: 0 !important; width: 100% !important; }
 24 | 
 25 |     /* iOS BLUE LINKS */
 26 |     a[x-apple-data-detectors] {
 27 |       color: inherit !important;
 28 |       text-decoration: none !important;
 29 |       font-size: inherit !important;
 30 |       font-family: inherit !important;
 31 |       font-weight: inherit !important;
 32 |       line-height: inherit !important;
 33 |     }
 34 | 
 35 |     /* ANDROID CENTER FIX */
 36 |     div[style*="margin: 16px 0;"] { margin: 0 !important; }
 37 | 
 38 |     /* MEDIA QUERIES */
 39 |     @media all and (max-width:639px){ 
 40 |       .wrapper{ width:320px!important; padding: 0 !important; }
 41 |       .container{ width:300px!important;  padding: 0 !important; }
 42 |       .mobile{ width:300px!important; display:block!important; padding: 0 !important; }
 43 |       .img{ width:100% !important; height:auto !important; }
 44 |       *[class="mobileOff"] { width: 0px !important; display: none !important; }
 45 |       *[class*="mobileOn"] { display: block !important; max-height:none !important; }
 46 |     }
 47 | 
 48 |     /* DARK MODE STYLES */
 49 |     :root {
 50 |       color-scheme: light dark;
 51 |       supported-color-schemes: light dark;
 52 |       -webkit-font-smoothing: antialiased;
 53 |       -moz-osx-font-smoothing: grayscale;
 54 |     }
 55 |     @media ( prefers-color-scheme: dark ) {
 56 | 
 57 |       body { background-color: #262626 !important; }
 58 |       [data-ogsb] body { background-color: #262626 !important; } 
 59 | 
 60 |       table { background-color: #212121 !important; }
 61 |       [data-ogsb] table { background-color: #212121 !important; } 
 62 | 
 63 |       .logo-light { display:none; display:none !important; }
 64 |       [data-ogsc] .logo-light { display:none !important; }
 65 | 
 66 |       .logo-dark { display:block !important; }
 67 |       [data-ogsc] .logo-dark { display:block !important; }
 68 | 
 69 |       h1 { color: #FFFFFF !important; }
 70 |       [data-ogsc] h1 { color: #FFFFFF !important; }
 71 | 
 72 |       h2 { color: #FFFFFF !important; }
 73 |       [data-ogsc] h2 { color: #ffffff !important; }
 74 | 
 75 |       h3 { color: #FFFFFF !important; }
 76 |       [data-ogsc] h3 { color: #FFFFFF !important; }
 77 | 
 78 |       h4 { color: #FFFFFF !important; }
 79 |       [data-ogsc] h4 { color: #FFFFFF !important; }
 80 | 
 81 |       h5 { color: #FFFFFF !important; }
 82 |       [data-ogsc] h5 { color: #FFFFFF !important; }
 83 | 
 84 |       h6 { color: #FFFFFF !important; }
 85 |       [data-ogsc] h6 { color: #FFFFFF !important; }
 86 | 
 87 |       .hr { background:#FFFFFF!important; }
 88 |       [data-ogsc] .hr { background:#FFFFFF!important; }
 89 | 
 90 |       p { color: #ffffff !important; }
 91 |       [data-ogsc] p { color: #FFFFFF !important; }
 92 | 
 93 |       li  { color: #FFFFFF !important; }
 94 |       [data-ogsc] li { color: #FFFFFF !important; }
 95 |       
 96 |       li>span { color: #FFFFFF !important; }
 97 |       [data-ogsc] li>span { color: #FFFFFF !important; } 
 98 | 
 99 |       .link { color: #FFFFFF !important; }
100 |       [data-ogsc] .link { color: #FFFFFF !important; }
101 | 
102 |       .button { background-color: #FFFFFF !important; color:#000000!important; }
103 |       [data-ogsb] .button { background-color: #FFFFFF !important; color:#000000!important; }
104 |       
105 |     }
106 | 
107 |   </style> 
108 |   
109 |   <!--[if gte mso 9]>     
110 |     <xml>       
111 |       <o:OfficeDocumentSettings>         
112 |         <o:AllowPNG/>         
113 |         <o:PixelsPerInch>96</o:PixelsPerInch>       
114 |       </o:OfficeDocumentSettings>     
115 |     </xml>     
116 |   <![endif]-->
117 |   
118 |   <!--[if mso]>     
119 |     <style type="text/css">       
120 |       body, table, td {
121 |         font-family : Arial, helvetica, sans-serif;             
122 |       }
123 |     </style>     
124 |   <![endif]-->  
125 |   
126 | </head>
127 | <body style="margin:0; padding:0; background-color:#F2F2F2;">
128 |   
129 |   <div style="display:none;">Preheader Text</div>
130 |   
131 |   <center>
132 |     <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#F2F2F2">
133 |       <tr>
134 |         <td align="center" valign="top">
135 |             
136 |           <table width="640" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#FFFFFF">
137 |             <tr>
138 |               <td height="10" style="font-size:10px; line-height:10px;">&nbsp;</td>
139 |             </tr>
140 |             <tr>
141 |               <td align="center" valign="top">
142 | 
143 |                 <table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
144 |                   <tr>
145 |                     <td align="center" valign="top">
146 |                       Grid One
147 |                     </td>
148 |                   </tr>
149 |                 </table>
150 | 
151 |               </td>
152 |             </tr>
153 |             <tr>
154 |               <td height="10" style="font-size:10px; line-height:10px;">&nbsp;</td>
155 |             </tr>
156 |           </table>
157 | 
158 |           <table width="640" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#FFFFFF">
159 |             <tr>
160 |               <td height="10" style="font-size:10px; line-height:10px;">&nbsp;</td>
161 |             </tr>
162 |             <tr>
163 |               <td align="center" valign="top">
164 | 
165 |                 <table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
166 |                   <tr>
167 |                     <td width="300" class="mobile" align="center" valign="top">
168 |                       Grid Two
169 |                     </td>
170 |                     <td width="300" class="mobile" align="center" valign="top">
171 |                       Grid Two
172 |                     </td>
173 |                   </tr>
174 |                 </table>
175 | 
176 |               </td>
177 |             </tr>
178 |             <tr>
179 |               <td height="10" style="font-size:10px; line-height:10px;">&nbsp;</td>
180 |             </tr>
181 |           </table>
182 | 
183 |           <table width="640" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#FFFFFF">
184 |             <tr>
185 |              <td height="10" style="font-size:10px; line-height:10px;">&nbsp;</td>
186 |             </tr>
187 |             <tr>
188 |               <td align="center" valign="top">
189 | 
190 |                 <table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
191 |                   <tr>
192 |                       <td width="200" class="mobile" align="center" valign="top">
193 |                         Grid Three
194 |                       </td>
195 |                       <td width="200" class="mobile" align="center" valign="top">
196 |                         Grid Three
197 |                       </td>
198 |                       <td width="200" class="mobile" align="center" valign="top">
199 |                         Grid Three
200 |                       </td>
201 |                   </tr>
202 |                 </table>
203 | 
204 |               </td>
205 |             </tr>
206 |             <tr>
207 |               <td height="10" style="font-size:10px; line-height:10px;">&nbsp;</td>
208 |             </tr>
209 |           </table>
210 | 
211 |           <table width="640" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#FFFFFF">
212 |             <tr>
213 |               <td height="10" style="font-size:10px; line-height:10px;">&nbsp;</td>
214 |             </tr>
215 |             <tr>
216 |               <td align="center" valign="top">
217 | 
218 |                 <table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
219 |                   <tr>
220 |                     <td width="150" class="mobile" align="center" valign="top">
221 |                       Grid Four
222 |                     </td>
223 |                     <td width="150" class="mobile" align="center" valign="top">
224 |                       Grid Four
225 |                     </td>
226 |                     <td width="150" class="mobile" align="center" valign="top">
227 |                       Grid Four
228 |                     </td>
229 |                     <td width="150" class="mobile" align="center" valign="top">
230 |                       Grid Four
231 |                     </td>
232 |                   </tr>
233 |                 </table>
234 | 
235 |               </td>
236 |             </tr>
237 |             <tr>
238 |               <td height="10" style="font-size:10px; line-height:10px;">&nbsp;</td>
239 |             </tr>
240 |           </table>
241 | 
242 |           <table width="640" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#FFFFFF">
243 |             <tr>
244 |               <td height="10" style="font-size:10px; line-height:10px;">&nbsp;</td>
245 |             </tr>
246 |             <tr>
247 |               <td align="center" valign="top">
248 | 
249 |                 <table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
250 |                   <tr>
251 |                     <td width="120" class="mobile" align="center" valign="top">
252 |                       Grid Five
253 |                     </td>
254 |                     <td width="120" class="mobile" align="center" valign="top">
255 |                       Grid Five
256 |                     </td>
257 |                     <td width="120" class="mobile" align="center" valign="top">
258 |                       Grid Five
259 |                     </td>
260 |                     <td width="120" class="mobile" align="center" valign="top">
261 |                       Grid Five
262 |                     </td>
263 |                     <td width="120" class="mobile" align="center" valign="top">
264 |                       Grid Five
265 |                     </td>
266 |                   </tr>
267 |                 </table>
268 | 
269 |               </td>
270 |             </tr>
271 |             <tr>
272 |               <td height="10" style="font-size:10px; line-height:10px;">&nbsp;</td>
273 |             </tr>
274 |           </table>
275 |             
276 |         </td>
277 |       </tr>
278 |     </table>
279 |   </center>
280 | </body>
281 | </html>
282 | 


--------------------------------------------------------------------------------
/grids/responsive/responsive-grid1.html:
--------------------------------------------------------------------------------
 1 | <table width="640" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#FFFFFF">
 2 |   <tr>
 3 |     <td height="10" style="font-size:10px; line-height:10px;">&nbsp;</td>
 4 |   </tr>
 5 |   <tr>
 6 |     <td align="center" valign="top">
 7 | 
 8 |       <table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
 9 |         <tr>
10 |           <td align="center" valign="top">
11 |             Grid One
12 |           </td>
13 |         </tr>
14 |       </table>
15 | 
16 |     </td>
17 |   </tr>
18 |   <tr>
19 |     <td height="10" style="font-size:10px; line-height:10px;">&nbsp;</td>
20 |   </tr>
21 | </table>
22 | 


--------------------------------------------------------------------------------
/grids/responsive/responsive-grid2.html:
--------------------------------------------------------------------------------
 1 | <table width="640" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#FFFFFF">
 2 |   <tr>
 3 |     <td height="10" style="font-size:10px; line-height:10px;">&nbsp;</td>
 4 |   </tr>
 5 |   <tr>
 6 |     <td align="center" valign="top">
 7 | 
 8 |       <table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
 9 |         <tr>
10 |           <td width="300" class="mobile" align="center" valign="top">
11 |             Grid Two
12 |           </td>
13 |           <td width="300" class="mobile" align="center" valign="top">
14 |             Grid Two
15 |           </td>
16 |         </tr>
17 |       </table>
18 | 
19 |     </td>
20 |   </tr>
21 |   <tr>
22 |     <td height="10" style="font-size:10px; line-height:10px;">&nbsp;</td>
23 |   </tr>
24 | </table>
25 | 


--------------------------------------------------------------------------------
/grids/responsive/responsive-grid3.html:
--------------------------------------------------------------------------------
 1 | <table width="640" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#FFFFFF">
 2 |   <tr>
 3 |    <td height="10" style="font-size:10px; line-height:10px;">&nbsp;</td>
 4 |   </tr>
 5 |   <tr>
 6 |     <td align="center" valign="top">
 7 | 
 8 |       <table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
 9 |         <tr>
10 |             <td width="200" class="mobile" align="center" valign="top">
11 |               Grid Three
12 |             </td>
13 |             <td width="200" class="mobile" align="center" valign="top">
14 |               Grid Three
15 |             </td>
16 |             <td width="200" class="mobile" align="center" valign="top">
17 |               Grid Three
18 |             </td>
19 |         </tr>
20 |       </table>
21 | 
22 |     </td>
23 |   </tr>
24 |   <tr>
25 |     <td height="10" style="font-size:10px; line-height:10px;">&nbsp;</td>
26 |   </tr>
27 | </table>
28 | 


--------------------------------------------------------------------------------
/grids/responsive/responsive-grid4.html:
--------------------------------------------------------------------------------
 1 | <table width="640" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#FFFFFF">
 2 |   <tr>
 3 |     <td height="10" style="font-size:10px; line-height:10px;">&nbsp;</td>
 4 |   </tr>
 5 |   <tr>
 6 |     <td align="center" valign="top">
 7 | 
 8 |       <table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
 9 |         <tr>
10 |           <td width="150" class="mobile" align="center" valign="top">
11 |             Grid Four
12 |           </td>
13 |           <td width="150" class="mobile" align="center" valign="top">
14 |             Grid Four
15 |           </td>
16 |           <td width="150" class="mobile" align="center" valign="top">
17 |             Grid Four
18 |           </td>
19 |           <td width="150" class="mobile" align="center" valign="top">
20 |             Grid Four
21 |           </td>
22 |         </tr>
23 |       </table>
24 | 
25 |     </td>
26 |   </tr>
27 |   <tr>
28 |     <td height="10" style="font-size:10px; line-height:10px;">&nbsp;</td>
29 |   </tr>
30 | </table>
31 | 


--------------------------------------------------------------------------------
/grids/responsive/responsive-grid5.html:
--------------------------------------------------------------------------------
 1 | <table width="640" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#FFFFFF">
 2 |   <tr>
 3 |     <td height="10" style="font-size:10px; line-height:10px;">&nbsp;</td>
 4 |   </tr>
 5 |   <tr>
 6 |     <td align="center" valign="top">
 7 | 
 8 |       <table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
 9 |         <tr>
10 |           <td width="120" class="mobile" align="center" valign="top">
11 |             Grid Five
12 |           </td>
13 |           <td width="120" class="mobile" align="center" valign="top">
14 |             Grid Five
15 |           </td>
16 |           <td width="120" class="mobile" align="center" valign="top">
17 |             Grid Five
18 |           </td>
19 |           <td width="120" class="mobile" align="center" valign="top">
20 |             Grid Five
21 |           </td>
22 |           <td width="120" class="mobile" align="center" valign="top">
23 |             Grid Five
24 |           </td>
25 |         </tr>
26 |       </table>
27 | 
28 |     </td>
29 |   </tr>
30 |   <tr>
31 |     <td height="10" style="font-size:10px; line-height:10px;">&nbsp;</td>
32 |   </tr>
33 | </table>
34 | 


--------------------------------------------------------------------------------
/mail.css:
--------------------------------------------------------------------------------
 1 | /* CLIENT-SPECIFIC STYLES */
 2 | body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
 3 | table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
 4 | img { -ms-interpolation-mode: bicubic; }
 5 | 
 6 | /* RESET STYLES */
 7 | img { border: 0; outline: none; text-decoration: none; }
 8 | table { border-collapse: collapse !important; }
 9 | body { margin: 0 !important; padding: 0 !important; width: 100% !important; }
10 | 
11 | /* iOS BLUE LINKS */
12 | a[x-apple-data-detectors] {
13 |   color: inherit !important;
14 |   text-decoration: none !important;
15 |   font-size: inherit !important;
16 |   font-family: inherit !important;
17 |   font-weight: inherit !important;
18 |   line-height: inherit !important;
19 | }
20 | 
21 | /* ANDROID CENTER FIX */
22 | div[style*="margin: 16px 0;"] { margin: 0 !important; }
23 | 
24 | /* MEDIA QUERIES */
25 | @media all and (max-width:639px){ 
26 |   .wrapper{ width:320px!important; padding: 0 !important; }
27 |   .container{ width:300px!important;  padding: 0 !important; }
28 |   .mobile{ width:300px!important; display:block!important; padding: 0 !important; }
29 |   .img{ width:100% !important; height:auto !important; }
30 |   *[class="mobileOff"] { width: 0px !important; display: none !important; }
31 |   *[class*="mobileOn"] { display: block !important; max-height:none !important; }
32 | }
33 | 
34 | /* DARK MODE STYLES */
35 | :root {
36 |   color-scheme: light dark;
37 |   supported-color-schemes: light dark;
38 |   -webkit-font-smoothing: antialiased;
39 |   -moz-osx-font-smoothing: grayscale;
40 | }
41 | @media ( prefers-color-scheme: dark ) {
42 | 
43 |   body { background-color: #262626 !important; }
44 |   [data-ogsb] body { background-color: #262626 !important; } 
45 | 
46 |   table { background-color: #212121 !important; }
47 |   [data-ogsb] table { background-color: #212121 !important; } 
48 | 
49 |   .logo-light { display:none; display:none !important; }
50 |   [data-ogsc] .logo-light { display:none !important; }
51 | 
52 |   .logo-dark { display:block !important; }
53 |   [data-ogsc] .logo-dark { display:block !important; }
54 | 
55 |   h1 { color: #FFFFFF !important; }
56 |   [data-ogsc] h1 { color: #FFFFFF !important; }
57 | 
58 |   h2 { color: #FFFFFF !important; }
59 |   [data-ogsc] h2 { color: #ffffff !important; }
60 | 
61 |   h3 { color: #FFFFFF !important; }
62 |   [data-ogsc] h3 { color: #FFFFFF !important; }
63 | 
64 |   h4 { color: #FFFFFF !important; }
65 |   [data-ogsc] h4 { color: #FFFFFF !important; }
66 | 
67 |   h5 { color: #FFFFFF !important; }
68 |   [data-ogsc] h5 { color: #FFFFFF !important; }
69 | 
70 |   h6 { color: #FFFFFF !important; }
71 |   [data-ogsc] h6 { color: #FFFFFF !important; }
72 | 
73 |   .hr { background:#FFFFFF!important; }
74 |   [data-ogsc] .hr { background:#FFFFFF!important; }
75 | 
76 |   p { color: #ffffff !important; }
77 |   [data-ogsc] p { color: #FFFFFF !important; }
78 | 
79 |   li  { color: #FFFFFF !important; }
80 |   [data-ogsc] li { color: #FFFFFF !important; }
81 |   
82 |   li>span { color: #FFFFFF !important; }
83 |   [data-ogsc] li>span { color: #FFFFFF !important; } 
84 | 
85 |   .link { color: #FFFFFF !important; }
86 |   [data-ogsc] .link { color: #FFFFFF !important; }
87 | 
88 |   .button { background-color: #FFFFFF !important; color:#000000!important; }
89 |   [data-ogsb] .button { background-color: #FFFFFF !important; color:#000000!important; }
90 |   
91 | }
92 | 


--------------------------------------------------------------------------------
/snippets/atom/snippets.cson:
--------------------------------------------------------------------------------
  1 | # Snippets for Email-Framwork
  2 | 
  3 | '.text.html':
  4 |   'Boiler Plate for Mails':
  5 |     'prefix': 'mail-boilerplate'
  6 |     'body': '''
  7 |     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  8 |     <html lang="en">
  9 |     <head>
 10 |       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 11 |       <meta name="viewport" content="width=device-width, initial-scale=1">
 12 |       <meta http-equiv="X-UA-Compatible" content="IE=edge">
 13 | 
 14 |       <title></title>
 15 | 
 16 |       <style type="text/css">
 17 |       </style>    
 18 |     </head>
 19 |     <body style="margin:0; padding:0; background-color:#F2F2F2;">
 20 |       <center>
 21 |         <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#F2F2F2">
 22 |             <tr>
 23 |                 <td align="center" valign="top">
 24 | 
 25 |                   $1
 26 | 
 27 |                 </td>
 28 |             </tr>
 29 |         </table>
 30 |       </center>
 31 |     </body>
 32 |     </html>
 33 |     '''
 34 | 
 35 |   'Mail Content':
 36 |     'prefix': 'mail-content'
 37 |     'body': '''
 38 |     <table width="$1" cellpadding="0" cellspacing="0" border="0" class="container">
 39 |       <tr>
 40 |         <td align="center" valign="top">
 41 |           $2
 42 |         </td>               
 43 |       </tr>
 44 |     </table>
 45 |     '''
 46 | 
 47 |   'Mail CSS':
 48 |     'prefix': 'mail-css'
 49 |     'body': '''
 50 |     /* CLIENT-SPECIFIC STYLES */
 51 |     body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
 52 |     table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
 53 |     img { -ms-interpolation-mode: bicubic; }
 54 |     /* RESET STYLES */
 55 |     img { border: 0; outline: none; text-decoration: none; }
 56 |     table { border-collapse: collapse !important; }
 57 |     body { margin: 0 !important; padding: 0 !important; width: 100% !important; }
 58 |     /* iOS BLUE LINKS */
 59 |     a[x-apple-data-detectors] {
 60 |       color: inherit !important;
 61 |       text-decoration: none !important;
 62 |       font-size: inherit !important;
 63 |       font-family: inherit !important;
 64 |       font-weight: inherit !important;
 65 |       line-height: inherit !important;
 66 |     }
 67 |     /* ANDROID CENTER FIX */
 68 |     div[style*="margin: 16px 0;"] { margin: 0 !important; }
 69 |     /* MEDIA QUERIES */
 70 |     @media all and (max-width:639px){ 
 71 |       .wrapper{ width:320px!important; padding: 0 !important; }
 72 |       .container{ width:300px!important;  padding: 0 !important; }
 73 |       .mobile{ width:300px!important; display:block!important; padding: 0 !important; }
 74 |       .img{ width:100% !important; height:auto !important; }
 75 |       *[class="mobileOff"] { width: 0px !important; display: none !important; }
 76 |       *[class*="mobileOn"] { display: block !important; max-height:none !important; }
 77 |     }
 78 |     '''
 79 | 
 80 |     'Mail r Grid 1':
 81 |     'prefix': 'mail-rgrid1'
 82 |     'body': '''
 83 |     <table width="640" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#FFFFFF">
 84 |       <tr>
 85 |         <td height="10" style="font-size:10px; line-height:10px;">&nbsp;</td>
 86 |       </tr>
 87 |       <tr>
 88 |         <td align="center" valign="top">
 89 |           <table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
 90 |             <tr>
 91 |               <td align="center" valign="top">
 92 |                 $1
 93 |               </td>
 94 |             </tr>
 95 |           </table>
 96 |         </td>
 97 |       </tr>
 98 |       <tr>
 99 |         <td height="10" style="font-size:10px; line-height:10px;">&nbsp;</td>
100 |       </tr>
101 |     </table>
102 |     '''
103 | 
104 |   'Mail r Grid 2':
105 |     'prefix': 'mail-rgrid2'
106 |     'body': '''
107 |     <table width="640" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#FFFFFF">
108 |       <tr>
109 |         <td height="10" style="font-size:10px; line-height:10px;">&nbsp;</td>
110 |       </tr>
111 |       <tr>
112 |         <td align="center" valign="top">
113 |           <table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
114 |             <tr>
115 |               <td width="300" class="mobile" align="center" valign="top">
116 |                 $1
117 |               </td>
118 |               <td width="300" class="mobile" align="center" valign="top">
119 |                 $2
120 |               </td>
121 |             </tr>
122 |           </table>
123 |         </td>
124 |       </tr>
125 |       <tr>
126 |         <td height="10" style="font-size:10px; line-height:10px;">&nbsp;</td>
127 |       </tr>
128 |     </table>
129 |     '''
130 | 
131 |   'Mail r Grid 3':
132 |     'prefix': 'mail-rgrid3'
133 |     'body': '''
134 |     <table width="640" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#FFFFFF">
135 |       <tr>
136 |        <td height="10" style="font-size:10px; line-height:10px;">&nbsp;</td>
137 |       </tr>
138 |       <tr>
139 |         <td align="center" valign="top">
140 |           <table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
141 |             <tr>
142 |                 <td width="200" class="mobile" align="center" valign="top">
143 |                   $1
144 |                 </td>
145 |                 <td width="200" class="mobile" align="center" valign="top">
146 |                   $2
147 |                 </td>
148 |                 <td width="200" class="mobile" align="center" valign="top">
149 |                   $3
150 |                 </td>
151 |             </tr>
152 |           </table>
153 |         </td>
154 |       </tr>
155 |       <tr>
156 |         <td height="10" style="font-size:10px; line-height:10px;">&nbsp;</td>
157 |       </tr>
158 |     </table>
159 |     '''
160 | 
161 |   'Mail r Grid 4':
162 |     'prefix': 'mail-rgrid4'
163 |     'body': '''
164 |     <table width="640" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#FFFFFF">
165 |       <tr>
166 |         <td height="10" style="font-size:10px; line-height:10px;">&nbsp;</td>
167 |       </tr>
168 |       <tr>
169 |         <td align="center" valign="top">
170 |           <table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
171 |             <tr>
172 |               <td width="150" class="mobile" align="center" valign="top">
173 |                 $1
174 |               </td>
175 |               <td width="150" class="mobile" align="center" valign="top">
176 |                 $2
177 |               </td>
178 |               <td width="150" class="mobile" align="center" valign="top">
179 |                 $3
180 |               </td>
181 |               <td width="150" class="mobile" align="center" valign="top">
182 |                 $4
183 |               </td>
184 |             </tr>
185 |           </table>
186 |         </td>
187 |       </tr>
188 |       <tr>
189 |         <td height="10" style="font-size:10px; line-height:10px;">&nbsp;</td>
190 |       </tr>
191 |     </table>
192 |     '''
193 | 
194 |   'Mail r Grid 5':
195 |     'prefix': 'mail-rgrid5'
196 |     'body': '''
197 |     <table width="640" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#FFFFFF">
198 |       <tr>
199 |         <td height="10" style="font-size:10px; line-height:10px;">&nbsp;</td>
200 |       </tr>
201 |       <tr>
202 |         <td align="center" valign="top">
203 |           <table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
204 |             <tr>
205 |               <td width="120" class="mobile" align="center" valign="top">
206 |                 $1
207 |               </td>
208 |               <td width="120" class="mobile" align="center" valign="top">
209 |                 $2
210 |               </td>
211 |               <td width="120" class="mobile" align="center" valign="top">
212 |                 $3
213 |               </td>
214 |               <td width="120" class="mobile" align="center" valign="top">
215 |                 $4
216 |               </td>
217 |               <td width="120" class="mobile" align="center" valign="top">
218 |                 $5
219 |               </td>
220 |             </tr>
221 |           </table>
222 |         </td>
223 |       </tr>
224 |       <tr>
225 |         <td height="10" style="font-size:10px; line-height:10px;">&nbsp;</td>
226 |       </tr>
227 |     </table>
228 |     '''
229 |     
230 |     'Mail f Grid 1':
231 |     'prefix': 'mail-fgrid1'
232 |     'body': '''
233 |     <table width="640" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:640px; width:100%;" bgcolor="#FFFFFF">
234 |       <tr>
235 |         <td align="center" valign="top" style="padding:10px;">
236 | 
237 |           <table width="600" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:600px; width:100%;">
238 |             <tr>
239 |               <td align="center" valign="top" style="padding:10px;">
240 |                 $1
241 |               </td>
242 |             </tr>
243 |           </table>
244 |         </td>
245 |       </tr>
246 |     </table>
247 |     '''
248 |     
249 |     'Mail f Grid 2':
250 |     'prefix': 'mail-fgrid2'
251 |     'body': '''
252 |     <table width="640" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:640px; width:100%;" bgcolor="#FFFFFF">
253 |       <tr>
254 |         <td align="center" valign="top" style="padding:10px;">
255 | 
256 |           <table width="600" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:600px; width:100%;">
257 |             <tr>
258 |               <td width="300" align="center" valign="top" style="padding:10px;">
259 |                 $1
260 |               </td>
261 |               <td width="300" align="center" valign="top" style="padding:10px;">
262 |                 $2
263 |               </td>
264 |             </tr>
265 |           </table>
266 |         </td>
267 |       </tr>
268 |     </table>
269 |     '''
270 |     
271 |     'Mail f Grid 3':
272 |     'prefix': 'mail-fgrid3'
273 |     'body': '''
274 |     <table width="640" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:640px; width:100%;" bgcolor="#FFFFFF">
275 |       <tr>
276 |         <td align="center" valign="top" style="padding:10px;">
277 | 
278 |           <table width="600" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:600px; width:100%;">
279 |             <tr>
280 |               <td width="200" align="center" valign="top" style="padding:10px;">
281 |                 $1
282 |               </td>
283 |               <td width="200" align="center" valign="top" style="padding:10px;">
284 |                 $2
285 |               </td>
286 |               <td width="200" align="center" valign="top" style="padding:10px;">
287 |                 $3
288 |               </td>
289 |             </tr>
290 |           </table>
291 |         </td>
292 |       </tr>
293 |     </table>
294 |     '''
295 |     
296 |     'Mail f Grid 4':
297 |     'prefix': 'mail-fgrid4'
298 |     'body': '''
299 |     <table width="640" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:640px; width:100%;" bgcolor="#FFFFFF">
300 |       <tr>
301 |         <td align="center" valign="top" style="padding:10px;">
302 | 
303 |           <table width="600" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:600px; width:100%;">
304 |             <tr>
305 |               <td width="150" align="center" valign="top" style="padding:10px;">
306 |                 $1
307 |               </td>
308 |               <td width="150" align="center" valign="top" style="padding:10px;">
309 |                 $2
310 |               </td>
311 |               <td width="150" align="center" valign="top" style="padding:10px;">
312 |                 $3
313 |               </td>
314 |               <td width="150" align="center" valign="top" style="padding:10px;">
315 |                 $4
316 |               </td>
317 |             </tr>
318 |           </table>
319 |         </td>
320 |       </tr>
321 |     </table>
322 |     '''
323 |     
324 |     'Mail f Grid 5':
325 |     'prefix': 'mail-fgrid5'
326 |     'body': '''
327 |     <table width="640" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:640px; width:100%;" bgcolor="#FFFFFF">
328 |       <tr>
329 |         <td align="center" valign="top" style="padding:10px;">
330 | 
331 |           <table width="600" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:600px; width:100%;">
332 |             <tr>
333 |               <td width="120" align="center" valign="top" style="padding:10px;">
334 |                 $1
335 |               </td>
336 |               <td width="120" align="center" valign="top" style="padding:10px;">
337 |                 $2
338 |               </td>
339 |               <td width="120" align="center" valign="top" style="padding:10px;">
340 |                 $3
341 |               </td>
342 |               <td width="120" align="center" valign="top" style="padding:10px;">
343 |                 $4
344 |               </td>
345 |               <td width="120" align="center" valign="top" style="padding:10px;">
346 |                 $5
347 |               </td>
348 |             </tr>
349 |           </table>
350 |         </td>
351 |       </tr>
352 |     </table>
353 |     '''
354 | 
355 |   'Mail img':
356 |     'prefix': 'mail-img'
357 |     'body': '''
358 |       <img src="images/$1" width="$2" height="$3" style="margin:0; padding:0; border:none; display:block;" border="0" class="img" alt="$4">
359 |     '''
360 | 
361 |   'Mail Block Mobile':
362 |     'prefix': 'mail-mobileblock'
363 |     'body': '''
364 |       <!--[if !mso]><!-- -->
365 |       <div class="mobileOn" style="font-size: 0; max-height: 0; overflow: hidden; display: none">
366 |         <table width="320" cellspacing="0" cellpadding="0" border="0" class="mobile" align="center">
367 |           <tr>
368 |             <td align="center" style="color: #000000; font-size: 12px; line-height: 18px;">
369 |               $1
370 |             </td>
371 |           </tr>
372 |         </table>
373 |       </div>
374 |       <!--<![endif]-->
375 |     '''
376 | 
377 |   'Mail mspace':
378 |     'prefix': 'mail-mspace'
379 |     'body': '''
380 |       <td height="$1" style="font-size:$1px; line-height:$1px;" class="mobileOn">&nbsp;</td>
381 |     '''
382 | 
383 |   'Mail Row':
384 |     'prefix': 'mail-row'
385 |     'body': '''
386 |       <tr>
387 |         <td align="center" valign="top">
388 |           $1
389 |         </td>
390 |       </tr>
391 |     '''
392 | 
393 |   'Mail Space':
394 |     'prefix': 'mail-space'
395 |     'body': '''
396 |       <tr>
397 |         <td height="$1" style="font-size:$1px; line-height:$1px;">&nbsp;</td>
398 |       </tr>
399 |     '''
400 |     
401 |     'Mail Button':
402 |     'prefix': 'mail-button'
403 |     'body': '''
404 |       <table width="200" height="44" cellpadding="0" cellspacing="0" border="0" bgcolor="#2b3a63" style="border-radius:4px;">
405 |         <tr>
406 |           <td align="center" valign="middle" height="44" style="font-family: Arial, sans-serif; font-size:14px; font-weight:bold;">
407 |             <a href="$1" target="_blank" style="font-family: Arial, sans-serif; color:#ffffff; display: inline-block; text-decoration: none; line-height:44px; width:200px; font-weight:bold;">$2</a>
408 |           </td>
409 |         </tr>
410 |       </table>
411 |     '''
412 | 


--------------------------------------------------------------------------------
/snippets/sublime/arial.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 |   <content><![CDATA[
3 | font-family: Arial, sans-serif;
4 | ]]></content>
5 | <tabTrigger>arial</tabTrigger>
6 | </snippet>
7 | 


--------------------------------------------------------------------------------
/snippets/sublime/boilerplate.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |     <content><![CDATA[
 3 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 | <html lang="en">
 5 | <head>
 6 |   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 9 | 
10 |   <title>$1</title>
11 | 
12 |   <style type="text/css">
13 |   </style>    
14 | </head>
15 | <body style="margin:0; padding:0; background-color:#F2F2F2;">
16 |   <center>
17 |     <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#F2F2F2">
18 |         <tr>
19 |             <td align="center" valign="top">
20 |                 
21 |  		$2              
22 |  
23 |             </td>
24 |         </tr>
25 |     </table>
26 |   </center>
27 | </body>
28 | </html>
29 | ]]></content>
30 | <tabTrigger>boilerplate</tabTrigger>
31 | </snippet>
32 | 


--------------------------------------------------------------------------------
/snippets/sublime/button.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | <content><![CDATA[
 3 | <table width="200" height="44" cellpadding="0" cellspacing="0" border="0" bgcolor="#2b3a63" style="border-radius:4px;">
 4 |   <tr>
 5 |     <td align="center" valign="middle" height="44" style="font-family: Arial, sans-serif; font-size:14px; font-weight:bold;">
 6 |       <a href="$1" target="_blank" style="font-family: Arial, sans-serif; color:#ffffff; display: inline-block; text-decoration: none; line-height:44px; width:200px; font-weight:bold;">$2</a>
 7 |     </td>
 8 |   </tr>
 9 | </table>
10 | ]]></content>
11 | <tabTrigger>button</tabTrigger>
12 | </snippet>
13 | 


--------------------------------------------------------------------------------
/snippets/sublime/content.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | <content><![CDATA[
 3 | <table width="$1" cellpadding="0" cellspacing="0" border="0" class="container">
 4 |   <tr>
 5 |     <td align="center" valign="top">
 6 |       $2
 7 |     </td>               
 8 |   </tr>
 9 | </table>
10 | ]]></content>
11 | <tabTrigger>content</tabTrigger>
12 | </snippet>
13 | 


--------------------------------------------------------------------------------
/snippets/sublime/css.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | <content><![CDATA[
 3 | /* CLIENT-SPECIFIC STYLES */
 4 | body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
 5 | table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
 6 | img { -ms-interpolation-mode: bicubic; }
 7 | 
 8 | /* RESET STYLES */
 9 | img { border: 0; outline: none; text-decoration: none; }
10 | table { border-collapse: collapse !important; }
11 | body { margin: 0 !important; padding: 0 !important; width: 100% !important; }
12 | 
13 | /* iOS BLUE LINKS */
14 | a[x-apple-data-detectors] {
15 |   color: inherit !important;
16 |   text-decoration: none !important;
17 |   font-size: inherit !important;
18 |   font-family: inherit !important;
19 |   font-weight: inherit !important;
20 |   line-height: inherit !important;
21 | }
22 | 
23 | /* ANDROID CENTER FIX */
24 | div[style*="margin: 16px 0;"] { margin: 0 !important; }
25 | 
26 | /* MEDIA QUERIES */
27 | @media all and (max-width:639px){ 
28 |   .wrapper{ width:320px!important; padding: 0 !important; }
29 |   .container{ width:300px!important;  padding: 0 !important; }
30 |   .mobile{ width:300px!important; display:block!important; padding: 0 !important; }
31 |   .img{ width:100% !important; height:auto !important; }
32 |   *[class="mobileOff"] { width: 0px !important; display: none !important; }
33 |   *[class*="mobileOn"] { display: block !important; max-height:none !important; }
34 | }
35 | ]]></content>
36 | <tabTrigger>css</tabTrigger>
37 | </snippet>
38 | 


--------------------------------------------------------------------------------
/snippets/sublime/fgrid1.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | <content><![CDATA[
 3 | <table width="640" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:640px; width:100%;" bgcolor="#FFFFFF">
 4 |   <tr>
 5 |     <td align="center" valign="top" style="padding:10px;">
 6 |       
 7 |       <table width="600" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:600px; width:100%;">
 8 |         <tr>
 9 |           <td align="center" valign="top" style="padding:10px;">
10 |             $1
11 |           </td>
12 |         </tr>
13 |       </table>
14 | 
15 |     </td>
16 |   </tr>
17 | </table>
18 | ]]></content>
19 | <tabTrigger>fgrid1</tabTrigger>
20 | </snippet>
21 | 


--------------------------------------------------------------------------------
/snippets/sublime/fgrid2.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | <content><![CDATA[
 3 | <table width="640" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:640px; width:100%;" bgcolor="#FFFFFF">
 4 |   <tr>
 5 |     <td align="center" valign="top" style="padding:10px;">
 6 |       
 7 |       <table width="600" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:600px; width:100%;">
 8 |         <tr>
 9 |           <td width="300" align="center" valign="top" style="padding:10px;">
10 |             $1
11 |           </td>
12 |           <td width="300" align="center" valign="top" style="padding:10px;">
13 |             $2
14 |           </td>
15 |         </tr>
16 |       </table>
17 | 
18 |     </td>
19 |   </tr>
20 | </table>
21 | ]]></content>
22 | <tabTrigger>fgrid2</tabTrigger>
23 | </snippet>
24 | 


--------------------------------------------------------------------------------
/snippets/sublime/fgrid3.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | <content><![CDATA[
 3 | <table width="640" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:640px; width:100%;" bgcolor="#FFFFFF">
 4 |   <tr>
 5 |     <td align="center" valign="top" style="padding:10px;">
 6 |       
 7 |       <table width="600" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:600px; width:100%;">
 8 |         <tr>
 9 |           <td width="200" align="center" valign="top" style="padding:10px;">
10 |             $1
11 |           </td>
12 |           <td width="200" align="center" valign="top" style="padding:10px;">
13 |             $2
14 |           </td>
15 |           <td width="200" align="center" valign="top" style="padding:10px;">
16 |             $3
17 |           </td>
18 |         </tr>
19 |       </table>
20 | 
21 |     </td>
22 |   </tr>
23 | </table>
24 | ]]></content>
25 | <tabTrigger>fgrid3</tabTrigger>
26 | </snippet>
27 | 
28 | 


--------------------------------------------------------------------------------
/snippets/sublime/fgrid4.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | <content><![CDATA[
 3 | <table width="640" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:640px; width:100%;" bgcolor="#FFFFFF">
 4 |   <tr>
 5 |     <td align="center" valign="top" style="padding:10px;">
 6 |       
 7 |       <table width="600" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:600px; width:100%;">
 8 |         <tr>
 9 |           <td width="150" align="center" valign="top" style="padding:10px;">
10 |             $1
11 |           </td>
12 |           <td width="150" align="center" valign="top" style="padding:10px;">
13 |             $2
14 |           </td>
15 |           <td width="150" align="center" valign="top" style="padding:10px;">
16 |             $3
17 |           </td>
18 |           <td width="150" align="center" valign="top" style="padding:10px;">
19 |             $4
20 |           </td>
21 |         </tr>
22 |       </table>
23 | 
24 |     </td>
25 |   </tr>
26 | </table>
27 | ]]></content>
28 | <tabTrigger>fgrid4</tabTrigger>
29 | </snippet>
30 | 


--------------------------------------------------------------------------------
/snippets/sublime/fgrid5.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | <content><![CDATA[
 3 | <table width="640" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:640px; width:100%;" bgcolor="#FFFFFF">
 4 |   <tr>
 5 |     <td align="center" valign="top" style="padding:10px;">
 6 |       
 7 |       <table width="600" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:600px; width:100%;">
 8 |         <tr>
 9 |           <td width="120" align="center" valign="top" style="padding:10px;">
10 |             $1
11 |           </td>
12 |           <td width="120" align="center" valign="top" style="padding:10px;">
13 |             $2
14 |           </td>
15 |           <td width="120" align="center" valign="top" style="padding:10px;">
16 |             $3
17 |           </td>
18 |           <td width="120" align="center" valign="top" style="padding:10px;">
19 |             $4
20 |           </td>
21 |           <td width="120" align="center" valign="top" style="padding:10px;">
22 |             $5
23 |           </td>
24 |         </tr>
25 |       </table>
26 | 
27 |     </td>
28 |   </tr>
29 | </table>
30 | ]]></content>
31 | <tabTrigger>fgrid5</tabTrigger>
32 | </snippet>
33 | 


--------------------------------------------------------------------------------
/snippets/sublime/hgrid1.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | <content><![CDATA[
 3 | <tr>
 4 |   <td align="center" height="100%" valign="top" width="100%">
 5 |     <!--[if (gte mso 9)|(IE)]>
 6 |     <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
 7 |     <tr>
 8 |     <td align="center" valign="top" width="600">
 9 |     <![endif]-->
10 |       <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;" bgcolor="#ffffff">
11 |         <tr>
12 |           <td align="center" valign="top" style="font-size:14px;">
13 | 
14 |             $1
15 | 
16 |           </td>
17 |         </tr>
18 |       </table>
19 |     <!--[if (gte mso 9)|(IE)]>
20 |     </td>
21 |     </tr>
22 |     </table>
23 |     <![endif]-->
24 |   </td>
25 | </tr>
26 | ]]></content>
27 | <tabTrigger>hgrid1</tabTrigger>
28 | </snippet>
29 | 


--------------------------------------------------------------------------------
/snippets/sublime/hgrid2.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | <content><![CDATA[
 3 | <tr>
 4 |   <td align="center" valign="top" width="100%">
 5 | 
 6 |     <!--[if (gte mso 9)|(IE)]>
 7 |     <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
 8 |     <tr>
 9 |     <td align="center" valign="top" width="600">
10 |     <![endif]-->
11 |     <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;" bgcolor="#FFFFFF">
12 |       <tr>
13 |         <td align="center" valign="top" style="font-size:0;">
14 |           <!--[if (gte mso 9)|(IE)]>
15 |           <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
16 |           <tr>
17 |           <td align="left" valign="top" width="295">
18 |           <![endif]-->
19 |           <div style="display:inline-block; max-width:295px; vertical-align:top; width:100%;">
20 |             <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:295px;" class="deviceWidth">
21 |               <tr>
22 |                 <td align="center" valign="top" style="font-size:14px;">
23 | 
24 |                   $1
25 | 
26 |                 </td>
27 |               </tr>
28 |             </table>
29 |           </div>
30 |           <!--[if (gte mso 9)|(IE)]>
31 |           </td>
32 |           <td align="left" valign="top" width="295">
33 |           <![endif]-->
34 |           <div style="display:inline-block; max-width:295px; vertical-align:top; width:100%;">
35 |             <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:295px;" class="deviceWidth">
36 |               <tr>
37 |                 <td align="center" valign="top" style="font-size:14px;">
38 | 
39 |                   $2 
40 | 
41 |                 </td>
42 |               </tr>
43 |             </table>
44 |           </div>
45 |           <!--[if (gte mso 9)|(IE)]>
46 |           </td>
47 |           </tr>
48 |           </table>
49 |           <![endif]-->
50 |         </td>
51 |       </tr>
52 |     </table>
53 |     <!--[if (gte mso 9)|(IE)]>
54 |     </td>
55 |     </tr>
56 |     </table>
57 |     <![endif]-->
58 | 
59 |   </td>
60 | </tr>
61 | ]]></content>
62 | <tabTrigger>hgrid2</tabTrigger>
63 | </snippet>
64 | 


--------------------------------------------------------------------------------
/snippets/sublime/hgrid3.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | <content><![CDATA[
 3 | <tr>
 4 |   <td align="center" valign="top" width="100%">
 5 |     <!--[if (gte mso 9)|(IE)]>
 6 |     <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
 7 |     <tr>
 8 |     <td align="center" valign="top" width="600">
 9 |     <![endif]-->
10 |     <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;" bgcolor="#FFFFFF">
11 |       <tr>
12 |         <td align="center" valign="top" style="font-size:0;">
13 |           <!--[if (gte mso 9)|(IE)]>
14 |           <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
15 |           <tr>
16 |           <td align="left" valign="top" width="195">
17 |           <![endif]-->
18 |           <div style="display:inline-block; max-width:195px; vertical-align:top; width:100%;">
19 |             <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:195px;" class="deviceWidth">
20 |               <tr>
21 |                 <td align="center" valign="top" style="font-size:14px;">
22 | 
23 |                   $1
24 | 
25 |                 </td>
26 |               </tr>
27 |             </table>
28 |           </div>
29 |           <!--[if (gte mso 9)|(IE)]>
30 |           </td>
31 |           <td align="left" valign="top" width="195">
32 |           <![endif]-->
33 |           <div style="display:inline-block; max-width:195px; vertical-align:top; width:100%;">
34 |             <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:195px;" class="deviceWidth">
35 |               <tr>
36 |                 <td align="center" valign="top" style="font-size:14px;">
37 | 
38 |                   $2
39 | 
40 |                 </td>
41 |               </tr>
42 |             </table>
43 |           </div>
44 |           <!--[if (gte mso 9)|(IE)]>
45 |           </td>
46 |           <td align="left" valign="top" width="195">
47 |           <![endif]-->
48 |           <div style="display:inline-block; max-width:195px; vertical-align:top; width:100%;">
49 |             <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:195px;" class="deviceWidth">
50 |               <tr>
51 |                 <td align="center" valign="top" style="font-size:14px;">
52 | 
53 |                   $3
54 | 
55 |                 </td>
56 |               </tr>
57 |             </table>
58 |           </div>
59 |           <!--[if (gte mso 9)|(IE)]>
60 |           </td>
61 |           </tr>
62 |           </table>
63 |           <![endif]-->
64 |         </td>
65 |       </tr>
66 |     </table>
67 |     <!--[if (gte mso 9)|(IE)]>
68 |     </td>
69 |     </tr>
70 |     </table>
71 |     <![endif]-->
72 |   </td>
73 | </tr>
74 | ]]></content>
75 | <tabTrigger>hgrid3</tabTrigger>
76 | </snippet>
77 | 


--------------------------------------------------------------------------------
/snippets/sublime/img.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 |     <content><![CDATA[
3 | <img src="images/$1" width="$2" height="$3" style="margin:0; padding:0; border:none; display:block;" border="0" class="img" alt="$4">
4 | ]]></content>
5 | <tabTrigger>img</tabTrigger>
6 | </snippet>
7 | 


--------------------------------------------------------------------------------
/snippets/sublime/mobile-block-hack.sublime-snippet:
--------------------------------------------------------------------------------
 1 | 
 2 | <snippet>
 3 |   <content><![CDATA[
 4 | <!--[if !mso]><!-- -->
 5 | <div class="mobileOn" style="font-size: 0; max-height: 0; overflow: hidden; display: none">                
 6 |   <table width="320" cellspacing="0" cellpadding="0" border="0" class="mobile" align="center">    
 7 |     <tr>
 8 |       <td align="center" style="color: #000000; font-size: 12px; line-height: 18px;">
 9 |         $1
10 |       </td>
11 |     </tr>
12 |   </table>                                                                    
13 | </div>                                                                    
14 | <!--<![endif]-->
15 | ]]></content>
16 | <tabTrigger>mobileblock</tabTrigger>
17 | </snippet>
18 | 


--------------------------------------------------------------------------------
/snippets/sublime/mspace.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 |   <content><![CDATA[
3 | <td height="$1" style="font-size:$1px; line-height:$1px;" class="mobileOn">&nbsp;</td>
4 | ]]></content>
5 | <tabTrigger>mspace</tabTrigger>
6 | </snippet>
7 | 


--------------------------------------------------------------------------------
/snippets/sublime/rgrid1.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | <content><![CDATA[
 3 | <table width="640" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#FFFFFF">
 4 |   <tr>
 5 |     <td height="10" style="font-size:10px; line-height:10px;">&nbsp;</td>
 6 |   </tr>
 7 |   <tr>
 8 |     <td align="center" valign="top">
 9 | 
10 |       <table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
11 |         <tr>
12 |           <td align="center" valign="top">
13 |             $1
14 |           </td>
15 |         </tr>
16 |       </table>
17 | 
18 |     </td>
19 |   </tr>
20 |   <tr>
21 |     <td height="10" style="font-size:10px; line-height:10px;">&nbsp;</td>
22 |   </tr>
23 | </table>
24 | ]]></content>
25 | <tabTrigger>rgrid1</tabTrigger>
26 | </snippet>
27 | 


--------------------------------------------------------------------------------
/snippets/sublime/rgrid2.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | <content><![CDATA[
 3 | <table width="640" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#FFFFFF">
 4 |   <tr>
 5 |     <td height="10" style="font-size:10px; line-height:10px;">&nbsp;</td>
 6 |   </tr>
 7 |   <tr>
 8 |     <td align="center" valign="top">
 9 | 
10 |       <table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
11 |         <tr>
12 |           <td width="300" class="mobile" align="center" valign="top">
13 |             $1
14 |           </td>
15 |           <td width="300" class="mobile" align="center" valign="top">
16 |             $2
17 |           </td>
18 |         </tr>
19 |       </table>
20 | 
21 |     </td>
22 |   </tr>
23 |   <tr>
24 |     <td height="10" style="font-size:10px; line-height:10px;">&nbsp;</td>
25 |   </tr>
26 | </table>
27 | ]]></content>
28 | <tabTrigger>rgrid2</tabTrigger>
29 | </snippet>
30 | 


--------------------------------------------------------------------------------
/snippets/sublime/rgrid3.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | <content><![CDATA[
 3 | <table width="640" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#FFFFFF">
 4 |   <tr>
 5 |    <td height="10" style="font-size:10px; line-height:10px;">&nbsp;</td>
 6 |   </tr>
 7 |   <tr>
 8 |     <td align="center" valign="top">
 9 | 
10 |       <table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
11 |         <tr>
12 |             <td width="200" class="mobile" align="center" valign="top">
13 |               $1
14 |             </td>
15 |             <td width="200" class="mobile" align="center" valign="top">
16 |               $2
17 |             </td>
18 |             <td width="200" class="mobile" align="center" valign="top">
19 |               $3
20 |             </td>
21 |         </tr>
22 |       </table>
23 | 
24 |     </td>
25 |   </tr>
26 |   <tr>
27 |     <td height="10" style="font-size:10px; line-height:10px;">&nbsp;</td>
28 |   </tr>
29 | </table>
30 | ]]></content>
31 | <tabTrigger>rgrid3</tabTrigger>
32 | </snippet>
33 | 


--------------------------------------------------------------------------------
/snippets/sublime/rgrid4.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | <content><![CDATA[
 3 | <table width="640" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#FFFFFF">
 4 |   <tr>
 5 |     <td height="10" style="font-size:10px; line-height:10px;">&nbsp;</td>
 6 |   </tr>
 7 |   <tr>
 8 |     <td align="center" valign="top">
 9 | 
10 |       <table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
11 |         <tr>
12 |           <td width="150" class="mobile" align="center" valign="top">
13 |             $1
14 |           </td>
15 |           <td width="150" class="mobile" align="center" valign="top">
16 |             $2
17 |           </td>
18 |           <td width="150" class="mobile" align="center" valign="top">
19 |             $3
20 |           </td>
21 |           <td width="150" class="mobile" align="center" valign="top">
22 |             $4
23 |           </td>
24 |         </tr>
25 |       </table>
26 | 
27 |     </td>
28 |   </tr>
29 |   <tr>
30 |     <td height="10" style="font-size:10px; line-height:10px;">&nbsp;</td>
31 |   </tr>
32 | </table>
33 | ]]></content>
34 | <tabTrigger>rgrid4</tabTrigger>
35 | </snippet>
36 | 


--------------------------------------------------------------------------------
/snippets/sublime/rgrid5.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | <content><![CDATA[
 3 | <table width="640" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#FFFFFF">
 4 |   <tr>
 5 |     <td height="10" style="font-size:10px; line-height:10px;">&nbsp;</td>
 6 |   </tr>
 7 |   <tr>
 8 |     <td align="center" valign="top">
 9 | 
10 |       <table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
11 |         <tr>
12 |           <td width="120" class="mobile" align="center" valign="top">
13 |             $1
14 |           </td>
15 |           <td width="120" class="mobile" align="center" valign="top">
16 |             $2
17 |           </td>
18 |           <td width="120" class="mobile" align="center" valign="top">
19 |             $3
20 |           </td>
21 |           <td width="120" class="mobile" align="center" valign="top">
22 |             $4
23 |           </td>
24 |           <td width="120" class="mobile" align="center" valign="top">
25 |             $5
26 |           </td>
27 |         </tr>
28 |       </table>
29 | 
30 |     </td>
31 |   </tr>
32 |   <tr>
33 |     <td height="10" style="font-size:10px; line-height:10px;">&nbsp;</td>
34 |   </tr>
35 | </table>
36 | ]]></content>
37 | <tabTrigger>rgrid5</tabTrigger>
38 | </snippet>
39 | 


--------------------------------------------------------------------------------
/snippets/sublime/row.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |     <content><![CDATA[
 3 | <tr>
 4 |   <td align="center" valign="top">
 5 |     $1
 6 |   </td>
 7 | </tr>
 8 | ]]></content>
 9 | <tabTrigger>row</tabTrigger>
10 | </snippet>
11 | 


--------------------------------------------------------------------------------
/snippets/sublime/space.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 |     <content><![CDATA[
3 | <tr>
4 |   <td height="$1" style="font-size:$1px; line-height:$1px;">&nbsp;</td>
5 | </tr>
6 | ]]></content>
7 | <tabTrigger>space</tabTrigger>
8 | </snippet>
9 | 


--------------------------------------------------------------------------------