Initial commit

suretec · Dec 20, 2013 · 275c11f · 275c11f
commit 275c11f
Show file tree

Hide file tree

Showing 3 changed files with 242 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.DS_Store
diff --git a/email.html b/email.html
@@ -0,0 +1,216 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta name="viewport" content="width=device-width" />
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>Really Simple HTML Email Template</title>
+<style>
+/* ------------------------------------- 
+		GLOBAL 
+------------------------------------- */
+* { 
+	margin:0;
+	padding:0;
+	font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; 
+	font-size: 100%;
+	line-height: 1.6;
+}
+
+img { 
+	max-width: 100%; 
+}
+
+body {
+	-webkit-font-smoothing:antialiased; 
+	-webkit-text-size-adjust:none; 
+	width: 100%!important; 
+	height: 100%;
+}
+
+
+/* ------------------------------------- 
+		ELEMENTS 
+------------------------------------- */
+a { 
+	color: #348eda;
+}
+
+.btn-primary, .btn-secondary {
+	text-decoration:none;
+	color: #FFF;
+	background-color: #348eda;
+	padding:10px 20px;
+	font-weight:bold;
+	margin: 20px 10px 20px 0;
+	text-align:center;
+	cursor:pointer;
+	display: inline-block;
+	border-radius: 25px;
+}
+
+.btn-secondary{
+	background: #aaa;
+}
+
+.last { 
+	margin-bottom: 0;
+}
+
+.first{
+	margin-top: 0;
+}
+
+
+/* ------------------------------------- 
+		BODY 
+------------------------------------- */
+table.body-wrap { 
+	width: 100%;
+	padding: 20px;
+}
+
+table.body-wrap .container{
+	border: 1px solid #f0f0f0;
+}
+
+
+/* ------------------------------------- 
+		FOOTER 
+------------------------------------- */
+table.footer-wrap { 
+	width: 100%;	
+	clear:both!important;
+}
+
+.footer-wrap .container p {
+	font-size:12px;
+	color:#666;
+
+}
+
+table.footer-wrap a{
+	color: #999;
+}
+
+
+/* ------------------------------------- 
+		TYPOGRAPHY 
+------------------------------------- */
+h1,h2,h3{
+	font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; line-height: 1.1; margin-bottom:15px; color:#000;
+	margin: 40px 0 10px;
+	line-height: 1.2;
+	font-weight:200; 
+}
+
+h1 {
+	font-size: 36px;
+}
+h2 {
+	font-size: 28px;
+}
+h3 {
+	font-size: 22px;
+}
+
+p, ul { 
+	margin-bottom: 10px; 
+	font-weight: normal; 
+	font-size:14px;
+}
+
+ul li {
+	margin-left:5px;
+	list-style-position: inside;
+}
+
+/* --------------------------------------------------- 
+		RESPONSIVENESS
+		Nuke it from orbit. It's the only way to be sure. 
+------------------------------------------------------ */
+
+/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
+.container {
+	display:block!important;
+	max-width:600px!important;
+	margin:0 auto!important; /* makes it centered */
+	clear:both!important;
+}
+
+/* This should also be a block element, so that it will fill 100% of the .container */
+.content {
+	padding:20px;
+	max-width:600px;
+	margin:0 auto;
+	display:block; 
+}
+
+/* Let's make sure tables in the content area are 100% wide */
+.content table { 
+	width: 100%; 
+}
+
+</style>
+</head>
+
+<body bgcolor="#f6f6f6">
+
+<!-- body -->
+<table class="body-wrap">
+	<tr>
+		<td></td>
+		<td class="container" bgcolor="#FFFFFF">
+
+			<!-- content -->
+			<div class="content">
+			<table>
+				<tr>
+					<td>
+						<p>Hi there,</p>
+						<p>Sometimes all you want is to send a simple HTML email with a basic design.</p>
+						<h1>Really simple HTML email template</h1>
+						<p>This is a really simple email template. It's sole purpose is to get you to click the button below.</p>
+						<h2>How do I use it?</h2>
+						<p>All the information you need is on GitHub.</p>
+						<p><a href="" class="btn-primary">View the source and instructions on GitHub</a></p>
+						<p>Feel free to use, copy, modify this email template as you wish.</p>
+						<p>Thanks, have a lovely day.</p>
+						<p><a href="http://twitter.com/leemunroe">Follow @leemunroe on Twitter</a>
+					</td>
+				</tr>
+			</table>
+			</div>
+			<!-- /content -->
+
+		</td>
+		<td></td>
+	</tr>
+</table>
+<!-- /body -->
+
+<!-- footer -->
+<table class="footer-wrap">
+	<tr>
+		<td></td>
+		<td class="container">
+
+			<!-- content -->
+			<div class="content">
+				<table>
+					<tr>
+						<td align="center">
+							<p>Don't like these annoying emails? <a href="#"><unsubscribe>Unsubscribe</unsubscribe></a>.
+							</p>
+						</td>
+					</tr>
+				</table>
+			</div><!-- /content -->
+
+		</td>
+		<td></td>
+	</tr>
+</table>
+<!-- /footer -->
+
+</body>
+</html>
diff --git a/readme.md b/readme.md
@@ -0,0 +1,25 @@
+h1. Simple. Responsive. HTML. Email. Templates.
+
+
+h2. Sending emails using a marketing service like Campaign Monitor or Mailchimp?
+
+They'll put the CSS inline for you when you put together your campaign.
+
+
+h2. Sending emails using a service or API like Mailgun?
+
+Put your CSS inline using (Premailer)[http://premailer.dialect.ca/]
+
+* Copy all of email.html
+* Paste the HTML as the source into Premailer
+* Copy the HTML results and use them in your email view/template
+
+
+Tested on all major email clients. Mobile, desktop and web. 
+
+Link to Litmus test.
+
+Screenshot web, desktop, iphone.
+
+Hat tip to Zurb's Ink for their awesome collection of email templates.
+http://zurb.com/ink/