Mobile-first email framework build with scss. demo
Tips
h1
, h2
,...,p
.attribute selectors
in your media queries to avoid a glitch which appears in Yahoo! Mail. Please refer to this article.max-width
.$ bower install fluid-email
You can use css/main.css
directly.
Basic structure
We use wrapper
to constrain the main content on bigger screen, but since Lotus Notes 8 & Outlook don't support max-width
, we need add a conditional wherever we use wrapper
. You can change the wrapper
width in _variable.scss
.
<center>
element is required to fix an layout issue on Gmail App (Android).
<body class="outlook" id="outlook">
<table class="body" id="backgroundTable">
<tr>
<td>
<center>
<!--[if (gte mso 9)|(IE)]> <table cellpadding="0" cellspacing="0" border="0" style="width: 600px; margin: 0 auto;"> <tr> <td> <![endif]-->
<table class="wrapper">
<tr>
<td>
<!-- Your content goes here -->
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]> </td> </tr> </table> <![endif]-->
</center>
</td>
</tr>
</table>
</body>
Settings
The default grid is 12 columns, gallery is 6 columns.
You can directly change the settings in _variables.scss
,
// *** 1 variables.scss *** //
// generate css
$generate-css: true !default;
// layout
$wrapper: 600px !default;
$content: 560px !default;
$cols: 12 !default;
$gutter: 16px !default;
$gallery-cols: 6 !default;
$gallery-align: left !default;
Or change it before you @import fluid-email
$wrapper: 640px;
$content: 560px;
@import "path/to/fluid-email";
Grid
<table class="row">
<tr>
<td class="col-4">
<!-- your content goes here … -->
</td>
<td class="col-8">
<!-- your content goes here … -->
</td>
</tr>
</table>
Sub-grid
<table width="100%">
<tr>
<td class="main">
<!-- your content goes here … -->
</td>
<td class="aside">
<!-- your content goes here … -->
</td>
</tr>
</table>
@mixin sub-col($key)
// pattern
$key: $column of $columns
// Usage
.main { @include sub-col(4 of 12); }
.aside { @include sub-col(8 of 12); }
Gallery
<table class="gallery-2">
<tr>
<td class="item">
<!-- your content goes here … -->
</td>
<td class="item">
<!-- your content goes here … -->
</td>
</tr>
</table>
@mixin gallery($column $item-width-max)
// $columns: positive integer. Columns per row.
// $item-width-max: px | em | rem | …. `max-width` of each column. When the width of each column reaches this value, each row will split into many columns as defined in `$columns`.
.gallery-2 { @include gallery(2 300px); }
Button
<td>
<a href=""><span class="button">button</span></a>
</td>
@mixin button($key)
// pattern
$key: $background-color $padding $radius
// Usage
.button {
@include button(#25d6ec '10px 15px' round);
// $radius: round; (radius | round)
}
type
type
is a shorthand mixin for type.
@mixin type($key);
// pattern
$key: $font-size $font-weight $font-style $line-height $font-family $text-align $text-transform
h1 { @include type(20px 'Georgia, Helvetica, sans-serif' center 1.4 bold italic) }
// font-size: 20px;
// font-weight: bold;
// font-style: italic;
// font-family: 'Georgia, Helvetica, sans-serif';
// text-align: center;
// line-height: 1.4;
// Tips: to set 'font-weight', 'font-style', 'text-align' or 'text-transform' value
// to 'inherit' or 'normal',
// you need add prefix 'weight-', 'style-' or 'transform-'.
// $ro-font-weights: thin, hairline, 'extra light', 'ultra light', lighter, light, normal, medium, 'semi bold', 'demi bold', bold, bolder, 'extra bold', black, heavy, 100, 200, 300, 400, 500, 600, 700, 800, 900, weight-normal, weight-inherit !default;
// $ro-font-styles: italic, oblique, style-normal, style-inherit !default;
// $ro-text-aligns: left, right, center, justify, align-inherit !default;
// $ro-text-transforms: capitalize, uppercase, lowercase, none, full-width, transform-inherit !default;
Breakpoint
@include bp(min 480) {...} // output: @media (min-width: 30em) {...}
@include bp(max 480 screen) {...} // output: @media screen and (max-width: 30em) {...}
@include bp(480 640) {...} // output: @media (min-width: 30em) and (max-width: 40em) {...}
.header { @include bp(min 480) {...} } // output: @media (min-width: 30em) { .header {...}; }
Visibility
@include visible($key);
@include hidden($key);
// pattern
$key: $media $breakpoints
// Usage
.show-on-mobile { @include visible(screen 800);
.show-on-desktop { @include hidden(null 400 800);
// only works on the platforms that support CSS3 mediaquery
Desktop Clients Apple Mail 7 ✓ Apple Mail 8 ✓ Lotus Notes 8.5 ✓ Outlook 2000 ✓ Outlook 2002 ✓ Outlook 2003 ✓ Outlook 2007 ✓ Outlook 2010 ✓ Outlook 2011 ✓ Outlook 2013 ✓ Outlook 2016 ✓ Thunderbird 31 ✓
Mobile Clients Android 2.3 ✓ Android 4.2 ✓ Gmail App (Android) ✓ iPad (Retina) ✓ iPad Mini ✓ iPhone 5s (iOS 7) ✓ iPhone 5s (iOS 8) ✓ iPhone 6 ✓ iPhone 6 Plus ✓ Windows Phone 8 ✓
Web-based Clients AOL Mail (Explorer) ✓ AOL Mail (Firefox) ✓ AOL Mail (Chrome) ✓ Gmail (Explorer) ✓ Gmail (Firefox) ✓ Gmail (Chrome) ✓ Outlook.com (Explorer) ✓ Outlook.com (Firefox) ✓ Outlook.com (Chrome) ✓ Yahoo! Mail (Explorer) ✓ Yahoo! Mail (Firefox) ✓ Yahoo! Mail (Chrome) ✓
http://jackosborne.com/articles/responsive-email-design/ http://blog.fogcreek.com/responsive-html-emails-a-different-strategy/ https://www.campaignmonitor.com/guides/mobile/ http://webdesign.tutsplus.com/tutorials/what-you-should-know-about-html-email--webdesign-12908 https://www.campaignmonitor.com/blog/post/4240/creating-a-centred-responsive-design-without-media-queries Email-Boilerplate ink