kvann’s gists

kvann / hamlhtml5boilerplate.html.haml

Last active August 29, 2015 14:27 — forked from neiled/hamlhtml5boilerplate.html.haml

My haml version of the html 5 boiler plate code

	!!! 5
	/[if lt IE 7] <html lang="en" class="no-js ie6">
	/[if IE 7 ] <html lang="en" class="no-js ie7">
	/[if IE 8 ] <html lang="en" class="no-js ie8">
	/[if IE 9 ] <html lang="en" class="no-js ie9">
	<!--[if (gt IE 9)\|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
	%head
	%meta{:charset => "utf-8"}/
	/
	Always force latest IE rendering engine (even in intranet) & Chrome Frame

kvann / gmail-optimization.html

Last active April 11, 2016 21:15

This sample code will display your email in a more readable format in the Gmail app for Android and iOS. This layout will not trigger the grey optimization message in the iOS Gmail app. Also added fix for center alignment in Outlook desktop client.

	<!--[if (gte mso 9)\|(IE)]>
	<div style="margin: 0px;outline: none;padding: 0px;width: 100%;background-color: #EFEFEF;background: #EFEFEF;font-family:arial,sans;font-size:15px;color:#555555;text-align: center;">
	<table border="0" cellpadding="0" cellspacing="0" width="100%">
	<tbody>
	<tr>
	<td align="center" valign="top" width="100%" style="font-family:arial,sans;font-size:15px;color:#555555;">
	<table border="0" cellpadding="0" cellspacing="0" width="650" bgcolor="#EFEFEF" style="min-width: 650px;font-family:arial,sans;font-size:15px;color:#555555;">
	<tbody>
	<tr>
	<td valign="top" align="left" style="background-color: #ffffff;font-family:arial,sans;font-size:15px;color:#555555;text-align:left;line-height:150px;line-height:1.5;">

kvann / email-centering.html

Last active January 5, 2022 23:56

This is a very basic, strip down email template for centering your email on all email services, including Outlook desktop, Outlook.com, Gmail, and Yahoo Mail. Note -- we set max-width: 600px; this fixes the readability issue in Gmail app for Android as the app does not support media query. This template does not use the ghost table method.

	<!doctype html>
	<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
	<head>
	<meta http–equiv="content-type" content="text/html; charset=utf-8" />
	<meta http–equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	</head>
	<body style="margin: 0px; background-color: #F2F2F2; width: 100%; text-align: center;" marginwidth="0" marginheight="0">
	<div style="margin: 0px; outline: none; padding: 0px; color: #5D5D5D; font-family: arial; line-height: 1.1; width: 100%; background-color: #F2F2F2; background: #F2F2F2; text-align: center;">
	<table border="0" cellpadding="0" cellspacing="0" width="100%" align="left" style="min-width:100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #F2F2F2; background: #F2F2F2;">

kvann / social-icons.html

Last active September 14, 2021 17:11

Social icon custom layout for email template. This layout allows for the social icons to be centered aligned and has fixes set so that alignment are rendering properly in Android and iOS. This layout does not collapse and will overwrite any media query collapsing.

kvann / mobile.html

Created December 22, 2016 15:26

This email template can be used as a starting point for email campaign targeting mobile. There is a small media query section that target the Gmail app for Android and iOS to force font scaling. Depending on your phone model and the Gmail app version you are running, the rendering of your email may slightly differ.

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html lang="en" style="margin: 0; outline: none; padding: 0;">
	<head>
	<!--[if !mso]><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--<![endif]-->
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="Content-Language" content="en-us">

	<style>
	/* Resetting Outlook.com styling */
	.ExternalClass {

kvann / outlook-button-fix.html

Last active December 29, 2016 19:32

Outlook desktop has a hard time rendering basic button styling. In most cases, styling the href link tag isn't sufficient enough since some version of Outlook does not support the display block attribute. This button layout fixes the Outlook display issue when button text are clipped if text wrapped onto multiple lines. This update also ensures …

	<!--[if mso]>
	<style type="text/css">
	/* Import the VML behavior for Outlook */
	v\: * { behavior:url(#default#VML); display:inline-block }
	</style>
	<![endif]-->

	<!-- Start the button container -->
	<div class="button-wrapper" style="margin: 0; outline: none; padding: 0; text-align: center;">
	<!-- This ensures that Outlook 2007, 2010, 2013 and 2016 renders the button as intended. Update width and height so button expand with the text -->

kvann / responsive-email-template.html

Last active June 16, 2017 15:40

Simple email template for Gmail app, iPhone, Android, Outlook desktop and other popular email services.

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html lang="en" style="margin: 0; outline: none; padding: 0;">
	<head>
	<!--[if !mso]><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--<![endif]-->
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="Content-Language" content="en-us">

	<style data-ac-keep="true">
	.ExternalClass {
	width: 100%;

kvann / 2-Column, No Collapse

Created August 10, 2021 21:56

This code generate a two-column layout and ensure that columns will not collapse in mobile view https://screen.ac/GGup8wZe

	<table width="100%" style="min-width:auto!important; display:table!important;">
	<tr>
	<td width="48%" align="top" valign="left" style="display:table-cell !important; width:48.99% !important;max-width:48.99% !important; font-size: 15px; font-family: sans-serif; line-height: 1.5;">
	This is your welcome paragraph. You can write anything you want here. Simply click on the text to start editing. Once you click on the text you will have options such as bold, font color, font size, etc.. You can also style this area of content by clicking on the text and then using the options found in the right side bar of this page. You can adjust the background, padding, margin, etc..
	</td>
	<td width="20" style="display:table-cell !important; width:20px !important;max-width:20px !important;"> </td>
	<td width="48%" align="top" valign="left" style="display:table-cell !important; width:48.99% !important;max-width:48.99% !important; font-size: 15px; font-family: sans-serif; line-hei

kvann / 2-Column RSS Layout

Last active February 12, 2022 00:10

This custom HTML layout contains a left column for an image and the right column containing the post title and description. This custom HTML will collapse as a single column in mobile view.

	%RSS-FEED\|URL:https://website.com/rss/feed\|SHOW:ALL%
	%RSS-LOOP\|LIMIT:5%
	<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin:0; padding:0; border-collapse:collapse;">
	<tr>
	<td align="left" valign="top" width="325">
	<img src="%RSS:ITEM:MEDIA%" width="325" style="display:block; width:100%; max-width:100%; border:0;">
	</td>
	<td width="20" height="20"> </td>
	<td align="left" valign="top">
	<div style="padding-bottom:30px; font-size:15px; font-family: Open Sans, Roboto, San Francisco, Helvetica, Arial, sans-serif; color:#222222; line-height:130%; line-height:1.2;">

	<!--
	/**
	* Adjust the outter container width to match the total of all columns in the table
	*/
	-->
	<div class="outter-container" style="display:flex; width:74px!important; max-width:74px!important;">
	<center style="margin:0; outline:none; padding:0; font-size:0px;">
	<table cellspacing="0" cellpadding="0" align="center" style="font-size:0; min-width:auto!important; mso-table-lspace:0pt; mso-table-rspace:0pt; margin:auto!important; display:table-cell!important; text-align:center!important;">
	<tr>
	<td align="center" valign="middle" width="32" style="display:table-cell!important; font-size:0; width:32px!important;">

Kosal Vann kvann