├── source
    ├── responsive.css
    ├── styles.css
    └── gmail-first-gutters.html
└── gmail-first-gutters.html


/source/responsive.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |   margin: 0;
  3 |   padding: 0;
  4 |   -ms-text-size-adjust: 100%;
  5 |   -webkit-text-size-adjust: 100%;
  6 | }
  7 | 
  8 | table {
  9 |   border-spacing: 0;
 10 | }
 11 | 
 12 | table td {
 13 |   border-collapse: collapse;
 14 | }
 15 | 
 16 | .ExternalClass {
 17 |   width: 100%;
 18 | }
 19 | 
 20 | .ExternalClass,
 21 | .ExternalClass p,
 22 | .ExternalClass span,
 23 | .ExternalClass font,
 24 | .ExternalClass td,
 25 | .ExternalClass div {
 26 |   line-height: 100%;
 27 | }
 28 | 
 29 | .ReadMsgBody {
 30 |   width: 100%;
 31 |   background-color: #ebebeb;
 32 | }
 33 | 
 34 | table {
 35 |   mso-table-lspace: 0pt;
 36 |   mso-table-rspace: 0pt;
 37 | }
 38 | 
 39 | img {
 40 |   -ms-interpolation-mode: bicubic;
 41 | }
 42 | 
 43 | .yshortcuts a {
 44 |   border-bottom: none !important;
 45 | }
 46 | 
 47 | @media screen and (max-width: 599px) {
 48 |   .container {
 49 |     width: 100% !important;
 50 |     max-width: 100% !important;
 51 |   }
 52 | }
 53 | .banner,
 54 | .intro {
 55 |   padding-left: 20px !important;
 56 |   padding-right: 20px !important;
 57 | }
 58 | 
 59 | .col-1-td {
 60 |   padding-left: 20px !important;
 61 |   padding-right: 10px !important;
 62 | }
 63 | 
 64 | .col-2-td {
 65 |   padding-left: 10px !important;
 66 |   padding-right: 20px !important;
 67 | }
 68 | 
 69 | @media screen and (max-width: 599px) {
 70 |   .container {
 71 |     width: 100%;
 72 |     max-width: 100%;
 73 |   }
 74 | 
 75 |   .col {
 76 |     width: 50% !important;
 77 |     max-width: 50% !important;
 78 |   }
 79 | }
 80 | @media screen and (max-width: 500px) {
 81 |   .col {
 82 |     width: 100% !important;
 83 |     max-width: 100% !important;
 84 |   }
 85 | 
 86 |   .banner,
 87 |   .intro,
 88 |   .col td {
 89 |     padding-left: 10px !important;
 90 |     padding-right: 10px !important;
 91 |   }
 92 | 
 93 |   .image img {
 94 |     width: 100% !important;
 95 |   }
 96 | 
 97 |   .title {
 98 |     padding-top: 10px;
 99 |   }
100 | }
101 | 


--------------------------------------------------------------------------------
/source/styles.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |   margin: 0;
  3 |   padding: 0;
  4 | }
  5 | 
  6 | .content {
  7 |   background-color: #ffffff;
  8 | }
  9 | 
 10 | .title {
 11 |   font-weight: bold;
 12 |   font-size: 24px;
 13 |   line-height: 28px;
 14 |   font-family: Helvetica, Arial, sans-serif;
 15 | }
 16 | 
 17 | .body-text {
 18 |   font-size: 16px;
 19 |   line-height: 20px;
 20 |   font-family: Helvetica, Arial, sans-serif;
 21 | }
 22 | 
 23 | table[align="center"] {
 24 |   margin-left: auto;
 25 |   margin-right: auto;
 26 | }
 27 | 
 28 | .button td {
 29 |   -webkit-border-radius: 3px;
 30 |   -moz-border-radius: 3px;
 31 |   border-radius: 3px;
 32 |   background-color: #2095F2;
 33 | }
 34 | .button a {
 35 |   -webkit-border-radius: 3px;
 36 |   -moz-border-radius: 3px;
 37 |   border-radius: 3px;
 38 |   font-weight: bold;
 39 |   font-size: 14px;
 40 |   line-height: 20px;
 41 |   font-family: Helvetica, Arial, sans-serif;
 42 |   text-decoration: none;
 43 |   display: inline-block;
 44 |   padding: 12px 18px;
 45 |   border: 1px solid #0e89eb;
 46 |   background-color: #2095F2;
 47 | }
 48 | .button.green td, .button.green a {
 49 |   background-color: #27ae60;
 50 |   border-color: #229955;
 51 | }
 52 | .button.yellow td, .button.yellow a {
 53 |   background-color: #f1c40f;
 54 |   border-color: #dab10d;
 55 |   color: #6F4F1D;
 56 | }
 57 | 
 58 | .container {
 59 |   background-color: #ffffff;
 60 | }
 61 | 
 62 | .posts {
 63 |   padding-top: 20px;
 64 | }
 65 | 
 66 | .col {
 67 |   width: 100%;
 68 |   max-width: 300px;
 69 | }
 70 | 
 71 | .col-1 td,
 72 | .col-2 td {
 73 |   padding-left: 10px;
 74 |   padding-right: 10px;
 75 | }
 76 | 
 77 | .banner,
 78 | .intro {
 79 |   padding-left: 10px;
 80 |   padding-right: 10px;
 81 | }
 82 | 
 83 | .banner {
 84 |   background-color: #c0392b;
 85 |   color: #ffffff;
 86 |   font-size: 30px;
 87 |   line-height: 36px;
 88 |   font-family: Helvetica, Arial, sans-serif;
 89 |   padding-top: 20px;
 90 |   padding-bottom: 20px;
 91 |   text-align: center;
 92 | }
 93 | 
 94 | .intro {
 95 |   padding-top: 20px;
 96 |   padding-bottom: 20px;
 97 |   font-weight: 300;
 98 |   font-size: 20px;
 99 |   line-height: 28px;
100 |   font-family: Helvetica, Arial, sans-serif;
101 |   color: #333333;
102 |   text-align: left;
103 | }
104 | 
105 | .cta {
106 |   padding-bottom: 10px;
107 | }
108 | 
109 | .image img {
110 |   display: block;
111 |   width: 100%;
112 |   min-width: 100%;
113 |   max-width: 100%;
114 |   height: auto;
115 |   border-top: 10px solid #c0392b;
116 | }
117 | 
118 | .title {
119 |   font-weight: bold;
120 |   font-size: 20px;
121 |   line-height: 24px;
122 |   font-family: Helvetica, Arial, sans-serif;
123 |   color: #d35400;
124 |   padding-top: 20px;
125 |   padding-bottom: 6px;
126 |   text-align: left;
127 | }
128 | 
129 | .text {
130 |   font-size: 14px;
131 |   line-height: 20px;
132 |   font-family: Helvetica, Arial, sans-serif;
133 |   color: #333333;
134 |   padding-bottom: 30px;
135 |   text-align: left;
136 | }
137 | 


--------------------------------------------------------------------------------
/source/gmail-first-gutters.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 2 |    "http://www.w3.org/TR/html4/loose.dtd">
 3 | <html lang="en">
 4 | <head>
 5 |   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- So that mobile will display zoomed in -->
 7 |   <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- enable media queries for windows phone 8 -->
 8 |    <meta name="format-detection" content="telephone=no"> <!-- disable auto telephone linking in iOS -->
 9 |   <title>Gmail First Gutters demo</title>
10 |   <link rel="stylesheet" type="text/css" href="styles.css">
11 |   <link rel="stylesheet" type="text/css" href="responsive.css">
12 | </head>
13 | <body bgcolor="#f1f1f1" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
14 | 
15 | <!-- 100% wrapper (grey background) -->
16 | <table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0" bgcolor="#f1f1f1">
17 |   <tr>
18 |     <td align="center" valign="top" bgcolor="#f1f1f1" style="background-color: #f1f1f1;">
19 | 
20 |       <br>
21 | 
22 |       <table border="0" width="600" cellpadding="0" cellspacing="0" class="container" align="center">
23 |   <tr>
24 |     <td class="banner">
25 |       Gmail First Gutters Demo
26 |     </td>
27 |   </tr>
28 |   <tr>
29 |     <td class="intro">
30 |       They were all in the best of spirits, and laughed and chatted together. Dorothy was once more filled with the hope of getting home, and the Scarecrow and the Tin Woodman were glad to be of use to her. As for the Lion, he sniffed the fresh air with delight and whisked his tail from side to side in pure joy at being in the country again, while Toto ran around them and chased the moths and butterflies, barking merrily all the time.
31 |     </td>
32 |   </tr>
33 |   <tr>
34 |     <td class="cta">
35 |       <table border="0" cellspacing="0" cellpadding="0" class="button yellow" align="center">
36 |   <tr>
37 |     <td align="center"><a href="http://juile.io/"><!--[if mso]>&nbsp;<![endif]-->A button &rarr;<!--[if mso]>&nbsp;<![endif]--></a></td>
38 |   </tr>
39 | </table>
40 | 
41 |     </td>
42 |   </tr>
43 |   <tr>
44 |     <td class="posts">
45 | 
46 |       <!--[if mso]><table width="600" border="0" cellpadding="0" cellspacing="0"><tr><td valign="top" width="300"><![endif]-->
47 |       
48 |         <table width="100%" align="left" border="0" cellpadding="0" cellspacing="0" class="col col-1">
49 |           <tr>
50 |             <td valign="top" class="col-1-td image">
51 |               <a href="http://julie.io">
52 |                 <img src="/assets/gmail-first-gutters/autumn-3.jpg" border="0" alt="" width="270" hspace="0" vspace="0">
53 |               </a>
54 |             </td>
55 |           </tr>
56 |           <tr>
57 |             <td class="col-1-td title">Leaves are falling</td>
58 |           </tr>
59 |           <tr>
60 |             <td class="col-1-td text">I felt sad at this, for it showed I was not such a good Scarecrow after all; but the old crow comforted me, saying, 'If you only had brains in your head you would be as good a man as any of them, and a better man than some of them.'</td>
61 |           </tr>
62 |         </table>
63 | 
64 |         
65 |         <!--[if mso]></td><td valign="top" width="300"><![endif]-->
66 |         
67 |       
68 |         <table width="100%" align="left" border="0" cellpadding="0" cellspacing="0" class="col col-2">
69 |           <tr>
70 |             <td valign="top" class="col-2-td image">
71 |               <a href="http://julie.io">
72 |                 <img src="/assets/gmail-first-gutters/autumn-4.jpg" border="0" alt="" width="270" hspace="0" vspace="0">
73 |               </a>
74 |             </td>
75 |           </tr>
76 |           <tr>
77 |             <td class="col-2-td title">Pumpkin growing contests</td>
78 |           </tr>
79 |           <tr>
80 |             <td class="col-2-td text">'I wonder if that farmer thought to fool me in this clumsy manner. Any crow of sense could see that you are only stuffed with straw.' Then he hopped down at my feet and ate all the corn he wanted.</td>
81 |           </tr>
82 |         </table>
83 | 
84 |         
85 |       
86 | 
87 |       <!--[if mso]></td></tr></table><![endif]-->
88 |     </td>
89 |   </tr>
90 | </table>
91 | 
92 | 
93 |     </td>
94 |   </tr>
95 | </table>
96 | <!--/100% wrapper-->
97 | 
98 | </body>
99 | </html>


--------------------------------------------------------------------------------
/gmail-first-gutters.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2 | <html lang="en">
  3 | <head>
  4 |   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5 |   <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- So that mobile will display zoomed in -->
  6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- enable media queries for windows phone 8 -->
  7 |    <meta name="format-detection" content="telephone=no"> <!-- disable auto telephone linking in iOS -->
  8 |   <title>Gmail First Gutters demo</title>
  9 |   
 10 |   <style type="text/css">
 11 | body {
 12 |   margin: 0;
 13 |   padding: 0;
 14 |   -ms-text-size-adjust: 100%;
 15 |   -webkit-text-size-adjust: 100%;
 16 | }
 17 | 
 18 | table {
 19 |   border-spacing: 0;
 20 | }
 21 | 
 22 | table td {
 23 |   border-collapse: collapse;
 24 | }
 25 | 
 26 | .ExternalClass {
 27 |   width: 100%;
 28 | }
 29 | 
 30 | .ExternalClass,
 31 | .ExternalClass p,
 32 | .ExternalClass span,
 33 | .ExternalClass font,
 34 | .ExternalClass td,
 35 | .ExternalClass div {
 36 |   line-height: 100%;
 37 | }
 38 | 
 39 | .ReadMsgBody {
 40 |   width: 100%;
 41 |   background-color: #ebebeb;
 42 | }
 43 | 
 44 | table {
 45 |   mso-table-lspace: 0pt;
 46 |   mso-table-rspace: 0pt;
 47 | }
 48 | 
 49 | img {
 50 |   -ms-interpolation-mode: bicubic;
 51 | }
 52 | 
 53 | .yshortcuts a {
 54 |   border-bottom: none !important;
 55 | }
 56 | 
 57 | @media screen and (max-width: 599px) {
 58 |   .container {
 59 |     width: 100% !important;
 60 |     max-width: 100% !important;
 61 |   }
 62 | }
 63 | .banner,
 64 | .intro {
 65 |   padding-left: 20px !important;
 66 |   padding-right: 20px !important;
 67 | }
 68 | 
 69 | .col-1-td {
 70 |   padding-left: 20px !important;
 71 |   padding-right: 10px !important;
 72 | }
 73 | 
 74 | .col-2-td {
 75 |   padding-left: 10px !important;
 76 |   padding-right: 20px !important;
 77 | }
 78 | 
 79 | @media screen and (max-width: 599px) {
 80 |   .container {
 81 |     width: 100%;
 82 |     max-width: 100%;
 83 |   }
 84 | 
 85 |   .col {
 86 |     width: 50% !important;
 87 |     max-width: 50% !important;
 88 |   }
 89 | }
 90 | @media screen and (max-width: 500px) {
 91 |   .col {
 92 |     width: 100% !important;
 93 |     max-width: 100% !important;
 94 |   }
 95 | 
 96 |   .banner,
 97 |   .intro,
 98 |   .col td {
 99 |     padding-left: 10px !important;
100 |     padding-right: 10px !important;
101 |   }
102 | 
103 |   .image img {
104 |     width: 100% !important;
105 |   }
106 | 
107 |   .title {
108 |     padding-top: 10px;
109 |   }
110 | }
111 | </style>
112 | </head>
113 | 
114 | <body bgcolor="#f1f1f1" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="margin:0;padding:0">
115 | 
116 | <!-- 100% wrapper (grey background) -->
117 | <table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0" bgcolor="#f1f1f1">
118 |   <tr>
119 |     <td align="center" valign="top" bgcolor="#f1f1f1" style="background-color: #f1f1f1;">
120 | 
121 |       <br>
122 | 
123 |       <table border="0" width="600" cellpadding="0" cellspacing="0" class="container" align="center" style="background-color:#ffffff;margin-left:auto;margin-right:auto">
124 |   <tr>
125 |     <td class="banner" style="padding-left:10px;padding-right:10px;background-color:#c0392b;color:#ffffff;font-size:30px;line-height:36px;font-family:Helvetica, Arial, sans-serif;padding-top:20px;padding-bottom:20px;text-align:center">
126 |       Gmail First Gutters Demo
127 |     </td>
128 |   </tr>
129 |   <tr>
130 |     <td class="intro" style="padding-left:10px;padding-right:10px;padding-top:20px;padding-bottom:20px;font-weight:300;font-size:20px;line-height:28px;font-family:Helvetica, Arial, sans-serif;color:#333333;text-align:left">
131 |       They were all in the best of spirits, and laughed and chatted together. Dorothy was once more filled with the hope of getting home, and the Scarecrow and the Tin Woodman were glad to be of use to her. As for the Lion, he sniffed the fresh air with delight and whisked his tail from side to side in pure joy at being in the country again, while Toto ran around them and chased the moths and butterflies, barking merrily all the time.
132 |     </td>
133 |   </tr>
134 |   <tr>
135 |     <td class="cta" style="padding-bottom:10px">
136 |       <table border="0" cellspacing="0" cellpadding="0" class="button yellow" align="center" style="margin-left:auto;margin-right:auto">
137 |   <tr>
138 |     <td align="center" style="-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;background-color:#2095F2;background-color:#f1c40f;border-color:#dab10d;color:#6F4F1D"><a href="http://juile.io/" style="-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;font-weight:bold;font-size:14px;line-height:20px;font-family:Helvetica, Arial, sans-serif;text-decoration:none;display:inline-block;padding:12px 18px;border:1px solid #0e89eb;background-color:#2095F2;background-color:#f1c40f;border-color:#dab10d;color:#6F4F1D"><!--[if mso]>&nbsp;<![endif]-->A button →<!--[if mso]>&nbsp;<![endif]--></a></td>
139 |   </tr>
140 | </table>
141 | 
142 |     </td>
143 |   </tr>
144 |   <tr>
145 |     <td class="posts" style="padding-top:20px">
146 | 
147 |       <!--[if mso]><table width="600" border="0" cellpadding="0" cellspacing="0"><tr><td valign="top" width="300"><![endif]-->
148 |       
149 |         <table width="100%" align="left" border="0" cellpadding="0" cellspacing="0" class="col col-1" style="width:100%;max-width:300px">
150 |           <tr>
151 |             <td valign="top" class="col-1-td image" style="padding-left:10px;padding-right:10px">
152 |               <a href="http://julie.io">
153 |                 <img src="https://julie-email-demos.s3.amazonaws.com/gmail-first-gutters/autumn-3.jpg" border="0" alt="" width="270" hspace="0" vspace="0" style="display:block;width:100%;min-width:100%;max-width:100%;height:auto;border-top:10px solid #c0392b">
154 |               </a>
155 |             </td>
156 |           </tr>
157 |           <tr>
158 |             <td class="col-1-td title" style="font-weight:bold;font-size:24px;line-height:28px;font-family:Helvetica, Arial, sans-serif;font-weight:bold;font-size:20px;line-height:24px;font-family:Helvetica, Arial, sans-serif;color:#d35400;padding-top:20px;padding-bottom:6px;text-align:left;padding-left:10px;padding-right:10px">Leaves are falling</td>
159 |           </tr>
160 |           <tr>
161 |             <td class="col-1-td text" style="font-size:14px;line-height:20px;font-family:Helvetica, Arial, sans-serif;color:#333333;padding-bottom:30px;text-align:left;padding-left:10px;padding-right:10px">I felt sad at this, for it showed I was not such a good Scarecrow after all; but the old crow comforted me, saying, 'If you only had brains in your head you would be as good a man as any of them, and a better man than some of them.'</td>
162 |           </tr>
163 |         </table>
164 | 
165 |         
166 |         <!--[if mso]></td><td valign="top" width="300"><![endif]-->
167 |         
168 |       
169 |         <table width="100%" align="left" border="0" cellpadding="0" cellspacing="0" class="col col-2" style="width:100%;max-width:300px">
170 |           <tr>
171 |             <td valign="top" class="col-2-td image" style="padding-left:10px;padding-right:10px">
172 |               <a href="http://julie.io">
173 |                 <img src="https://julie-email-demos.s3.amazonaws.com/gmail-first-gutters/autumn-4.jpg" border="0" alt="" width="270" hspace="0" vspace="0" style="display:block;width:100%;min-width:100%;max-width:100%;height:auto;border-top:10px solid #c0392b">
174 |               </a>
175 |             </td>
176 |           </tr>
177 |           <tr>
178 |             <td class="col-2-td title" style="font-weight:bold;font-size:24px;line-height:28px;font-family:Helvetica, Arial, sans-serif;font-weight:bold;font-size:20px;line-height:24px;font-family:Helvetica, Arial, sans-serif;color:#d35400;padding-top:20px;padding-bottom:6px;text-align:left;padding-left:10px;padding-right:10px">Pumpkin growing contests</td>
179 |           </tr>
180 |           <tr>
181 |             <td class="col-2-td text" style="font-size:14px;line-height:20px;font-family:Helvetica, Arial, sans-serif;color:#333333;padding-bottom:30px;text-align:left;padding-left:10px;padding-right:10px">'I wonder if that farmer thought to fool me in this clumsy manner. Any crow of sense could see that you are only stuffed with straw.' Then he hopped down at my feet and ate all the corn he wanted.</td>
182 |           </tr>
183 |         </table>
184 | 
185 | 
186 |       <!--[if mso]></td></tr></table><![endif]-->
187 |     </td>
188 |   </tr>
189 | </table>
190 | 
191 | 
192 |     </td>
193 |   </tr>
194 | </table>
195 | <!--/100% wrapper-->
196 | 
197 | </body>
198 | </html>
199 | 


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