-
Notifications
You must be signed in to change notification settings - Fork 8
/
Grid600-clean.html
executable file
·504 lines (439 loc) · 16.9 KB
/
Grid600-clean.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid 600: 12 Column Template</title>
<script type="text/javascript" src="../assets/js/jquery.js"></script>
<style type="text/css" media="screen">
/* -----------------------------------------------------------
Grid 600: 12 Column Email Template
@Version: Alpha 0.1
@Author: Ben Parizek, Rafael Oliveira
@Company: Barrel Strength Design, FastForwardBR
@Company URL: http://barrelstrengthdesign.com, http://www.fastforwardbr.com.br
@License: Creative Commons Attribution-ShareAlike 3.0 Unported License
href="http://creativecommons.org/licenses/by-sa/3.0/
Props & Inspiration:
Scott Lyttle: Grid Design Direction
Campaign Monitor: http://www.campaignmonitor.com/
Mailchimp: http://mailchimp.com/
HTML Email Boilerplate: http://htmlemailboilerplate.com/
Litmus: http://litmus.com/
Icons by Aquaticus_Social_by_jwloh whose site seems to be dead
----------------------------------------------------------- */
/* -----------------------------------------------------------
Some email clients (ahem, Gmail) will strip out the css in your head section
Be sure your final email places the css inline using a tool like: http://premailer.dialect.ca/
----------------------------------------------------------- */
/* -----------------------------------------------------------
HTML Email Reset CSS
Email clients interpret the default styles of some elements differently
These styles try to create a common baseline for us to start from.
If you are troubleshooting an email and learn that one of these styles
is causing a problem, try to override it below in the specific area
that you are having the problem. If that doesn't work, hack away and
let me know what you find out!
----------------------------------------------------------- */
body,
p,
a,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
}
a:hover,
a:active {
outline: none;
}
img {
border: 0;
line-height: 100%;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
#outlook a {
padding: 0;
}
/* Force Outlook to provide a "view in browser" button. */
body {
width: 100% !important;
}
/* Force Hotmail to display emails at full width */
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
body {
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
}
/* Prevent Webkit and Windows Mobile platforms from changing default font sizes. */
table td {
border-collapse: collapse;
}
/* Fix Outlook 07, 10 Padding issue */
/* -----------------------------------------------------------
Grid System a la HTML Emails using Tables
Apply these col-pw-X or col-lg-X classes to <td> tags.
These tags are already applied to the snippets in the grid600 default template.
Provide your designer with the accomanying photoshop files to make
developing with the grid even easier! (revised Photoshop files in the works)
Email Designs with borders. If you want your email design to have a border, I
recommend breaking from the 600px format and adding the border to the outside
of the 600px grid. This allows us to retain the grid and avoid confusing
calculations and funny sizes. So, a grid with a 1px border would be easiest to
achieve as a 600px grid + a 1px border on the left and right, resulting in an email
602px wide. A 600px grid with a 5px border would result in an email 610px wide.
----------------------------------------------------------- */
/* -------------------------------------------
.col-lg-X columns with especific width and NO padding
------------------------------------------- */
.col-lg-1, .col-lg-2, .col-lg-3,
.col-lg-4, .col-lg-5, .col-lg-6,
.col-lg-7, .col-lg-8, .col-lg-9
.col-lg-10, .col-lg-11, .col-lg-12 {
padding-left: 0px; padding-right: 0px;
}
.col-lg-1 { width: 50px; }
.col-lg-2 { width: 100px; }
.col-lg-3 { width: 150px; }
.col-lg-4 { width: 200px; }
.col-lg-5 { width: 250px; }
.col-lg-6 { width: 300px; }
.col-lg-7 { width: 350px; }
.col-lg-8 { width: 400px; }
.col-lg-9 { width: 450px; }
.col-lg-10 { width: 500px; }
.col-lg-11 { width: 550px; }
.col-lg-12 { width: 600px; }
/* -------------------------------------------
.col-pw-X columns with especific width and some padding
The default padding is 10px on the left and right.
If you need other padding for your default columns, you will need to change
the width values also.
Get the respective .col-lg-X width and subtract both padding. In the default
values, the class .col-pw-3 have width equals 130px, then
.col-pw-3 = width:150px (.col-lg-3) - padding-left: 10px - padding-right: 10px
------------------------------------------- */
.col-pw-1, .col-pw-2, .col-pw-3,
.col-pw-4, .col-pw-5, .col-pw-6,
.col-pw-7, .col-pw-8, .col-pw-9
.col-pw-10, .col-pw-11, .col-pw-12 {
padding-left: 10px;
padding-right: 10px;
}
.col-pw-1 { width: 30px; }
.col-pw-2 { width: 80px; }
.col-pw-3 { width: 130px; }
.col-pw-4 { width: 180px; }
.col-pw-5 { width: 230px; }
.col-pw-6 { width: 280px; }
.col-pw-7 { width: 330px; }
.col-pw-8 { width: 380px; }
.col-pw-9 { width: 430px; }
.col-pw-10 { width: 480px; }
.col-pw-11 { width: 530px; }
.col-pw-12 { width: 580px; }
.full-width {
padding-left: 0;
padding-right: 0;
width: 600px;
}
.row {
width: 100%;
display: block;
}
.img-responsive {
width: 100%;
}
/* -----------------------------------------------------------
Utility Styles
This section helps give us a baseline by standardizing several
elements that behave in slightly different ways. You can
edit some styles in this section if you need to change these
sizes to fit your needs. Or you can just override what you need
in the next section.
Set all header, paragraph, and list elements to have same spacing
If you want to change the spacing of these elements, change that here.
----------------------------------------------------------- */
#background-container {
height: 100% !important;
margin: 0;
padding: 0;
width: 100% !important;
}
/* Set header tags, p tags and bulleted lists to have the same spacing
use p tags for general text content, but not within bulleted lists.
Text for bulleted lists can just remain wrapped in the td tags */
h1,
h2,
h3,
h4,
h5,
h6 {
display: block;
margin-top: 12px;
}
table { display: block; }
td { padding-bottom: 6px; }
td p { margin-top: 12px; }
td.bullet,
td.bullet-item {
padding-top: 12px;
}
/* Set width of bullet column of a table-based bulleted list */
td.bullet {
width: 20px;
}
/* Gmail/Hotmail add an extra space below images. This fixes it. */
.image-fix {
display: block;
}
/* -----------------------------------------------------------
Email Specific Styles
Begin styling your specific email here.
----------------------------------------------------------- */
/* sets the global background color */
body,
#background-container {
background-color: #ddd;
}
#template-container {
background-color: #fff;
}
a {
color: #0000FF;
}
/* If any links appear in your copy that aren't supposed to be links
you may still need to make them links and give them color because
certain email clients will render them blue and make them links anyways
a.link-fix {
color: #999;
}
*/
/* Set your header font-styles here */
h1,
.h1 {
font-family: arial;
font-size: 20px;
line-height: 22px;
}
/*
h2, .h2 { font-family: arial; font-size:18px; line-height:20px; }
h3, .h3 { font-family: arial; font-size:13px; line-height:17px; }
h4, .h4 { ... }
*/
/* Set your body fonts styles here */
td,
td p {
font-family: arial;
font-size: 12px;
line-height: 18px;
}
/* if you need more font styles
extend them with new font class */
td.secondary-font-style,
td.secondary-font-style p {
font-family: arial;
font-size: 12px;
line-height: 18px;
}
/* Social Media Icons extend the bullet list */
.social-media td.bullet {
width: 30px;
}
.social-media td.bullet-item {
line-height: 14px;
padding-top: 5px;
}
/* Don't forget! */
.view-online {}
.unsubscribe {}
/* Pretty up the area which is seen before your images are downloaded
apply these styles to your img tags with the right colors
(note: you may have to apply these to td tags, need to confirm...)
.img-bg { background-color: #666; }
.img-txt { color: #fff; font-size: 12px; }
*/
/* -----------------------------------------------------------
Mobile Specific Styles
Target portrait mode: max-device-width: 480px
Target landscape mode: max-device-width: 720px
Make sure the @media queries don't get stripped from the head
when you inline your css. Many inlining programs will strip it out.
I think you are safe if you use Campaign Monitor but need to test that.
Also, currently Yahoo doesn't ignore @media queries unless you target
the styles via attribute selectors such as the class .table on
the table element: table[class=table]
apply class="mobile-friendly" to all tables that only have a col-pw-12 clas on the <td> tag.
----------------------------------------------------------- */
@media only screen and (max-width: 600px) {
td[class="background-container"] {
padding: 0 10px !important;
}
table[id="template-container"],
table[class="mobile-friendly"] {
width: 320px !important;
}
td[class="col-pw-1"],
td[class="col-pw-2"],
td[class="col-pw-3"],
td[class="col-pw-4"],
td[class="col-pw-5"],
td[class="col-pw-6"],
td[class="col-pw-7"],
td[class="col-pw-8"],
td[class="col-pw-9"],
td[class="col-pw-10"],
td[class="col-pw-11"],
td[class="col-pw-12"],
td[class="col-pw-1"] img,
td[class="col-pw-2"] img,
td[class="col-pw-3"] img,
td[class="col-pw-4"] img,
td[class="col-pw-5"] img,
td[class="col-pw-6"] img,
td[class="col-pw-7"] img,
td[class="col-pw-8"] img,
td[class="col-pw-9"] img,
td[class="col-pw-10"] img,
td[class="col-pw-11"] img,
td[class="col-pw-12"] img,
td[class="full-width"] {
width: 300px !important;
}
img[class="showcase"] {
width: 320px !important;
}
}
</style>
</head>
<body marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" offset="0">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" id="background-container">
<tr>
<td valign="top" class="">
<!-- BEGIN EMAIL BODY -->
<!-- BEGIN TEMPLATE CONTAINER -->
<table class="" width="600" align="center" border="0" cellspacing="0" cellpadding="0" id="template-container">
<tr>
<td valign="top" class=" ">
<table class="row" align="center" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" class="row ">
<table align="left" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" class="col-pw-6">
<img src="logo.png" style="padding-top: 10px;" width="100%" class="img-responsive" />
</td>
</tr>
</table>
<table align="left" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" class="col-pw-6">
<h1>Email com Grid</h1>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="row" align="center" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top">
<table align="left" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" class="col-pw-5">
<a href="#" target="_blank">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/F1_light_blue_flag.svg/50px-F1_light_blue_flag.svg.png" width="100%" height="100" border="0" alt="" />
</a>
</td>
</tr>
</table>
<table align="left" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" class="col-pw-3">
<a href="#" target="_blank">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/F1_light_blue_flag.svg/50px-F1_light_blue_flag.svg.png" width="100%" height="100" border="0" alt="" />
</a>
</td>
</tr>
</table>
<table align="left" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" class="col-pw-4">
<a href="#" target="_blank">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/F1_light_blue_flag.svg/50px-F1_light_blue_flag.svg.png" width="100%" height="100" border="0" alt="" />
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="row" align="center" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top">
<table align="left" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" class="col-pw-1">
<a href="#" target="_blank">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/F1_light_blue_flag.svg/50px-F1_light_blue_flag.svg.png" width="100%" height="100" border="0" alt="" />
</a>
</td>
</tr>
</table>
<table align="left" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" width="50" class="col-pw-1">
<a href="#" target="_blank">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/F1_light_blue_flag.svg/50px-F1_light_blue_flag.svg.png" width="100%" height="100" border="0" alt="" />
</a>
</td>
</tr>
</table>
<table align="left" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" class="col-pw-2">
<a href="#" target="_blank">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/F1_light_blue_flag.svg/50px-F1_light_blue_flag.svg.png" width="100%" height="100" border="0" alt="" />
</a>
</td>
</tr>
</table>
<table align="left" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" class="col-pw-3">
<a href="#" target="_blank">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/F1_light_blue_flag.svg/50px-F1_light_blue_flag.svg.png" width="100%" height="100" border="0" alt="" />
</a>
</td>
</tr>
</table>
<table align="left" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" class="col-pw-5">
<a href="#" target="_blank">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/F1_light_blue_flag.svg/50px-F1_light_blue_flag.svg.png" width="100%" height="100" border="0" alt="" />
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END CONTAINER TABLE -->
</td>
</tr>
</table>
</body>
</html>