├── .gitignore
├── images
    ├── placeholder.jpg
    └── simple-template.png
├── README.md
├── LICENSE.md
├── css
    └── simple.css
├── scss
    └── simple.scss
└── simple.html


/.gitignore:
--------------------------------------------------------------------------------
1 | *.sass-cache
2 | 
3 | *.codekit
4 | 
5 | config.codekit3
6 | 


--------------------------------------------------------------------------------
/images/placeholder.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaltyLeo/responsive-email/master/images/placeholder.jpg


--------------------------------------------------------------------------------
/images/simple-template.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaltyLeo/responsive-email/master/images/simple-template.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | Responsive Email
 2 | ================
 3 | The basic "responsive" email template. This project is licensed under the terms of the MIT license.
 4 | 
 5 | ![Simple Template](/images/simple-template.png?raw=true)
 6 | 
 7 | ### Setup
 8 | 
 9 | To use the template as-is (look similar to the screenshot above), follow the instructions below:
10 | 
11 | 1. Copy contents of `css/simple.css`.
12 | 2. Open `simple.html`.
13 | 3. Delete Line 8.
14 | 4. Paste CSS immediately below `/* Your custom styles go here */` on Line 12.
15 | 5. Modify the body of the email to suit your own needs.
16 | 6. Copy and paste all code into an inliner utility like [Mailchimp CSS Inliner Tool](https://templates.mailchimp.com/resources/inline-css/).
17 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) [year] [fullname]
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/css/simple.css:
--------------------------------------------------------------------------------
 1 | * { margin: 0; padding: 0; font-size: 100%; font-family: 'Avenir Next', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; line-height: 1.65; }
 2 | 
 3 | img { max-width: 100%; margin: 0 auto; display: block; }
 4 | 
 5 | body, .body-wrap { width: 100% !important; height: 100%; background: #f8f8f8; }
 6 | 
 7 | a { color: #71bc37; text-decoration: none; }
 8 | 
 9 | a:hover { text-decoration: underline; }
10 | 
11 | .text-center { text-align: center; }
12 | 
13 | .text-right { text-align: right; }
14 | 
15 | .text-left { text-align: left; }
16 | 
17 | .button { display: inline-block; color: white; background: #71bc37; border: solid #71bc37; border-width: 10px 20px 8px; font-weight: bold; border-radius: 4px; }
18 | 
19 | .button:hover { text-decoration: none; }
20 | 
21 | h1, h2, h3, h4, h5, h6 { margin-bottom: 20px; line-height: 1.25; }
22 | 
23 | h1 { font-size: 32px; }
24 | 
25 | h2 { font-size: 28px; }
26 | 
27 | h3 { font-size: 24px; }
28 | 
29 | h4 { font-size: 20px; }
30 | 
31 | h5 { font-size: 16px; }
32 | 
33 | p, ul, ol { font-size: 16px; font-weight: normal; margin-bottom: 20px; }
34 | 
35 | .container { display: block !important; clear: both !important; margin: 0 auto !important; max-width: 580px !important; }
36 | 
37 | .container table { width: 100% !important; border-collapse: collapse; }
38 | 
39 | .container .masthead { padding: 80px 0; background: #71bc37; color: white; }
40 | 
41 | .container .masthead h1 { margin: 0 auto !important; max-width: 90%; text-transform: uppercase; }
42 | 
43 | .container .content { background: white; padding: 30px 35px; }
44 | 
45 | .container .content.footer { background: none; }
46 | 
47 | .container .content.footer p { margin-bottom: 0; color: #888; text-align: center; font-size: 14px; }
48 | 
49 | .container .content.footer a { color: #888; text-decoration: none; font-weight: bold; }
50 | 
51 | .container .content.footer a:hover { text-decoration: underline; }
52 | 


--------------------------------------------------------------------------------
/scss/simple.scss:
--------------------------------------------------------------------------------
  1 | $action-color: #71bc37;
  2 | $footer-color: #888;
  3 | 
  4 | // Global
  5 | * {
  6 |   margin: 0;
  7 |   padding: 0;
  8 |   font-size: 100%;
  9 |   font-family: 'Avenir Next', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
 10 |   line-height: 1.65;
 11 | }
 12 | 
 13 | img {
 14 |   max-width: 100%;
 15 |   margin: 0 auto;
 16 |   display: block;
 17 | }
 18 | 
 19 | body,
 20 | .body-wrap {
 21 |   width: 100% !important;
 22 |   height: 100%;
 23 |   background: #f8f8f8;
 24 | }
 25 | 
 26 | a {
 27 |   color: $action-color;
 28 |   text-decoration: none;
 29 | 
 30 |   &:hover {
 31 |     text-decoration: underline;
 32 |   }
 33 | }
 34 | 
 35 | .text-center {
 36 |   text-align: center;
 37 | }
 38 | 
 39 | .text-right {
 40 |   text-align: right;
 41 | }
 42 | 
 43 | .text-left {
 44 |   text-align: left;
 45 | }
 46 | 
 47 | // Button
 48 | .button {
 49 |   display: inline-block;
 50 |   color: white;
 51 |   background: $action-color;
 52 |   border: solid $action-color;
 53 |   border-width: 10px 20px 8px;
 54 |   font-weight: bold;
 55 |   border-radius: 4px;
 56 | 
 57 |   &:hover {
 58 |     text-decoration: none;
 59 |   }
 60 | }
 61 | 
 62 | // Typography
 63 | h1, h2, h3, h4, h5, h6 {
 64 |   margin-bottom: 20px;
 65 |   line-height: 1.25;
 66 | }
 67 | h1 {
 68 |   font-size: 32px;
 69 | }
 70 | h2 {
 71 |   font-size: 28px;
 72 | }
 73 | h3 {
 74 |   font-size: 24px;
 75 | }
 76 | h4 {
 77 |   font-size: 20px;
 78 | }
 79 | h5 {
 80 |   font-size: 16px;
 81 | }
 82 | 
 83 | p, ul, ol {
 84 |   font-size: 16px;
 85 |   font-weight: normal;
 86 |   margin-bottom: 20px;
 87 | }
 88 | 
 89 | // layout
 90 | .container {
 91 |   display: block !important;
 92 |   clear: both !important;
 93 |   margin: 0 auto !important;
 94 |   max-width: 580px !important;
 95 | 
 96 |   table {
 97 |     width: 100% !important;
 98 |     border-collapse: collapse;
 99 |   }
100 | 
101 |   .masthead {
102 |     padding: 80px 0;
103 |     background: #71bc37;
104 |     color: white;
105 | 
106 |     h1 {
107 |       margin: 0 auto !important;
108 |       max-width: 90%;
109 |       text-transform: uppercase;
110 |     }
111 |   }
112 | 
113 |   .content {
114 |     background: white;
115 |     padding: 30px 35px;
116 | 
117 |     &.footer {
118 |       background: none;
119 | 
120 |       p {
121 |         margin-bottom: 0;
122 |         color: $footer-color;
123 |         text-align: center;
124 |         font-size: 14px;
125 |       }
126 | 
127 |       a {
128 |         color: $footer-color;
129 |         text-decoration: none;
130 |         font-weight: bold;
131 | 
132 |         &:hover {
133 |           text-decoration: underline;
134 |         }
135 |       }
136 |     }
137 |   }
138 | }
139 | 


--------------------------------------------------------------------------------
/simple.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 2 | <html xmlns="http://www.w3.org/1999/xhtml">
 3 | <head>
 4 |     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 |     <meta name="viewport" content="width=device-width"/>
 6 | 
 7 |     <!-- For development, pass document through inliner -->
 8 |     <link rel="stylesheet" href="css/simple.css">
 9 | 
10 |     <style type="text/css">
11 | 
12 |     /* Your custom styles go here */
13 | 
14 |     </style>
15 | </head>
16 | <body>
17 | <table class="body-wrap">
18 |     <tr>
19 |         <td class="container">
20 | 
21 |             <!-- Message start -->
22 |             <table>
23 |                 <tr>
24 |                     <td align="center" class="masthead">
25 | 
26 |                         <h1>Something Big...</h1>
27 | 
28 |                     </td>
29 |                 </tr>
30 |                 <tr>
31 |                     <td class="content">
32 | 
33 |                         <h2>Hi Stranger,</h2>
34 | 
35 |                         <p>Kielbasa venison ball tip shankle. Boudin prosciutto landjaeger, pancetta jowl turkey tri-tip porchetta beef pork loin drumstick. Frankfurter short ribs kevin pig ribeye drumstick bacon kielbasa. Pork loin brisket biltong, pork belly filet mignon ribeye pig ground round porchetta turducken turkey. Pork belly beef ribs sausage ham hock, ham doner frankfurter pork chop tail meatball beef pig meatloaf short ribs shoulder. Filet mignon ham hock kielbasa beef ribs shank. Venison swine beef ribs sausage pastrami shoulder.</p>
36 | 
37 |                         <table>
38 |                             <tr>
39 |                                 <td align="center">
40 |                                     <p>
41 |                                         <a href="#" class="button">Share the Awesomeness</a>
42 |                                     </p>
43 |                                 </td>
44 |                             </tr>
45 |                         </table>
46 | 
47 |                         <p>By the way, if you're wondering where you can find more of this fine meaty filler, visit <a href="http://baconipsum.com">Bacon Ipsum</a>.</p>
48 | 
49 |                         <p><em>– Mr. Pen</em></p>
50 | 
51 |                     </td>
52 |                 </tr>
53 |             </table>
54 | 
55 |         </td>
56 |     </tr>
57 |     <tr>
58 |         <td class="container">
59 | 
60 |             <!-- Message start -->
61 |             <table>
62 |                 <tr>
63 |                     <td class="content footer" align="center">
64 |                         <p>Sent by <a href="#">Company Name</a>, 1234 Yellow Brick Road, OZ, 99999</p>
65 |                         <p><a href="mailto:">hello@company.com</a> | <a href="#">Unsubscribe</a></p>
66 |                     </td>
67 |                 </tr>
68 |             </table>
69 | 
70 |         </td>
71 |     </tr>
72 | </table>
73 | </body>
74 | </html>


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