├── .gitignore
├── Gemfile
├── Gemfile.lock
├── README.md
├── Rakefile
├── config.rb
├── data
    └── categories.yml
└── source
    ├── CNAME
    ├── confirmation.html.erb
    ├── images
        ├── context.svg
        ├── envelope.png
        ├── envelope.svg
        ├── favicon.png
        ├── icons
        │   ├── icon_10612.svg
        │   ├── icon_11589.svg
        │   ├── icon_1171.svg
        │   ├── icon_1541.svg
        │   ├── icon_2835.svg
        │   ├── icon_7231.svg
        │   └── icon_8541.svg
        ├── shadow.png
        ├── source.svg
        └── support.png
    ├── index.html.erb
    ├── javascripts
        ├── all.js
        ├── init.js
        └── plugins
        │   ├── modernizr.js
        │   └── prism.js
    ├── layouts
        ├── interior.erb
        ├── layout.erb
        └── pattern.erb
    ├── partials
        ├── footer.html.erb
        ├── header-home.html.erb
        └── header.html.erb
    ├── patterns
        ├── accordions
        │   ├── full-to-accordion.html.erb
        │   └── show-more.html.erb
        ├── grid-blocks
        │   ├── double-wide-v1.html.erb
        │   ├── double-wide-v2.html.erb
        │   ├── double-wide-v3.html.erb
        │   └── with-title-sections.html.erb
        ├── layout
        │   ├── 2-equal-width-columns-v2.html.erb
        │   ├── 2-equal-width-columns.html.erb
        │   ├── 3-equal-width-columns.html.erb
        │   ├── column-drop.html.erb
        │   ├── image-surround.html.erb
        │   ├── layout-shifter.html.erb
        │   ├── main-column-with-sidebar.html.erb
        │   ├── shrink-wrap.html.erb
        │   └── source-order-shift.html.erb
        ├── lists
        │   ├── list-with-thumbnails-and-summary-hide.html.erb
        │   ├── list-with-thumbnails-and-summary-stack.erb
        │   ├── list-with-thumbnails-v2.erb
        │   └── list-with-thumbnails.erb
        ├── media
        │   ├── basic-fluid-image.html.erb
        │   ├── connecting-fallback.jpg
        │   ├── description-overlay-bottom.html.erb
        │   ├── description-overlay-right.html.erb
        │   ├── espana_alleyway.jpg
        │   ├── fluid-video.html.erb
        │   ├── image-center-crop.html.erb
        │   ├── image-grid.html.erb
        │   ├── image-left-crop.html.erb
        │   ├── image-right-crop.html.erb
        │   ├── image-vertical-crop.html.erb
        │   ├── lindsey.jpg
        │   ├── meat.jpg
        │   ├── souk.jpg
        │   ├── spain.jpg
        │   └── tattoos.jpg
        └── navigation
        │   ├── drop-below.html.erb
        │   ├── footer-anchor.html.erb
        │   ├── hide-everything.html.erb
        │   ├── reduce-v2.html.erb
        │   ├── reduce.html.erb
        │   ├── stacked-split-links.html.erb
        │   ├── stacked-top-links-4-up.html.erb
        │   ├── stacked-top-links.html.erb
        │   ├── toggle.html
        │   ├── toggle2.html
        │   ├── toggle3.html
        │   └── top-links.html.erb
    ├── stylesheets
        ├── Partials
        │   ├── _branding.scss
        │   ├── _footer.scss
        │   ├── _forms.scss
        │   ├── _grid.scss
        │   ├── _header.scss
        │   ├── _pattern.scss
        │   ├── _support.scss
        │   └── _utilities.scss
        ├── all.css.scss
        └── prism.css
    ├── submit-pattern.html.erb
    └── support.html.erb


/.gitignore:
--------------------------------------------------------------------------------
1 | # Ignore all logfiles and tempfiles.
2 | /log/*.log
3 | /tmp
4 | .sass-cache
5 | .cache
6 | .bundle
7 | *.DS_Store


--------------------------------------------------------------------------------
/Gemfile:
--------------------------------------------------------------------------------
1 | # If you have OpenSSL installed, we recommend updating
2 | # the following line to use "https"
3 | source 'http://rubygems.org'
4 | 
5 | gem "middleman"
6 | gem "compass-normalize"
7 | gem 'middleman-gh-pages'
8 | 
9 | require 'rbconfig'


--------------------------------------------------------------------------------
/Gemfile.lock:
--------------------------------------------------------------------------------
  1 | GEM
  2 |   remote: http://rubygems.org/
  3 |   specs:
  4 |     activesupport (4.0.4)
  5 |       i18n (~> 0.6, >= 0.6.9)
  6 |       minitest (~> 4.2)
  7 |       multi_json (~> 1.3)
  8 |       thread_safe (~> 0.1)
  9 |       tzinfo (~> 0.3.37)
 10 |     chunky_png (1.3.0)
 11 |     coffee-script (2.2.0)
 12 |       coffee-script-source
 13 |       execjs
 14 |     coffee-script-source (1.7.0)
 15 |     compass (0.12.5)
 16 |       chunky_png (~> 1.2)
 17 |       fssm (>= 0.2.7)
 18 |       sass (~> 3.2.19)
 19 |     compass-import-once (1.0.4)
 20 |       sass (>= 3.2, < 3.5)
 21 |     compass-normalize (1.5)
 22 |       compass (>= 0.12.0)
 23 |     erubis (2.7.0)
 24 |     execjs (2.0.2)
 25 |     ffi (1.9.3)
 26 |     fssm (0.2.10)
 27 |     haml (4.0.5)
 28 |       tilt
 29 |     hike (1.2.3)
 30 |     hooks (0.4.0)
 31 |       uber (~> 0.0.4)
 32 |     i18n (0.6.9)
 33 |     json (1.8.1)
 34 |     kramdown (1.3.3)
 35 |     listen (1.3.1)
 36 |       rb-fsevent (>= 0.9.3)
 37 |       rb-inotify (>= 0.9)
 38 |       rb-kqueue (>= 0.2)
 39 |     middleman (3.3.1)
 40 |       coffee-script (~> 2.2.0)
 41 |       compass (>= 0.12.4)
 42 |       compass-import-once (~> 1.0.4)
 43 |       execjs (~> 2.0)
 44 |       haml (>= 4.0.5)
 45 |       kramdown (~> 1.2)
 46 |       middleman-core (= 3.3.1)
 47 |       middleman-sprockets (>= 3.1.2)
 48 |       sass (>= 3.2.17, < 4.0)
 49 |       uglifier (~> 2.5)
 50 |     middleman-core (3.3.1)
 51 |       activesupport (~> 4.0.1)
 52 |       bundler (~> 1.1)
 53 |       erubis
 54 |       hooks (~> 0.3)
 55 |       i18n (~> 0.6.9)
 56 |       listen (~> 1.1)
 57 |       padrino-helpers (~> 0.12.1)
 58 |       rack (>= 1.4.5, < 2.0)
 59 |       rack-test (~> 0.6.2)
 60 |       thor (>= 0.15.2, < 2.0)
 61 |       tilt (~> 1.4.1, < 2.0)
 62 |     middleman-gh-pages (0.0.3)
 63 |       rake (> 0.9.3)
 64 |     middleman-sprockets (3.3.2)
 65 |       middleman-core (>= 3.2)
 66 |       sprockets (~> 2.2)
 67 |       sprockets-helpers (~> 1.1.0)
 68 |       sprockets-sass (~> 1.0.0)
 69 |     minitest (4.7.5)
 70 |     multi_json (1.9.2)
 71 |     padrino-helpers (0.12.1)
 72 |       i18n (~> 0.6, >= 0.6.7)
 73 |       padrino-support (= 0.12.1)
 74 |       tilt (~> 1.4.1)
 75 |     padrino-support (0.12.1)
 76 |       activesupport (>= 3.1)
 77 |     rack (1.5.2)
 78 |     rack-test (0.6.2)
 79 |       rack (>= 1.0)
 80 |     rake (10.3.0)
 81 |     rb-fsevent (0.9.4)
 82 |     rb-inotify (0.9.3)
 83 |       ffi (>= 0.5.0)
 84 |     rb-kqueue (0.2.2)
 85 |       ffi (>= 0.5.0)
 86 |     sass (3.2.19)
 87 |     sprockets (2.12.0)
 88 |       hike (~> 1.2)
 89 |       multi_json (~> 1.0)
 90 |       rack (~> 1.0)
 91 |       tilt (~> 1.1, != 1.3.0)
 92 |     sprockets-helpers (1.1.0)
 93 |       sprockets (~> 2.0)
 94 |     sprockets-sass (1.0.3)
 95 |       sprockets (~> 2.0)
 96 |       tilt (~> 1.1)
 97 |     thor (0.19.1)
 98 |     thread_safe (0.3.2)
 99 |     tilt (1.4.1)
100 |     tzinfo (0.3.39)
101 |     uber (0.0.4)
102 |     uglifier (2.5.0)
103 |       execjs (>= 0.3.0)
104 |       json (>= 1.8.0)
105 | 
106 | PLATFORMS
107 |   ruby
108 | 
109 | DEPENDENCIES
110 |   compass-normalize
111 |   middleman
112 |   middleman-gh-pages
113 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | Responsive Email Patterns
 2 | =======================
 3 | 
 4 | A collection of patterns and modules for responsive emails.
 5 | <a href="http://responsiveemailpatterns.com/">Responsive Email Patterns Website</a>
 6 | 
 7 | Based on Brad Frost's 'This is Responsive' <a href="http://bradfrost.github.com/this-is-responsive/patterns.html">Responsive Patterns</a>.
 8 | 
 9 | ## Layout
10 | <ul>
11 | 	<li>Column Drop</li>
12 | 	<li>2 equal-width columns</li>
13 | 	<li>2 equal-width columns V2</li>
14 | 	<li>3 equal-width columns</li>
15 | 	<li>Shrink Wrap</li>
16 | 	<li>Main Column with Sidebar</li>
17 | 	<li>Image Surround</li>
18 | 	<li>Layout Shifter</li>
19 | 	<li>Source Order Shift</li>
20 | </ul>
21 | 
22 | ## Navigation
23 | <ul>
24 | 	<li>Top Links</li>
25 | 	<li>Stacked Split Links</li>
26 | 	<li>Drop Below</li>
27 | 	<li>Footer Anchor</li>
28 | 	<li>Reduce</li>
29 | 	<li>Reduce 2</li>
30 | 	<li>Hide Everything</li>
31 | 	<li>Stacked Top Links</li>
32 | 	<li>Stacked Top Links 4-Up</li>
33 | </ul>
34 | 
35 | ## Lists
36 | <ul>
37 | 	<li>List with Thumbnails</li>
38 | 	<li>List with Thumbnails V2</li>
39 | 	<li>List with Thumbnails &amp; Summary Stack</li>
40 | 	<li>List with Thumbnails &amp; Summary Hide</li>
41 | </ul>
42 | 
43 | ## Grid Blocks
44 | <ul>
45 | 	<li>With Title Sections</li>
46 | 	<li>Double-Wide v1</li>
47 | 	<li>Double-Wide v2</li>
48 | 	<li>Double-Wide v3</li>
49 | </ul>
50 | 
51 | ## Media
52 | <ul>
53 | 	<li>Basic Fluid Image</li>
54 | 	<li>Image Center Crop</li>
55 | 	<li>Image Vertical Crop</li>
56 | 	<li>Image Right Crop</li>
57 | 	<li>Image Left Crop</li>
58 | 	<li>Description Overlay Bottom</li>
59 | 	<li>Image Grid</li>
60 | 	<li>Fuid Video</li>
61 | </ul>
62 | 
63 | ## Accordion
64 | <ul>
65 | 	<li>Show More</li>
66 | 	<li>Full to Accordion</li>
67 | </ul>
68 | 


--------------------------------------------------------------------------------
/Rakefile:
--------------------------------------------------------------------------------
1 | require 'middleman-gh-pages'


--------------------------------------------------------------------------------
/config.rb:
--------------------------------------------------------------------------------
 1 | require 'compass-normalize'
 2 | 
 3 | set :css_dir, 'stylesheets'
 4 | set :js_dir, 'javascripts'
 5 | set :images_dir, 'images'
 6 | page "patterns/*", :layout => :pattern
 7 | 
 8 | # Build-specific configuration
 9 | configure :build do
10 |   activate :minify_css
11 |   activate :minify_javascript
12 |   activate :relative_assets
13 | end


--------------------------------------------------------------------------------
/data/categories.yml:
--------------------------------------------------------------------------------
 1 | - name: Layout
 2 |   id: layout
 3 |   patterns:
 4 |     - name: "Column Drop"
 5 |       id:   "column-drop"
 6 |     - name: "2 Equal-Width Columns"
 7 |       id:   "2-equal-width-columns"
 8 |     - name: "2 Equal-Width Columns v2"
 9 |       id:   "2-equal-width-columns-v2"
10 |     - name: "3 Equal-Width Columns"
11 |       id:   "3-equal-width-columns"
12 |     - name: "Shrink Wrap"
13 |       id:   "shrink-wrap"
14 |     - name: "Main Column w/ Sidebar"
15 |       id:   "main-column-with-sidebar"
16 |     - name: "Image Surround"
17 |       id:   "image-surround"
18 |     - name: "Layout Shifter"
19 |       id:   "layout-shifter"
20 |     - name: "Source Order Shift"
21 |       id:   "source-order-shift" 
22 | 
23 | - name: Navigation
24 |   id: navigation
25 |   patterns:
26 |     - name: "Top Links"
27 |       id:   "top-links"
28 |     - name: "Stacked Split Links"
29 |       id:   "stacked-split-links"
30 |     - name: "Drop Below"
31 |       id:   "drop-below"
32 |     - name: "Footer Anchor"
33 |       id:   "footer-anchor"
34 |     - name: "Reduce"
35 |       id:   "reduce"
36 |     - name: "Reduce v2"
37 |       id:   "reduce-v2"
38 |     - name: "Hide Everything"
39 |       id:   "hide-everything"
40 |     - name: "Stacked Top Links"
41 |       id:   "stacked-top-links"
42 |     - name: "Stacked Top Links 4-Up"
43 |       id:   "stacked-top-links-4-up"
44 | 
45 | - name: Lists
46 |   id: lists
47 |   patterns:
48 |     - name: "List w/ Thumbnails"
49 |       id:   "list-with-thumbnails"
50 |     - name: "List w/ Thumbnails v2"
51 |       id:   "list-with-thumbnails-v2"
52 |     - name: "List w/ Thumbnails & Summary Stack"
53 |       id:   "list-with-thumbnails-and-summary-stack"
54 |     - name: "List w/ Thumbnails & Summary Hide"
55 |       id:   "list-with-thumbnails-and-summary-hide"
56 | 
57 | - name: Grid Blocks
58 |   id: grid-blocks
59 |   patterns:
60 |     - name: "With Title Sections"
61 |       id:   "with-title-sections"
62 |     - name: "Double Wide v1"
63 |       id:   "double-wide-v1"
64 |     - name: "Double Wide v2"
65 |       id:   "double-wide-v2"
66 |     - name: "Double Wide v3"
67 |       id:   "double-wide-v3"
68 | 
69 | - name: Media
70 |   id: media
71 |   patterns:
72 |     - name: "Basic Fluid Image"
73 |       id:   "basic-fluid-image"
74 |     - name: "Image Center Crop"
75 |       id:   "image-center-crop"
76 |     - name: "Image Vertical Crop"
77 |       id:   "image-vertical-crop"
78 |     - name: "Image Right Crop"
79 |       id:   "image-right-crop"
80 |     - name: "Image Left Crop"
81 |       id:   "image-left-crop"
82 |     - name: "Description Overlay Bottom"
83 |       id:   "description-overlay-bottom"
84 |     - name: "Image Grid"
85 |       id:   "image-grid"
86 |     - name: "Fluid Video"
87 |       id:   "fluid-video"
88 | 
89 | - name: Accordions
90 |   id: accordions
91 |   patterns:
92 |     - name: "Show More"
93 |       id:   "show-more"
94 |     - name: "Full to Accordion"
95 |       id:   "full-to-accordion"
96 | 


--------------------------------------------------------------------------------
/source/CNAME:
--------------------------------------------------------------------------------
1 | responsiveemailpatterns.com


--------------------------------------------------------------------------------
/source/confirmation.html.erb:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Responsive Email Patterns
 3 | layout: interior
 4 | buttons: false
 5 | ---
 6 | 
 7 | <div class="form">
 8 | 	<h1>Thanks for submitting your Pattern!</h1>
 9 | 	<div class="submit">
10 | 		<a class="button" href="submit-pattern.html">Submit Another Pattern</a>
11 | 	</div>
12 | </div>


--------------------------------------------------------------------------------
/source/images/context.svg:
--------------------------------------------------------------------------------
1 | <svg version="1.1" id="Your_Icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="14 14 72 72" enable-background="new 14 14 72 72" xml:space="preserve" fill="#fff">
2 | <g>
3 | 	<rect x="14" y="14" width="72" height="18"/>
4 | 	<rect x="14" y="41" width="27" height="45"/>
5 | 	<rect x="50" y="41" width="36" height="45"/>
6 | </g>
7 | </svg>
8 | 


--------------------------------------------------------------------------------
/source/images/envelope.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/briangraves/ResponsiveEmailPatterns/99c12fd3bb2a74abf869cdc47408c18c8ec9db46/source/images/envelope.png


--------------------------------------------------------------------------------
/source/images/envelope.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In  -->
 3 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
 4 | 	<!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/">
 5 | ]>
 6 | <svg version="1.1"
 7 | 	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
 8 | 	 x="0px" y="0px" width="100px" height="75px" viewBox="0 0 100 75" overflow="visible" enable-background="new 0 0 100 75"
 9 | 	 xml:space="preserve">
10 | <defs>
11 | </defs>
12 | <path fill="#ffffff" d="M100,75.422H0V0h100V75.422L100,75.422z M11.833,68.445h76.333L63.048,42.73l-4.756,4.787
13 | 	c-2.06,2.058-5.007,3.235-8.105,3.235c-0.017,0-0.035-0.003-0.052-0.003c-3.11-0.014-6.067-1.216-8.115-3.305l-4.835-4.895
14 | 	L11.833,68.445L11.833,68.445z M6.977,11.973v51.46L32.282,37.59L6.977,11.973L6.977,11.973z M67.964,37.78l25.06,25.651V12.551
15 | 	L67.964,37.78L67.964,37.78z M11.849,6.979l35.143,35.573c0.761,0.774,1.916,1.218,3.174,1.222c0.008,0,0.014,0,0.021,0
16 | 	c1.24,0,2.42-0.438,3.161-1.183L88.723,6.979H11.849L11.849,6.979z"/>
17 | </svg>
18 | 


--------------------------------------------------------------------------------
/source/images/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/briangraves/ResponsiveEmailPatterns/99c12fd3bb2a74abf869cdc47408c18c8ec9db46/source/images/favicon.png


--------------------------------------------------------------------------------
/source/images/icons/icon_10612.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Your_Icon" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
2 | <g>
3 | 	<rect x="14" y="13.996" width="72" height="18"/>
4 | 	<rect x="14" y="41.003" width="27" height="45.001"/>
5 | 	<rect x="50" y="41.002" width="36" height="45"/>
6 | </g>
7 | </svg>


--------------------------------------------------------------------------------
/source/images/icons/icon_11589.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Your_Icon" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
 2 | <switch>
 3 | 	<foreignObject requiredExtensions="http://ns.adobe.com/AdobeIllustrator/10.0/" x="0" y="0" width="1" height="1">
 4 | 		</foreignObject>
 5 | 	<g i:extraneous="self">
 6 | 		<path d="M41.197,6.977H26.514v0.001h-7.898c-2.479-0.04-2.602,1.439-3.789,2.724c-0.184,0.2-0.393,0.395-0.642,0.579    c-4.447,3.291-12.788-0.02-12.862,6.072c-0.029,2.526-0.037,5.148-0.031,7.809H1.289v48.821H1.29    c-0.005,2.43,0.005,4.826,0.032,7.141c0.074,6.092,8.415,2.779,12.862,6.072c0.249,0.186,0.458,0.377,0.642,0.578    c1.188,1.285,1.311,2.762,3.789,2.723v0.002h7.898h1.547h0.483c0.636,1.156,1.757,2.652,3.327,2.652c2.553,0,14.15,0,14.15,0    s3.508-0.045,3.508-5.25v-1.18V13.004L41.197,6.977z M17.789,80.529H5.799V15.761h11.99V80.529z"/>
 7 | 		<path d="M11.362,21.423c0,1.118-0.905,2.024-2.024,2.024c-1.117,0-2.024-0.906-2.024-2.024c0-1.119,0.907-2.025,2.024-2.025    C10.457,19.398,11.362,20.304,11.362,21.423z"/>
 8 | 		<path d="M11.362,26.768c0,1.119-0.905,2.025-2.024,2.025c-1.117,0-2.024-0.906-2.024-2.025c0-1.118,0.907-2.024,2.024-2.024    C10.457,24.744,11.362,25.65,11.362,26.768z"/>
 9 | 		<path d="M11.362,32.113c0,1.117-0.905,2.023-2.024,2.023c-1.117,0-2.024-0.906-2.024-2.023c0-1.119,0.907-2.025,2.024-2.025    C10.457,30.088,11.362,30.994,11.362,32.113z"/>
10 | 		<path d="M11.362,37.457c0,1.119-0.905,2.025-2.024,2.025c-1.117,0-2.024-0.906-2.024-2.025c0-1.117,0.907-2.025,2.024-2.025    C10.457,35.432,11.362,36.34,11.362,37.457z"/>
11 | 		<path d="M11.362,42.801c0,1.119-0.905,2.025-2.024,2.025c-1.117,0-2.024-0.906-2.024-2.025c0-1.117,0.907-2.023,2.024-2.023    C10.457,40.777,11.362,41.684,11.362,42.801z"/>
12 | 		<path d="M11.362,48.146c0,1.115-0.905,2.023-2.024,2.023c-1.117,0-2.024-0.908-2.024-2.023c0-1.119,0.907-2.025,2.024-2.025    C10.457,46.121,11.362,47.027,11.362,48.146z"/>
13 | 		<path d="M11.362,53.488c0,1.119-0.905,2.025-2.024,2.025c-1.117,0-2.024-0.906-2.024-2.025c0-1.115,0.907-2.023,2.024-2.023    C10.457,51.465,11.362,52.373,11.362,53.488z"/>
14 | 		<path d="M11.362,58.834c0,1.117-0.905,2.023-2.024,2.023c-1.117,0-2.024-0.906-2.024-2.023c0-1.119,0.907-2.023,2.024-2.023    C10.457,56.811,11.362,57.715,11.362,58.834z"/>
15 | 		<path d="M11.362,64.18c0,1.117-0.905,2.023-2.024,2.023c-1.117,0-2.024-0.906-2.024-2.023s0.907-2.023,2.024-2.023    C10.457,62.156,11.362,63.062,11.362,64.18z"/>
16 | 		<path d="M11.362,69.523c0,1.117-0.905,2.025-2.024,2.025c-1.117,0-2.024-0.908-2.024-2.025S8.221,67.5,9.338,67.5    C10.457,67.5,11.362,68.406,11.362,69.523z"/>
17 | 		<path d="M11.362,74.869c0,1.117-0.905,2.021-2.024,2.021c-1.117,0-2.024-0.904-2.024-2.021c0-1.121,0.907-2.025,2.024-2.025    C10.457,72.844,11.362,73.748,11.362,74.869z"/>
18 | 		<path d="M16.271,23.882c0,1.117-0.906,2.023-2.024,2.023S12.223,25,12.223,23.882c0-1.119,0.906-2.025,2.024-2.025    S16.271,22.763,16.271,23.882z"/>
19 | 		<path d="M16.271,29.227c0,1.119-0.906,2.023-2.024,2.023s-2.024-0.904-2.024-2.023s0.906-2.023,2.024-2.023    S16.271,28.107,16.271,29.227z"/>
20 | 		<path d="M16.271,34.57c0,1.119-0.906,2.025-2.024,2.025s-2.024-0.906-2.024-2.025c0-1.117,0.906-2.023,2.024-2.023    S16.271,33.453,16.271,34.57z"/>
21 | 		<path d="M16.271,39.916c0,1.117-0.906,2.023-2.024,2.023s-2.024-0.906-2.024-2.023c0-1.119,0.906-2.023,2.024-2.023    S16.271,38.797,16.271,39.916z"/>
22 | 		<path d="M16.271,45.262c0,1.115-0.906,2.023-2.024,2.023s-2.024-0.908-2.024-2.023c0-1.119,0.906-2.025,2.024-2.025    S16.271,44.143,16.271,45.262z"/>
23 | 		<path d="M16.271,50.604c0,1.117-0.906,2.025-2.024,2.025s-2.024-0.908-2.024-2.025s0.906-2.023,2.024-2.023    S16.271,49.486,16.271,50.604z"/>
24 | 		<path d="M16.271,55.947c0,1.119-0.906,2.025-2.024,2.025s-2.024-0.906-2.024-2.025c0-1.117,0.906-2.023,2.024-2.023    S16.271,54.83,16.271,55.947z"/>
25 | 		<path d="M16.271,61.291c0,1.119-0.906,2.027-2.024,2.027s-2.024-0.908-2.024-2.027c0-1.117,0.906-2.021,2.024-2.021    S16.271,60.174,16.271,61.291z"/>
26 | 		<path d="M16.271,66.639c0,1.117-0.906,2.023-2.024,2.023s-2.024-0.906-2.024-2.023c0-1.121,0.906-2.027,2.024-2.027    S16.271,65.518,16.271,66.639z"/>
27 | 		<path d="M16.271,71.98c0,1.119-0.906,2.027-2.024,2.027s-2.024-0.908-2.024-2.027c0-1.117,0.906-2.023,2.024-2.023    S16.271,70.863,16.271,71.98z"/>
28 | 		<path d="M84.049,18.009l-4.214-2.885c-0.544-0.374-1.288-0.238-1.667,0.297c-0.377,0.537-0.241,1.271,0.302,1.645l3.479,2.382    L62.125,79.32l14.113-61.836c0.076-0.348-0.007-0.711-0.227-0.992l-4.038-5.105c-0.409-0.517-1.165-0.608-1.683-0.205    c-0.521,0.404-0.616,1.15-0.208,1.665l3.69,4.665L59.435,80.338l9.641-64.753c0.049-0.333-0.044-0.671-0.257-0.933l-5.04-6.191    c-0.418-0.515-1.174-0.59-1.688-0.173c-0.516,0.418-0.59,1.172-0.173,1.686l4.708,5.782l-8.954,60.157l5.666-62.122    c0.035-0.395-0.126-0.781-0.431-1.035L56.52,7.491c-0.511-0.422-1.267-0.349-1.687,0.163c-0.422,0.51-0.348,1.266,0.163,1.687    l5.896,4.861l-5.277,57.874l1.478-58.846c0.008-0.392-0.174-0.766-0.488-0.997l-7.538-5.507c-0.534-0.392-1.284-0.275-1.677,0.259    C47,7.52,47.116,8.27,47.649,8.66l7.029,5.138l-1.932,76.954c0,0-0.132,1.307,1.688,1.307c1.088,0,2.716,0,3.854,0    c0.776,0,1.326,0,1.326,0h0.78c0.03,0,0.061-0.074,0.095-0.182l24.013-72.532C84.671,18.849,84.483,18.305,84.049,18.009z"/>
29 | 		<path d="M88.422,21.619l-0.418-0.157L61.569,92.068l0.421,0.154c7.287,2.73,14.694,0.957,16.531-3.953l19.772-52.814    C100.134,30.543,95.714,24.347,88.422,21.619z M80.335,51.02c0.356-0.957,1.423-1.441,2.38-1.084s1.442,1.426,1.084,2.383    c-0.361,0.955-1.423,1.439-2.383,1.08C80.461,53.043,79.974,51.977,80.335,51.02z M78.622,55.594    c0.356-0.959,1.423-1.443,2.38-1.086c0.957,0.359,1.442,1.426,1.086,2.381c-0.359,0.957-1.427,1.441-2.383,1.084    C78.748,57.615,78.265,56.553,78.622,55.594z M76.909,60.166c0.358-0.959,1.425-1.445,2.38-1.084    c0.957,0.355,1.442,1.424,1.086,2.381c-0.359,0.955-1.427,1.439-2.383,1.084C77.035,62.188,76.552,61.123,76.909,60.166z     M78.662,66.035c-0.357,0.957-1.423,1.439-2.383,1.084c-0.955-0.357-1.44-1.424-1.081-2.381c0.356-0.955,1.423-1.439,2.38-1.084    C78.535,64.012,79.021,65.078,78.662,66.035z M82.861,67.607c-0.358,0.959-1.423,1.439-2.38,1.084    c-0.957-0.359-1.443-1.424-1.084-2.381c0.357-0.955,1.423-1.441,2.38-1.084S83.22,66.65,82.861,67.607z M84.574,63.033    c-0.36,0.957-1.423,1.443-2.38,1.088c-0.957-0.361-1.443-1.424-1.084-2.383c0.357-0.957,1.423-1.443,2.38-1.084    S84.933,62.078,84.574,63.033z M86.287,58.463c-0.36,0.957-1.425,1.441-2.38,1.082c-0.957-0.357-1.445-1.42-1.086-2.379    c0.359-0.957,1.425-1.445,2.382-1.086C86.158,56.439,86.644,57.506,86.287,58.463z M87.998,53.891    c-0.358,0.955-1.423,1.439-2.38,1.082c-0.959-0.357-1.443-1.424-1.084-2.381c0.356-0.957,1.425-1.441,2.378-1.084    C87.871,51.867,88.354,52.934,87.998,53.891z"/>
30 | 	</g>
31 | </switch>
32 | </svg>


--------------------------------------------------------------------------------
/source/images/icons/icon_1171.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
2 | <path display="none" d="M69.172,11.265c-0.191-0.192-0.502-0.192-0.695,0L11.639,68.029c-0.192,0.191-0.192,0.501,0,0.692  l19.207,19.184c0.096,0.095,0.222,0.143,0.348,0.143c0.125,0,0.251-0.048,0.347-0.143L88.38,31.14  c0.093-0.092,0.145-0.216,0.145-0.347s-0.052-0.255-0.145-0.347L69.172,11.265z"/>
3 | <path display="none" d="M96.846,9.12l-6.319-6.311C88.713,0.998,86.301,0,83.735,0c-2.564,0-4.977,0.998-6.79,2.809L70.626,9.12  c-0.093,0.092-0.145,0.216-0.145,0.347c0,0.13,0.052,0.254,0.145,0.346l19.207,19.182c0.092,0.092,0.218,0.144,0.348,0.144  c0.131,0,0.255-0.052,0.346-0.144l6.319-6.311c1.814-1.812,2.813-4.22,2.813-6.783C99.659,13.34,98.66,10.932,96.846,9.12z"/>
4 | <path display="none" d="M10.358,69.967c-0.122-0.121-0.296-0.172-0.464-0.129c-0.167,0.04-0.3,0.165-0.351,0.33l-9.18,29.195  c-0.055,0.178-0.006,0.369,0.127,0.498C0.584,99.952,0.707,100,0.832,100c0.054,0,0.11-0.011,0.164-0.029l28.387-10.012  c0.159-0.056,0.278-0.188,0.315-0.354c0.037-0.164-0.012-0.337-0.132-0.455L10.358,69.967z"/>
5 | <path d="M2.343,54.1C0.938,53.162,0,51.289,0,49.648c0-1.64,0.703-3.162,2.46-3.982H2.343c8.317-4.92,19.915-11.48,27.647-16.049  v10.895c-3.046,1.757-7.146,3.749-17.455,9.255l0.117,0.116c5.506,2.461,11.832,6.209,17.338,9.489v11.012L2.343,54.1z"/>
6 | <path d="M97.657,45.9c1.404,0.938,2.343,2.812,2.343,4.452c0,1.64-0.703,3.162-2.461,3.982h0.118  c-8.317,4.92-19.916,11.48-27.647,16.049V59.488c3.046-1.756,7.146-3.748,17.455-9.254l-0.117-0.116  c-5.505-2.461-11.832-6.209-17.338-9.489V29.617L97.657,45.9z"/>
7 | <path d="M46.401,71.844H39.39L53.48,28.156h7.13L46.401,71.844z"/>
8 | <text transform="matrix(1 0 0 1 -2321 -1309)" font-family="'Courier-Bold'" font-size="177.3347">&lt;/&gt;</text>
9 | </svg>


--------------------------------------------------------------------------------
/source/images/icons/icon_1541.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="100px" height="77px" viewBox="0 0 100 77" enable-background="new 0 0 100 77" xml:space="preserve">
2 | <g>
3 | 	<path d="M84.23,73H17.968C8.91,73,1.54,65.63,1.54,56.571V20.429C1.54,11.37,8.91,4,17.968,4H84.23   c9.059,0,16.428,7.37,16.428,16.429v36.143C100.658,65.63,93.289,73,84.23,73z M17.968,13.857c-3.624,0-6.571,2.948-6.571,6.571   v36.143c0,3.624,2.948,6.571,6.571,6.571H84.23c3.623,0,6.571-2.947,6.571-6.571V20.429c0-3.624-2.948-6.571-6.571-6.571H17.968z"/>
4 | </g>
5 | <path d="M42.611,23.34c0-1.344,0.898-1.809,1.995-1.029l20.802,14.774c1.096,0.779,1.096,2.053,0,2.832L44.605,54.69  c-1.097,0.778-1.995,0.315-1.995-1.031V23.34z"/>
6 | </svg>


--------------------------------------------------------------------------------
/source/images/icons/icon_2835.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="100px" height="87.5px" viewBox="0 0 100 87.5" style="enable-background:new 0 0 100 87.5;" xml:space="preserve">
 2 | <path style="fill:#010101;" d="M12.5,6.25c0,3.455-2.795,6.25-6.25,6.25C2.795,12.5,0,9.705,0,6.25C0,2.795,2.795,0,6.25,0  C9.705,0,12.5,2.795,12.5,6.25z"/>
 3 | <path style="fill:#010101;" d="M37.5,81.25c0,3.455-2.795,6.25-6.25,6.25S25,84.705,25,81.25S27.795,75,31.25,75  S37.5,77.795,37.5,81.25z"/>
 4 | <path style="fill:#010101;" d="M37.5,31.25c0,3.455-2.795,6.25-6.25,6.25S25,34.705,25,31.25S27.795,25,31.25,25  S37.5,27.795,37.5,31.25z"/>
 5 | <path style="fill:#010101;" d="M62.5,56.25c0,3.455-2.795,6.25-6.25,6.25S50,59.705,50,56.25S52.795,50,56.25,50  S62.5,52.795,62.5,56.25z"/>
 6 | <rect x="25" style="fill:#010101;" width="75" height="12.5"/>
 7 | <rect x="50" y="25" style="fill:#010101;" width="50" height="12.5"/>
 8 | <rect x="50" y="75" style="fill:#010101;" width="50" height="12.5"/>
 9 | <rect x="75" y="50" style="fill:#010101;" width="25" height="12.5"/>
10 | </svg>


--------------------------------------------------------------------------------
/source/images/icons/icon_7231.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="96px" height="96px" viewBox="0 0 96 96" enable-background="new 0 0 96 96" xml:space="preserve">
 2 | <rect x="6" y="6" width="20" height="20"/>
 3 | <rect x="38" y="6" width="20" height="20"/>
 4 | <rect x="70" y="6" width="20" height="20"/>
 5 | <rect x="6" y="38" width="20" height="20"/>
 6 | <rect x="38" y="38" width="20" height="20"/>
 7 | <rect x="70" y="38" width="20" height="20"/>
 8 | <rect x="6" y="70" width="20" height="20"/>
 9 | <rect x="38" y="70" width="20" height="20"/>
10 | <rect x="70" y="70" width="20" height="20"/>
11 | </svg>


--------------------------------------------------------------------------------
/source/images/icons/icon_8541.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
2 | <g>
3 | 	<path fill="#000000" d="M50,0C22.43,0,0,22.43,0,50c0,27.571,22.43,50.001,50,50.001c27.571,0,50.001-22.431,50.001-50.001   C100.002,22.43,77.571,0,50,0z M50,91.479C27.13,91.479,8.523,72.871,8.523,50S27.13,8.523,50,8.523S91.479,27.13,91.479,50   S72.871,91.479,50,91.479z"/>
4 | 	<path fill="#000000" d="M65.287,22.556c-3.687-2.058-19.902,20.034-21.958,23.718c-2.058,3.686-12.298,29.114-8.613,31.171   s19.901-20.034,21.958-23.718C58.73,50.041,68.972,24.613,65.287,22.556z M53.451,51.928c-1.064,1.906-3.472,2.587-5.377,1.525   c-1.906-1.065-2.588-3.474-1.524-5.379c1.065-1.905,3.472-2.588,5.378-1.524C53.832,47.614,54.515,50.022,53.451,51.928z"/>
5 | </g>
6 | </svg>


--------------------------------------------------------------------------------
/source/images/shadow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/briangraves/ResponsiveEmailPatterns/99c12fd3bb2a74abf869cdc47408c18c8ec9db46/source/images/shadow.png


--------------------------------------------------------------------------------
/source/images/source.svg:
--------------------------------------------------------------------------------
 1 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 262 612 267.4" enable-background="new 0 262 612 267.4" xml:space="preserve" fill="#fff">
 2 | <path display="none" d="M423.5,159.2c-1.2-1.2-3.1-1.2-4.3,0L71,506.2c-1.2,1.2-1.2,3.1,0,4.3l117.5,117.5c0.6,0.6,1.2,0.6,1.8,0.6
 3 | 	s1.8,0,1.8-0.6l347.6-347.6c0.6-0.6,0.6-1.2,0.6-1.8s-0.6-1.8-0.6-1.8L423.5,159.2z"/>
 4 | <path display="none" d="M592.4,145.7l-38.6-38.6c-11-11-25.7-17.1-41.6-17.1c-15.9,0-30.6,6.1-41.6,17.1l-38.6,38.6
 5 | 	c-0.6,0.6-0.6,1.2-0.6,1.8c0,0.6,0.6,1.8,0.6,1.8l117.5,118.1c0.6,0.6,1.2,0.6,1.8,0.6c0.6,0,1.8-0.6,1.8-0.6l38.6-38.6
 6 | 	c11-11,17.1-25.7,17.1-41.6C610.2,171.4,604,156.7,592.4,145.7z"/>
 7 | <path display="none" d="M63.6,518.4c-0.6-0.6-1.8-1.2-3.1-0.6c-1.2,0-1.8,1.2-2.4,1.8L2.4,698.3c-0.6,1.2,0,2.4,0.6,3.1
 8 | 	s1.2,0.6,1.8,0.6s0.6,0,1.2,0l173.8-61.2c1.2-0.6,1.8-1.2,1.8-2.4s0-1.8-0.6-3.1L63.6,518.4z"/>
 9 | <path d="M14.1,421.1C5.5,415.6,0,404,0,393.6c0-9.8,4.3-19.6,15.3-24.5h-1.2c50.8-30,121.8-70.4,168.9-97.9v66.7
10 | 	c-18.4,11-43.5,22.6-107.1,56.9l0.6,0.6c33.7,15.3,72.2,37.9,105.9,58.1v67.3L14.1,421.1z"/>
11 | <path d="M597.9,370.9c8.6,5.5,14.1,17.1,14.1,27.5c0,10.4-4.3,19.6-15.3,24.5h0.6c-50.8,30-121.8,70.4-168.9,97.9v-66.7
12 | 	c18.4-11,43.5-22.6,107.1-56.9l-0.6-0.6c-33.7-15.3-72.2-37.9-105.9-58.1v-67.3L597.9,370.9z"/>
13 | <path d="M284,529.4h-42.8L327.4,262h43.5L284,529.4z"/>
14 | <text transform="matrix(1 0 0 1 -14204.5186 -7921.0801)" font-family="'ArialMT'" font-size="73.44">&lt;/&gt;</text>
15 | </svg>
16 | 


--------------------------------------------------------------------------------
/source/images/support.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/briangraves/ResponsiveEmailPatterns/99c12fd3bb2a74abf869cdc47408c18c8ec9db46/source/images/support.png


--------------------------------------------------------------------------------
/source/index.html.erb:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Responsive Email Patterns
 3 | desc: "A collection of patterns &amp; modules for responsive emails"
 4 | submit: true
 5 | ---
 6 | 
 7 | <ul>
 8 | <% data.categories.each do |category| %>
 9 | <li class="grid" id="<%= category.id %>">
10 | 	<h2><a href="#<%= category.id %>"><%= category.name %></a></h2>
11 | 	<ul>
12 | 		<% category.patterns.each do |pattern| %>
13 | 		<li><a href="patterns/<%= category.id %>/<%= pattern.id %>.html"><%= pattern.name %></a>
14 | 		<% end %>
15 | 	</ul>
16 | <% end %>
17 | </ul>


--------------------------------------------------------------------------------
/source/javascripts/all.js:
--------------------------------------------------------------------------------
 1 | 
 2 | (function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=self.Prism={util:{type:function(e){return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]},clone:function(e){var n=t.util.type(e);switch(n){case"Object":var r={};for(var i in e)e.hasOwnProperty(i)&&(r[i]=t.util.clone(e[i]));return r;case"Array":return e.slice()}return e}},languages:{extend:function(e,n){var r=t.util.clone(t.languages[e]);for(var i in n)r[i]=n[i];return r},insertBefore:function(e,n,r,i){i=i||t.languages;var s=i[e],o={};for(var u in s)if(s.hasOwnProperty(u)){if(u==n)for(var a in r)r.hasOwnProperty(a)&&(o[a]=r[a]);o[u]=s[u]}return i[e]=o},DFS:function(e,n){for(var r in e){n.call(e,r,e[r]);t.util.type(e)==="Object"&&t.languages.DFS(e[r],n)}}},highlightAll:function(e,n){var r=document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code');for(var i=0,s;s=r[i++];)t.highlightElement(s,e===!0,n)},highlightElement:function(r,i,s){var o,u,a=r;while(a&&!e.test(a.className))a=a.parentNode;if(a){o=(a.className.match(e)||[,""])[1];u=t.languages[o]}if(!u)return;r.className=r.className.replace(e,"").replace(/\s+/g," ")+" language-"+o;a=r.parentNode;/pre/i.test(a.nodeName)&&(a.className=a.className.replace(e,"").replace(/\s+/g," ")+" language-"+o);var f=r.textContent;if(!f)return;f=f.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ");var l={element:r,language:o,grammar:u,code:f};t.hooks.run("before-highlight",l);if(i&&self.Worker){var c=new Worker(t.filename);c.onmessage=function(e){l.highlightedCode=n.stringify(JSON.parse(e.data),o);t.hooks.run("before-insert",l);l.element.innerHTML=l.highlightedCode;s&&s.call(l.element);t.hooks.run("after-highlight",l)};c.postMessage(JSON.stringify({language:l.language,code:l.code}))}else{l.highlightedCode=t.highlight(l.code,l.grammar,l.language);t.hooks.run("before-insert",l);l.element.innerHTML=l.highlightedCode;s&&s.call(r);t.hooks.run("after-highlight",l)}},highlight:function(e,r,i){return n.stringify(t.tokenize(e,r),i)},tokenize:function(e,n,r){var i=t.Token,s=[e],o=n.rest;if(o){for(var u in o)n[u]=o[u];delete n.rest}e:for(var u in n){if(!n.hasOwnProperty(u)||!n[u])continue;var a=n[u],f=a.inside,l=!!a.lookbehind,c=0;a=a.pattern||a;for(var h=0;h<s.length;h++){var p=s[h];if(s.length>e.length)break e;if(p instanceof i)continue;a.lastIndex=0;var d=a.exec(p);if(d){l&&(c=d[1].length);var v=d.index-1+c,d=d[0].slice(c),m=d.length,g=v+m,y=p.slice(0,v+1),b=p.slice(g+1),w=[h,1];y&&w.push(y);var E=new i(u,f?t.tokenize(d,f):d);w.push(E);b&&w.push(b);Array.prototype.splice.apply(s,w)}}}return s},hooks:{all:{},add:function(e,n){var r=t.hooks.all;r[e]=r[e]||[];r[e].push(n)},run:function(e,n){var r=t.hooks.all[e];if(!r||!r.length)return;for(var i=0,s;s=r[i++];)s(n)}}},n=t.Token=function(e,t){this.type=e;this.content=t};n.stringify=function(e,r,i){if(typeof e=="string")return e;if(Object.prototype.toString.call(e)=="[object Array]")return e.map(function(t){return n.stringify(t,r,e)}).join("");var s={type:e.type,content:n.stringify(e.content,r,i),tag:"span",classes:["token",e.type],attributes:{},language:r,parent:i};s.type=="comment"&&(s.attributes.spellcheck="true");t.hooks.run("wrap",s);var o="";for(var u in s.attributes)o+=u+'="'+(s.attributes[u]||"")+'"';return"<"+s.tag+' class="'+s.classes.join(" ")+'" '+o+">"+s.content+"</"+s.tag+">"};if(!self.document){self.addEventListener("message",function(e){var n=JSON.parse(e.data),r=n.language,i=n.code;self.postMessage(JSON.stringify(t.tokenize(i,t.languages[r])));self.close()},!1);return}var r=document.getElementsByTagName("script");r=r[r.length-1];if(r){t.filename=r.src;document.addEventListener&&!r.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)}})();;
 3 | Prism.languages.markup={comment:/&lt;!--[\w\W]*?-->/g,prolog:/&lt;\?.+?\?>/,doctype:/&lt;!DOCTYPE.+?>/,cdata:/&lt;!\[CDATA\[[\w\W]*?]]>/i,tag:{pattern:/&lt;\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|\w+))?\s*)*\/?>/gi,inside:{tag:{pattern:/^&lt;\/?[\w:-]+/i,inside:{punctuation:/^&lt;\/?/,namespace:/^[\w-]+?:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/gi,inside:{punctuation:/=|>|"/g}},punctuation:/\/?>/g,"attr-name":{pattern:/[\w:-]+/g,inside:{namespace:/^[\w-]+?:/}}}},entity:/&amp;#?[\da-z]{1,8};/gi};Prism.hooks.add("wrap",function(e){e.type==="entity"&&(e.attributes.title=e.content.replace(/&amp;/,"&"))});;
 4 | Prism.languages.css={comment:/\/\*[\w\W]*?\*\//g,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*{))/gi,inside:{punctuation:/[;:]/g}},url:/url\((["']?).*?\1\)/gi,selector:/[^\{\}\s][^\{\};]*(?=\s*\{)/g,property:/(\b|\B)[\w-]+(?=\s*:)/ig,string:/("|')(\\?.)*?\1/g,important:/\B!important\b/gi,ignore:/&(lt|gt|amp);/gi,punctuation:/[\{\};:]/g};Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{style:{pattern:/(&lt;|<)style[\w\W]*?(>|&gt;)[\w\W]*?(&lt;|<)\/style(>|&gt;)/ig,inside:{tag:{pattern:/(&lt;|<)style[\w\W]*?(>|&gt;)|(&lt;|<)\/style(>|&gt;)/ig,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.css}}});;
 5 | Prism.languages.clike={comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|(^|[^:])\/\/.*?(\r?\n|$))/g,lookbehind:!0},string:/("|')(\\?.)*?\1/g,"class-name":{pattern:/((?:(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/ig,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/g,"boolean":/\b(true|false)\b/g,"function":{pattern:/[a-z0-9_]+\(/ig,inside:{punctuation:/\(/}}, number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/g,operator:/[-+]{1,2}|!|&lt;=?|>=?|={1,3}|(&amp;){1,2}|\|?\||\?|\*|\/|\~|\^|\%/g,ignore:/&(lt|gt|amp);/gi,punctuation:/[{}[\];(),.:]/g};
 6 | ;
 7 | Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(var|let|if|else|while|do|for|return|in|instanceof|function|get|set|new|with|typeof|try|throw|catch|finally|null|break|continue)\b/g,number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?|NaN|-?Infinity)\b/g});Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/g,lookbehind:!0}});Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/(&lt;|<)script[\w\W]*?(>|&gt;)[\w\W]*?(&lt;|<)\/script(>|&gt;)/ig,inside:{tag:{pattern:/(&lt;|<)script[\w\W]*?(>|&gt;)|(&lt;|<)\/script(>|&gt;)/ig,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.javascript}}});;
 8 | 
 9 | 
10 | $(document).ready(function(){
11 |     var Str = $('code.language-markup').text();
12 |     var trimStr = $.trim(Str);
13 |     $('code.language-markup').text(trimStr);
14 | 
15 | 	$('#context').click(function(e) {
16 | 		e.preventDefault();
17 | 		$(this).toggleClass('active');
18 | 		$('.pattern-header, .pattern-footer').toggleClass('active');
19 | 	});
20 | 
21 | 	$('#source').click(function(e) {
22 | 		e.preventDefault();
23 | 		$('#patternSource').slideToggle();
24 | 	});
25 | });


--------------------------------------------------------------------------------
/source/javascripts/init.js:
--------------------------------------------------------------------------------
1 | Modernizr.load([
2 | 	{
3 | 		test : Modernizr.mq('only all'),
4 | 		nope : 'http://cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js'
5 | 	}
6 | ]);


--------------------------------------------------------------------------------
/source/javascripts/plugins/modernizr.js:
--------------------------------------------------------------------------------
1 | /* Modernizr 2.6.2 (Custom Build) | MIT & BSD
2 |  * Build: http://modernizr.com/download/#-shiv-mq-cssclasses-teststyles-load
3 |  */
4 | ;window.Modernizr=function(a,b,c){function w(a){j.cssText=a}function x(a,b){return w(prefixes.join(a+";")+(b||""))}function y(a,b){return typeof a===b}function z(a,b){return!!~(""+a).indexOf(b)}function A(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:y(f,"function")?f.bind(d||b):f}return!1}var d="2.6.2",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m={},n={},o={},p=[],q=p.slice,r,s=function(a,c,d,e){var f,i,j,k,l=b.createElement("div"),m=b.body,n=m||b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),l.appendChild(j);return f=["&#173;",'<style id="s',h,'">',a,"</style>"].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i},t=function(b){var c=a.matchMedia||a.msMatchMedia;if(c)return c(b).matches;var d;return s("@media "+b+" { #"+h+" { position: absolute; } }",function(b){d=(a.getComputedStyle?getComputedStyle(b,null):b.currentStyle)["position"]=="absolute"}),d},u={}.hasOwnProperty,v;!y(u,"undefined")&&!y(u.call,"undefined")?v=function(a,b){return u.call(a,b)}:v=function(a,b){return b in a&&y(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=q.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(q.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(q.call(arguments)))};return e});for(var B in m)v(m,B)&&(r=B.toLowerCase(),e[r]=m[B](),p.push((e[r]?"":"no-")+r));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)v(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},w(""),i=k=null,function(a,b){function k(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e<g;e++)d.createElement(f[e]);return d}function p(a,b){b.cache||(b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag()),a.createElement=function(c){return r.shivMethods?n(c,a,b):b.createElem(c)},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+l().join().replace(/\w+/g,function(a){return b.createElem(a),b.frag.createElement(a),'c("'+a+'")'})+");return n}")(r,b.frag)}function q(a){a||(a=b);var c=m(a);return r.shivCSS&&!f&&!c.hasCSS&&(c.hasCSS=!!k(a,"article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}mark{background:#FF0;color:#000}")),j||p(a,c),a}var c=a.html5||{},d=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,e=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,f,g="_html5shiv",h=0,i={},j;(function(){try{var a=b.createElement("a");a.innerHTML="<xyz></xyz>",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,e.mq=t,e.testStyles=s,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+p.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f<d;f++)g=a[f].split("="),(e=z[g.shift()])&&(c=e(c,g));for(f=0;f<b;f++)c=x[f](c);return c}function g(a,e,f,g,h){var i=b(a),j=i.autoCallback;i.url.split(".").pop().split("?").shift(),i.bypass||(e&&(e=d(e)?e:e[a]||e[g]||e[a.split("/").pop().split("?")[0]]),i.instead?i.instead(a,e,f,g,h):(y[i.url]?i.noexec=!0:y[i.url]=1,f.load(i.url,i.forceCSS||!i.forceJS&&"css"==i.url.split(".").pop().split("?").shift()?"c":c,i.noexec,i.attrs,i.timeout),(d(e)||d(j))&&f.load(function(){k(),e&&e(i.origUrl,h,g),j&&j(i.origUrl,h,g),y[i.url]=2})))}function h(a,b){function c(a,c){if(a){if(e(a))c||(j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}),g(a,j,b,0,h);else if(Object(a)===a)for(n in m=function(){var b=0,c;for(c in a)a.hasOwnProperty(c)&&b++;return b}(),a)a.hasOwnProperty(n)&&(!c&&!--m&&(d(j)?j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}:j[n]=function(a){return function(){var b=[].slice.call(arguments);a&&a.apply(this,b),l()}}(k[n])),g(a[n],j,b,n,h))}else!c&&l()}var h=!!a.test,i=a.load||a.both,j=a.callback||f,k=j,l=a.complete||f,m,n;c(h?a.yep:a.nope,!!i),i&&c(i)}var i,j,l=this.yepnope.loader;if(e(a))g(a,0,l,0);else if(w(a))for(i=0;i<a.length;i++)j=a[i],e(j)?g(j,0,l,0):w(j)?B(j):Object(j)===j&&h(j,l);else Object(a)===a&&h(a,l)},B.addPrefix=function(a,b){z[a]=b},B.addFilter=function(a){x.push(a)},B.errorTimeout=1e4,null==b.readyState&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",A=function(){b.removeEventListener("DOMContentLoaded",A,0),b.readyState="complete"},0)),a.yepnope=k(),a.yepnope.executeStack=h,a.yepnope.injectJs=function(a,c,d,e,i,j){var k=b.createElement("script"),l,o,e=e||B.errorTimeout;k.src=a;for(o in d)k.setAttribute(o,d[o]);c=j?h:c||f,k.onreadystatechange=k.onload=function(){!l&&g(k.readyState)&&(l=1,c(),k.onload=k.onreadystatechange=null)},m(function(){l||(l=1,c(1))},e),i?k.onload():n.parentNode.insertBefore(k,n)},a.yepnope.injectCss=function(a,c,d,e,g,i){var e=b.createElement("link"),j,c=i?h:c||f;e.href=a,e.rel="stylesheet",e.type="text/css";for(j in d)e.setAttribute(j,d[j]);g||(n.parentNode.insertBefore(e,n),m(c,0))}}(this,document),Modernizr.load=function(){yepnope.apply(window,[].slice.call(arguments,0))};


--------------------------------------------------------------------------------
/source/javascripts/plugins/prism.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Prism: Lightweight, robust, elegant syntax highlighting
 3 |  * MIT license http://www.opensource.org/licenses/mit-license.php/
 4 |  * @author Lea Verou http://lea.verou.me
 5 |  */(function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=self.Prism={util:{type:function(e){return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]},clone:function(e){var n=t.util.type(e);switch(n){case"Object":var r={};for(var i in e)e.hasOwnProperty(i)&&(r[i]=t.util.clone(e[i]));return r;case"Array":return e.slice()}return e}},languages:{extend:function(e,n){var r=t.util.clone(t.languages[e]);for(var i in n)r[i]=n[i];return r},insertBefore:function(e,n,r,i){i=i||t.languages;var s=i[e],o={};for(var u in s)if(s.hasOwnProperty(u)){if(u==n)for(var a in r)r.hasOwnProperty(a)&&(o[a]=r[a]);o[u]=s[u]}return i[e]=o},DFS:function(e,n){for(var r in e){n.call(e,r,e[r]);t.util.type(e)==="Object"&&t.languages.DFS(e[r],n)}}},highlightAll:function(e,n){var r=document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code');for(var i=0,s;s=r[i++];)t.highlightElement(s,e===!0,n)},highlightElement:function(r,i,s){var o,u,a=r;while(a&&!e.test(a.className))a=a.parentNode;if(a){o=(a.className.match(e)||[,""])[1];u=t.languages[o]}if(!u)return;r.className=r.className.replace(e,"").replace(/\s+/g," ")+" language-"+o;a=r.parentNode;/pre/i.test(a.nodeName)&&(a.className=a.className.replace(e,"").replace(/\s+/g," ")+" language-"+o);var f=r.textContent;if(!f)return;f=f.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ");var l={element:r,language:o,grammar:u,code:f};t.hooks.run("before-highlight",l);if(i&&self.Worker){var c=new Worker(t.filename);c.onmessage=function(e){l.highlightedCode=n.stringify(JSON.parse(e.data),o);t.hooks.run("before-insert",l);l.element.innerHTML=l.highlightedCode;s&&s.call(l.element);t.hooks.run("after-highlight",l)};c.postMessage(JSON.stringify({language:l.language,code:l.code}))}else{l.highlightedCode=t.highlight(l.code,l.grammar,l.language);t.hooks.run("before-insert",l);l.element.innerHTML=l.highlightedCode;s&&s.call(r);t.hooks.run("after-highlight",l)}},highlight:function(e,r,i){return n.stringify(t.tokenize(e,r),i)},tokenize:function(e,n,r){var i=t.Token,s=[e],o=n.rest;if(o){for(var u in o)n[u]=o[u];delete n.rest}e:for(var u in n){if(!n.hasOwnProperty(u)||!n[u])continue;var a=n[u],f=a.inside,l=!!a.lookbehind,c=0;a=a.pattern||a;for(var h=0;h<s.length;h++){var p=s[h];if(s.length>e.length)break e;if(p instanceof i)continue;a.lastIndex=0;var d=a.exec(p);if(d){l&&(c=d[1].length);var v=d.index-1+c,d=d[0].slice(c),m=d.length,g=v+m,y=p.slice(0,v+1),b=p.slice(g+1),w=[h,1];y&&w.push(y);var E=new i(u,f?t.tokenize(d,f):d);w.push(E);b&&w.push(b);Array.prototype.splice.apply(s,w)}}}return s},hooks:{all:{},add:function(e,n){var r=t.hooks.all;r[e]=r[e]||[];r[e].push(n)},run:function(e,n){var r=t.hooks.all[e];if(!r||!r.length)return;for(var i=0,s;s=r[i++];)s(n)}}},n=t.Token=function(e,t){this.type=e;this.content=t};n.stringify=function(e,r,i){if(typeof e=="string")return e;if(Object.prototype.toString.call(e)=="[object Array]")return e.map(function(t){return n.stringify(t,r,e)}).join("");var s={type:e.type,content:n.stringify(e.content,r,i),tag:"span",classes:["token",e.type],attributes:{},language:r,parent:i};s.type=="comment"&&(s.attributes.spellcheck="true");t.hooks.run("wrap",s);var o="";for(var u in s.attributes)o+=u+'="'+(s.attributes[u]||"")+'"';return"<"+s.tag+' class="'+s.classes.join(" ")+'" '+o+">"+s.content+"</"+s.tag+">"};if(!self.document){self.addEventListener("message",function(e){var n=JSON.parse(e.data),r=n.language,i=n.code;self.postMessage(JSON.stringify(t.tokenize(i,t.languages[r])));self.close()},!1);return}var r=document.getElementsByTagName("script");r=r[r.length-1];if(r){t.filename=r.src;document.addEventListener&&!r.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)}})();;
 6 | Prism.languages.markup={comment:/&lt;!--[\w\W]*?-->/g,prolog:/&lt;\?.+?\?>/,doctype:/&lt;!DOCTYPE.+?>/,cdata:/&lt;!\[CDATA\[[\w\W]*?]]>/i,tag:{pattern:/&lt;\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|\w+))?\s*)*\/?>/gi,inside:{tag:{pattern:/^&lt;\/?[\w:-]+/i,inside:{punctuation:/^&lt;\/?/,namespace:/^[\w-]+?:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/gi,inside:{punctuation:/=|>|"/g}},punctuation:/\/?>/g,"attr-name":{pattern:/[\w:-]+/g,inside:{namespace:/^[\w-]+?:/}}}},entity:/&amp;#?[\da-z]{1,8};/gi};Prism.hooks.add("wrap",function(e){e.type==="entity"&&(e.attributes.title=e.content.replace(/&amp;/,"&"))});;
 7 | Prism.languages.css={comment:/\/\*[\w\W]*?\*\//g,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*{))/gi,inside:{punctuation:/[;:]/g}},url:/url\((["']?).*?\1\)/gi,selector:/[^\{\}\s][^\{\};]*(?=\s*\{)/g,property:/(\b|\B)[\w-]+(?=\s*:)/ig,string:/("|')(\\?.)*?\1/g,important:/\B!important\b/gi,ignore:/&(lt|gt|amp);/gi,punctuation:/[\{\};:]/g};Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{style:{pattern:/(&lt;|<)style[\w\W]*?(>|&gt;)[\w\W]*?(&lt;|<)\/style(>|&gt;)/ig,inside:{tag:{pattern:/(&lt;|<)style[\w\W]*?(>|&gt;)|(&lt;|<)\/style(>|&gt;)/ig,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.css}}});;
 8 | Prism.languages.clike={comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|(^|[^:])\/\/.*?(\r?\n|$))/g,lookbehind:!0},string:/("|')(\\?.)*?\1/g,"class-name":{pattern:/((?:(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/ig,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/g,"boolean":/\b(true|false)\b/g,"function":{pattern:/[a-z0-9_]+\(/ig,inside:{punctuation:/\(/}}, number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/g,operator:/[-+]{1,2}|!|&lt;=?|>=?|={1,3}|(&amp;){1,2}|\|?\||\?|\*|\/|\~|\^|\%/g,ignore:/&(lt|gt|amp);/gi,punctuation:/[{}[\];(),.:]/g};
 9 | ;
10 | Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(var|let|if|else|while|do|for|return|in|instanceof|function|get|set|new|with|typeof|try|throw|catch|finally|null|break|continue)\b/g,number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?|NaN|-?Infinity)\b/g});Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/g,lookbehind:!0}});Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/(&lt;|<)script[\w\W]*?(>|&gt;)[\w\W]*?(&lt;|<)\/script(>|&gt;)/ig,inside:{tag:{pattern:/(&lt;|<)script[\w\W]*?(>|&gt;)|(&lt;|<)\/script(>|&gt;)/ig,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.javascript}}});;
11 | 


--------------------------------------------------------------------------------
/source/layouts/interior.erb:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
 3 | <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
 4 | <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
 5 | <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
 6 |     <head>
 7 |         <meta charset="utf-8">
 8 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 9 |         <meta name="description" content="">
10 |         <meta name="viewport" content="width=device-width">
11 |         <title><%= data.page.title || "Responsive Email Patterns" %></title>
12 |         <link rel="icon" type="icon" href="http://responsiveemailpatterns.com/images/favicon.png">
13 |         <%= stylesheet_link_tag "all" %>
14 |         <%= javascript_include_tag  "plugins/modernizr","init" %>
15 |     </head>
16 |     <body class="<%= page_classes %>">
17 |         
18 |         <%= partial "partials/header" %>
19 |         
20 |         <section class="main">
21 |             <div class="wrap">
22 |                 <%= yield %>
23 |             </div>
24 |         </section>
25 | 
26 |         <%= partial "partials/footer" %>
27 | 
28 |         <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
29 |         <%= javascript_include_tag  "all" %>
30 |     </body>
31 | </html>
32 | 


--------------------------------------------------------------------------------
/source/layouts/layout.erb:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
 3 | <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
 4 | <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
 5 | <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
 6 |     <head>
 7 |         <meta charset="utf-8">
 8 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 9 |         <meta name="description" content="">
10 |         <meta name="viewport" content="width=device-width">
11 |         <title><%= data.page.title || "Responsive Email Patterns" %></title>
12 |         <link rel="icon" type="icon" href="http://responsiveemailpatterns.com/images/favicon.png">
13 |         <%= stylesheet_link_tag "all" %>
14 |         <%= javascript_include_tag  "plugins/modernizr","init" %>
15 |     </head>
16 |     <body class="<%= page_classes %>">
17 |         
18 |         <%= partial "partials/header-home" %>
19 | 
20 |         <section class="main">
21 |             <div class="wrap">
22 |                 <%= yield %>
23 |             </div>
24 |         </section>
25 | 
26 |         <%= partial "partials/footer" %>
27 | 
28 |         <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
29 |         <%= javascript_include_tag  "all" %>
30 |     </body>
31 | </html>
32 | 


--------------------------------------------------------------------------------
/source/layouts/pattern.erb:
--------------------------------------------------------------------------------
 1 | <% wrap_layout :interior do %>
 2 |     <section class="pattern-wrap">
 3 | 		<div class="pattern-header <% if current_page.data.type == "navigation" %>type-navigation<% end %>">
 4 | 			<div class="pattern-logo">
 5 | 				<a href="#"><img src="http://placehold.it/156x46&text=Logo" alt="" style="display: block; border: 0;" /></a>
 6 | 			</div>
 7 | 			<div class="pattern-nav">
 8 | 				<% 5.times do %>
 9 | 				<a href="#">Navigation Item</a>
10 | 				<% end %>
11 | 			</div>
12 | 		</div>
13 |         
14 | 
15 |         <% content_for :source do %>
16 |         <%= yield %>
17 |         <% end %>
18 | 
19 |         <%= yield_content :source %>
20 | 
21 |         <div class="pattern-footer">
22 |         	<p>
23 |         		This email was sent by: Your Company Here<br />
24 |         		4822 West 62nd Street Mission, KS 66205<br /><br />
25 |         		<a href="#" style="color: #999;">Preferences</a> | <a href="#" style="color: #999;">Unsubscribe</a>
26 |         	</p>
27 | 		</div>
28 |     </section>
29 | 
30 |     <section class="pattern-desc">
31 |     	<h1><%= current_page.data.pattern_name %></h1>
32 |     	<p><%= current_page.data.pattern_desc %></p>
33 |     </section>
34 | 
35 |     <section id="patternSource" class="pattern-source">
36 |         <pre class="language-markup">
37 |             <code class="language-markup">
38 |                 <%= escape_html(yield_content :source) %>
39 |             </code>
40 |         </pre>
41 |     </section>
42 | <% end %>
43 | 


--------------------------------------------------------------------------------
/source/partials/footer.html.erb:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Footer
 3 | ---
 4 | 
 5 | <footer class="footer">
 6 | 	<nav>
 7 | 		<ul>
 8 | 			<li><a class="brand" href="http://www.responsiveemailpatterns.com">Responsive Email Patterns</a></li>
 9 | 			<li><a href="http://www.responsiveemailresources.com">Responsive Email Resources</a></li>
10 | 			<li><a href="http://www.responsiveemailpatterns.com/support.html">Pattern Support</a></li>
11 | 			<li><a href="https://github.com/briangraves/ResponsiveEmailPatterns">Fork on Github</a></li>
12 | 			<li><a href="http://www.twitter.com/briangraves">@BrianGraves</a></li>
13 | 		</ul>
14 | 	</nav>
15 | </footer>


--------------------------------------------------------------------------------
/source/partials/header-home.html.erb:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Header Home
 3 | ---
 4 | 
 5 | <header class="header home">
 6 | 	<a href="http://www.responsiveemailpatterns.com">
 7 | 		<img class="logo" src="images/envelope.svg" alt="" width="90" />
 8 | 	</a>
 9 | 	<h1><%= data.page.title || "Responsive Email Patterns" %></h1>
10 | 	<p><%= data.page.desc %></p>
11 | 
12 | 	<% if data.page.submit == true %>
13 | 		<a class="button" href="submit-pattern.html">Submit A Pattern</a>
14 | 	<% end %>
15 | </header>


--------------------------------------------------------------------------------
/source/partials/header.html.erb:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Interior Header
 3 | ---
 4 | 
 5 | <header class="header interior">
 6 | 	<div class="wrap">
 7 | 		<a class="logo" href="http://www.responsiveemailpatterns.com">
 8 | 			<img src="http://briangraves.github.io/ResponsiveEmailPatterns/images/envelope.svg" alt="" width="20" />
 9 | 			<h1>Responsive Patterns</h1>
10 | 		</a>
11 | 
12 | 		<% if data.page.layout == "pattern" %>
13 | 			<!--<a id="source" href="#patternSource" class="button source">
14 | 				<img src="../../images/source.svg" alt="" width="32" />
15 | 				<h1>Source</h1>
16 | 			</a>-->
17 | 			<a id="context" href="#" class="button context">
18 | 				<img src="../../images/context.svg" alt="" width="20" />
19 | 				<h1>Context</h1>
20 | 			</a>
21 | 		<% end %>
22 | 
23 | 	</div>
24 | </header>


--------------------------------------------------------------------------------
/source/patterns/accordions/full-to-accordion.html.erb:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Responsive Email Patterns
 3 | layout: pattern
 4 | pattern_name: "Full To Accordion"
 5 | pattern_desc: "A container is used to truncate description text based on screen size. Once text has been truncated, a cta is used to allow for the truncated content to be viewed on request in accordion like approach."
 6 | ---
 7 | 
 8 | <style>
 9 | 	/* Full to Accordion Pattern CSS */
10 | 	@media only screen and (max-width: 450px) {
11 | 	    table[class="pattern"] .story p {
12 | 	        max-height: 0;
13 |             overflow: hidden;
14 |             margin: 0;
15 | 	    }
16 |         table[class="pattern"] .story h1 a { display: block; position: relative; }
17 |         table[class="pattern"] .story h1 a:after {
18 |             content: '+';
19 |             position: absolute;
20 |             top: 0;
21 |             right: 0;
22 |             display: block;
23 |         }
24 |         table[class="pattern"] #story1:target p,
25 |         table[class="pattern"] #story2:target p,
26 |         table[class="pattern"] #story3:target p {
27 |             max-height: 999px;
28 |             margin: 16px 0;
29 |             -webkit-transition: max-height 0.5s ease-out;
30 |             -moz-transition: max-height 0.5s ease-out;
31 |             -ms-transition: max-height 0.5s ease-out;
32 |             -o-transition: max-height 0.5s ease-out;
33 |             transition: max-height 0.5s ease-out;
34 |         }
35 | 	}
36 | </style>
37 | 
38 | <table cellpadding="0" cellspacing="0" class="pattern">
39 |     <tr>
40 |         <td class="story" id="story1" width="600" align="left" valign="top" style="border-bottom: 1px dotted #999; font-family: arial,sans-serif; font-size: 14px; color: #333; padding: 0 0 16px 0;">
41 |         	<h1 style="margin: 0;"><a href="#story1" style="text-decoration: none; color: #333">Story 1</a></h1>
42 |             <p>
43 |                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.
44 |             </p>
45 |             <a class="readmore" href="#story1" style="display: none; width: 0; max-height: 0; max-width: 0; height: 0; overflow: hidden; float: left; font-size: 0; color: #fff;">Read More</a>
46 |         </td>
47 |     </tr>
48 |     <tr>
49 |         <td class="story" id="story2" width="600" align="left" valign="top" style="border-bottom: 1px dotted #999; font-family: arial,sans-serif; font-size: 14px; color: #333; padding: 16px 0;">
50 |             <h1 style="margin: 0;"><a href="#story2" style="text-decoration: none; color: #333">Story 2</a></h1>
51 |             <p>
52 |                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.
53 |             </p>
54 |             <a class="readmore" href="#story2" style="display: none; width: 0; max-height: 0; max-width: 0; height: 0; overflow: hidden; float: left; font-size: 0; color: #fff;">Read More</a>
55 |         </td>
56 |     </tr>
57 |     <tr>
58 |         <td class="story" id="story3" width="600" align="left" valign="top" style="font-family: arial,sans-serif; font-size: 14px; color: #333; padding: 16px 0 0 0;">
59 |             <h1 style="margin: 0;"><a href="#story3" style="text-decoration: none; color: #333">Story 3</a></h1>
60 |             <p>
61 |                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.
62 |             </p>
63 |             <a class="readmore" href="#story3" style="display: none; width: 0; max-height: 0; max-width: 0; height: 0; overflow: hidden; float: left; font-size: 0; color: #fff;">Read More</a>
64 |         </td>
65 |     </tr>
66 | </table>


--------------------------------------------------------------------------------
/source/patterns/accordions/show-more.html.erb:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Responsive Email Patterns
 3 | layout: pattern
 4 | pattern_name: "Show More"
 5 | pattern_desc: "A container is used to truncate text based on screen size. Once text has been truncated, a cta is used to allow for the truncated content to be viewed on request."
 6 | ---
 7 | 
 8 | <style>
 9 | 	/* Show More Pattern CSS */
10 | 	@media only screen and (max-width: 599px) {
11 | 	    table[class="pattern"] .story p {
12 | 	        max-height: 98px;
13 |             margin-bottom: 14px;
14 |             overflow: hidden;
15 | 
16 | 	    }
17 |         table[class="pattern"] #story1:target p,
18 |         table[class="pattern"] #story2:target p,
19 |         table[class="pattern"] #story3:target p {
20 |             max-height: 999px;
21 |         }
22 |         table[class="pattern"] .readmore {
23 |             position: relative;
24 |             display: inline-block !important;
25 |             width: auto !important;
26 |             height: auto !important;
27 |             max-width: inherit !important;
28 |             max-height: inherit !important;
29 |             overflow: visible !important;
30 |             float: none !important;
31 |             font-size: 12px !important;
32 |             font-weight: bold;
33 |             color: #999 !important;
34 |             text-decoration: none;
35 |             text-transform: uppercase;
36 |         }
37 |         table[class="pattern"] .readmore:after {
38 |             content: '';
39 |             position: absolute;
40 |             top: 3px;
41 |             right: -20px;
42 |             display: block;
43 |             border-left: 6px solid transparent;
44 |             border-right: 6px solid transparent;
45 |             border-top: 6px solid #999;
46 |         }
47 | 	}
48 |     @media only screen and (max-width: 500px) {
49 |         table[class="pattern"] .story p {
50 |             max-height: 80px;
51 |         }
52 |     }
53 |     @media only screen and (max-width: 400px) {
54 |         table[class="pattern"] .story p {
55 |             max-height: 50px;
56 |         }
57 |     }
58 | </style>
59 | 
60 | <table cellpadding="0" cellspacing="0" class="pattern">
61 |     <tr>
62 |         <td class="story" id="story1" width="600" align="left" valign="top" style="border-bottom: 1px dotted #999; font-family: arial,sans-serif; font-size: 14px; color: #333; padding: 0 0 16px 0;">
63 |         	<h1 style="margin: 0;">Story 1</h1>
64 |             <p>
65 |                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.
66 |             </p>
67 |             <a class="readmore" href="#story1" style="display: none; width: 0; max-height: 0; max-width: 0; height: 0; overflow: hidden; float: left; font-size: 0; color: #fff;">Read More</a>
68 |         </td>
69 |     </tr>
70 |     <tr>
71 |         <td class="story" id="story2" width="600" align="left" valign="top" style="border-bottom: 1px dotted #999; font-family: arial,sans-serif; font-size: 14px; color: #333; padding: 16px 0;">
72 |             <h1 style="margin: 0;">Story 2</h1>
73 |             <p>
74 |                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.
75 |             </p>
76 |             <a class="readmore" href="#story2" style="display: none; width: 0; max-height: 0; max-width: 0; height: 0; overflow: hidden; float: left; font-size: 0; color: #fff;">Read More</a>
77 |         </td>
78 |     </tr>
79 |     <tr>
80 |         <td class="story" id="story3" width="600" align="left" valign="top" style="font-family: arial,sans-serif; font-size: 14px; color: #333; padding: 16px 0 0 0;">
81 |             <h1 style="margin: 0;">Story 3</h1>
82 |             <p>
83 |                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.
84 |             </p>
85 |             <a class="readmore" href="#story3" style="display: none; width: 0; max-height: 0; max-width: 0; height: 0; overflow: hidden; float: left; font-size: 0; color: #fff;">Read More</a>
86 |         </td>
87 |     </tr>
88 | </table>


--------------------------------------------------------------------------------
/source/patterns/grid-blocks/double-wide-v1.html.erb:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Responsive Email Patterns
  3 | layout: pattern
  4 | pattern_name: "Double Wide v1"
  5 | pattern_desc: "A grid block that reflows as appropriate as the screen size shrinks."
  6 | ---
  7 | 
  8 | <style>
  9 | 	/* Double Wide v1 Pattern CSS */
 10 | 	@media only screen and (max-width: 599px) {
 11 |         td[class="grid-block"] table { width: 100%; }
 12 |         td[class="grid-block"] .spacer { display: none; }
 13 |         td[class="grid-block"] .row { padding: 0 !important; }
 14 |         td[class="grid-block"] .section {
 15 |             display: block;
 16 |             float: left;
 17 |             height: auto;
 18 |             padding: 60px 20px;
 19 |             margin-bottom: 8px;
 20 |             -moz-box-sizing: border-box;
 21 |             -webkit-box-sizing: border-box;
 22 |             box-sizing: border-box;
 23 |         }
 24 |         td[class="grid-block"] .four .section {
 25 |             width: 49%;
 26 |         }
 27 |         td[class="grid-block"] .four .section:nth-child(4n+1) { margin-right: 2%; }
 28 |         td[class="grid-block"] .two .section {
 29 |             width: 100%;
 30 |         }
 31 | 	}
 32 |     @media only screen and (max-width: 400px) {
 33 |         td[class="grid-block"] .four .section {
 34 |             width: 100%;
 35 |         }
 36 |         td[class="grid-block"] .four .section:nth-child(4n+1) { margin-right: 0; }
 37 |     }
 38 | </style>
 39 | 
 40 | <table cellpadding="0" cellspacing="0">
 41 |     <tr>
 42 |         <td class="grid-block" width="600" style="padding-bottom: 8px;">
 43 |             <table cellpadding="0" cellspacing="0">
 44 |                 <tr>
 45 |                     <td class="row four">
 46 |                         <table cellpadding="0" cellspacing="0">
 47 |                             <td class="section" width="144" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
 48 |                                 1
 49 |                             </td>
 50 |                             <td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td>
 51 |                             <td class="section" width="144" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
 52 |                                 2
 53 |                             </td>
 54 |                             <td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td>
 55 |                             <td class="section" width="144" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
 56 |                                 3
 57 |                             </td>
 58 |                             <td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td>
 59 |                             <td class="section" width="144" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
 60 |                                 4
 61 |                             </td>
 62 |                         </table>
 63 |                     </td>
 64 |                 </tr>
 65 |                 <tr>
 66 |                     <td class="row two" style="padding-top: 8px;">
 67 |                         <table cellpadding="0" cellspacing="0">
 68 |                             <tr>
 69 |                                 <td class="section" width="296" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
 70 |                                     5
 71 |                                 </td>
 72 |                                 <td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td>
 73 |                                 <td class="section" width="296" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
 74 |                                     6
 75 |                                 </td>
 76 |                             </tr>
 77 |                         </table>
 78 |                     </td>
 79 |                 </tr>
 80 |                 <tr>
 81 |                     <td class="row four" style="padding-top: 8px;">
 82 |                         <table cellpadding="0" cellspacing="0">
 83 |                             <tr>
 84 |                                 <td class="section" width="144" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
 85 |                                     7
 86 |                                 </td>
 87 |                                 <td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td>
 88 |                                 <td class="section" width="144" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
 89 |                                     8
 90 |                                 </td>
 91 |                                 <td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td>
 92 |                                 <td class="section" width="144" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
 93 |                                     9
 94 |                                 </td>
 95 |                                 <td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td>
 96 |                                 <td class="section" width="144" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
 97 |                                     10
 98 |                                 </td>
 99 |                             </tr>
100 |                         </table>
101 |                     </td>
102 |                 </tr>
103 |                 <tr>
104 |                     <td class="row two" style="padding-top: 8px;">
105 |                         <table cellpadding="0" cellspacing="0">
106 |                             <tr>
107 |                                 <td class="section" width="296" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
108 |                                     11
109 |                                 </td>
110 |                                 <td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td>
111 |                                 <td class="section" width="296" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
112 |                                     12
113 |                                 </td>
114 |                             </tr>
115 |                         </table>
116 |                     </td>
117 |                 </tr>
118 |             </table>
119 |         </td>
120 |     </tr>
121 | </table>


--------------------------------------------------------------------------------
/source/patterns/grid-blocks/double-wide-v2.html.erb:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Responsive Email Patterns
  3 | layout: pattern
  4 | pattern_name: "Double Wide v2"
  5 | pattern_desc: "A grid block that reflows as appropriate as the screen size shrinks."
  6 | ---
  7 | 
  8 | <style>
  9 | 	/* Double Wide v2 Pattern CSS */
 10 | 	@media only screen and (max-width: 599px) {
 11 |         td[class="grid-block"] table { width: 100%; }
 12 |         td[class="grid-block"] .spacer { display: none; }
 13 |         td[class="grid-block"] .row { padding: 0 !important; }
 14 |         td[class="grid-block"] .section {
 15 |             display: block;
 16 |             float: left;
 17 |             height: auto;
 18 |             padding: 60px 20px;
 19 |             margin-bottom: 8px;
 20 |             -moz-box-sizing: border-box;
 21 |             -webkit-box-sizing: border-box;
 22 |             box-sizing: border-box;
 23 |         }
 24 |         td[class="grid-block"] .section.half {
 25 |             width: 49%;
 26 |         }
 27 |         td[class="grid-block"] .section.half:first-child { margin-right: 2%; }
 28 |         td[class="grid-block"] .section.full {
 29 |             width: 100%;
 30 |         }
 31 | 	}
 32 |     @media only screen and (max-width: 400px) {
 33 |         td[class="grid-block"] .section.half {
 34 |             width: 100%;
 35 |         }
 36 |         td[class="grid-block"] .section.half:first-child { margin-right: 0; }
 37 |     }
 38 | </style>
 39 | 
 40 | <table cellpadding="0" cellspacing="0">
 41 |     <tr>
 42 |         <td class="grid-block" width="600" style="padding-bottom: 8px;">
 43 |             <table cellpadding="0" cellspacing="0">
 44 |                 <tr>
 45 |                     <td class="row">
 46 |                         <table cellpadding="0" cellspacing="0">
 47 |                             <tr>
 48 |                                 <td class="section half" width="144" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
 49 |                                     1
 50 |                                 </td>
 51 |                                 <td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td>
 52 |                                 <td class="section half" width="144" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
 53 |                                     2
 54 |                                 </td>
 55 |                                 <td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td>
 56 |                                 <td class="section full" width="296" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
 57 |                                     3
 58 |                                 </td>
 59 |                             </tr>
 60 |                         </table>
 61 |                     </td>
 62 |                 </tr>
 63 |                 <tr>
 64 |                     <td class="row" style="padding-top: 8px;">
 65 |                         <table cellpadding="0" cellspacing="0">
 66 |                             <tr>
 67 |                                 <td class="section half" width="296" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
 68 |                                     4
 69 |                                 </td>
 70 |                                 <td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td>
 71 |                                 <td class="section half" width="144" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
 72 |                                     5
 73 |                                 </td>
 74 |                                 <td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td>
 75 |                                 <td class="section full" width="144" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
 76 |                                     6
 77 |                                 </td>
 78 |                             </tr>
 79 |                         </table>
 80 |                     </td>
 81 |                 </tr>
 82 |                 <tr>
 83 |                     <td class="row" style="padding-top: 8px;">
 84 |                         <table cellpadding="0" cellspacing="0">
 85 |                             <tr>
 86 |                                 <td class="section half" width="144" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
 87 |                                     7
 88 |                                 </td>
 89 |                                 <td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td>
 90 |                                 <td class="section half" width="144" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
 91 |                                     8
 92 |                                 </td>
 93 |                                 <td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td>
 94 |                                 <td class="section full" width="296" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
 95 |                                     9
 96 |                                 </td>
 97 |                             </tr>
 98 |                         </table>
 99 |                     </td>
100 |                 </tr>
101 |                 <tr>
102 |                     <td class="row" style="padding-top: 8px;">
103 |                         <table cellpadding="0" cellspacing="0">
104 |                             <tr>
105 |                                 <td class="section half" width="296" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
106 |                                     10
107 |                                 </td>
108 |                                 <td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td>
109 |                                 <td class="section half" width="144" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
110 |                                     11
111 |                                 </td>
112 |                                 <td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td>
113 |                                 <td class="section full" width="144" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
114 |                                     12
115 |                                 </td>
116 |                             </tr>
117 |                         </table>
118 |                     </td>
119 |                 </tr>
120 |             </table>
121 |         </td>
122 |     </tr>
123 | </table>


--------------------------------------------------------------------------------
/source/patterns/grid-blocks/double-wide-v3.html.erb:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Responsive Email Patterns
  3 | layout: pattern
  4 | pattern_name: "Double Wide v3"
  5 | pattern_desc: "A grid block that reflows as appropriate as the screen size shrinks."
  6 | ---
  7 | 
  8 | <style>
  9 | 	/* Double Wide v3 Pattern CSS */
 10 | 	@media only screen and (max-width: 599px) {
 11 |         td[class="grid-block"] table { width: 100%; }
 12 |         td[class="grid-block"] .spacer { display: none; }
 13 |         td[class="grid-block"] .row { padding: 0 !important; }
 14 |         td[class="grid-block"] .section {
 15 |             display: block;
 16 |             float: left;
 17 |             height: auto;
 18 |             padding: 60px 20px;
 19 |             margin-bottom: 8px;
 20 |             -moz-box-sizing: border-box;
 21 |             -webkit-box-sizing: border-box;
 22 |             box-sizing: border-box;
 23 |         }
 24 |         td[class="grid-block"] .section.half {
 25 |             width: 49%;
 26 |         }
 27 |         td[class="grid-block"] .section.quarter {
 28 |             width: 23.5%;
 29 |         }
 30 |         td[class="grid-block"] .section.half:first-child,
 31 |         td[class="grid-block"] .section.quarter:first-child,
 32 |         td[class="grid-block"] .section.quarter + .spacer + .section.half { margin-right: 2%; }
 33 |         td[class="grid-block"] .section.full {
 34 |             width: 100%;
 35 |         }
 36 | 	}
 37 |     @media only screen and (max-width: 420px) {
 38 |         td[class="grid-block"] .section.half,
 39 |         td[class="grid-block"] .section.quarter {
 40 |             width: 100%;
 41 |         }
 42 |         td[class="grid-block"] .section.half:first-child { margin-right: 0; }
 43 |     }
 44 | </style>
 45 | 
 46 | <table cellpadding="0" cellspacing="0">
 47 |     <tr>
 48 |         <td class="grid-block" width="600" style="padding-bottom: 8px;">
 49 |             <table cellpadding="0" cellspacing="0">
 50 |                 <tr>
 51 |                     <td class="row">
 52 |                         <table cellpadding="0" cellspacing="0">
 53 |                             <tr>
 54 |                                 <td class="section quarter" width="144" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
 55 |                                     1
 56 |                                 </td>
 57 |                                 <td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td>
 58 |                                 <td class="section half" width="296" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
 59 |                                     2
 60 |                                 </td>
 61 |                                 <td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td>
 62 |                                 <td class="section quarter" width="144" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
 63 |                                     3
 64 |                                 </td>
 65 |                             </tr>
 66 |                         </table>
 67 |                     </td>
 68 |                 </tr>
 69 |                 <tr>
 70 |                     <td class="row" style="padding-top: 8px;">
 71 |                         <table cellpadding="0" cellspacing="0">
 72 |                             <tr>
 73 |                                 <td class="section full" width="296" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
 74 |                                     4
 75 |                                 </td>
 76 |                                 <td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td>
 77 |                                 <td class="section full" width="296" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
 78 |                                     5
 79 |                                 </td>
 80 |                             </tr>
 81 |                         </table>
 82 |                     </td>
 83 |                 </tr>
 84 |                 <tr>
 85 |                     <td class="row" style="padding-top: 8px;">
 86 |                         <table cellpadding="0" cellspacing="0">
 87 |                             <tr>
 88 |                                 <td class="section half" width="144" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
 89 |                                     7
 90 |                                 </td>
 91 |                                 <td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td>
 92 |                                 <td class="section half" width="144" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
 93 |                                     8
 94 |                                 </td>
 95 |                                 <td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td>
 96 |                                 <td class="section full" width="296" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
 97 |                                     9
 98 |                                 </td>
 99 |                             </tr>
100 |                         </table>
101 |                     </td>
102 |                 </tr>
103 |             </table>
104 |         </td>
105 |     </tr>
106 | </table>


--------------------------------------------------------------------------------
/source/patterns/grid-blocks/with-title-sections.html.erb:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Responsive Email Patterns
 3 | layout: pattern
 4 | pattern_name: "With Title Sections"
 5 | pattern_desc: "A grid block with title that reflows as appropriate as the screen size shrinks."
 6 | ---
 7 | 
 8 | <style>
 9 | 	/* Gridblock with Title Sections Pattern CSS */
10 | 	@media only screen and (max-width: 500px) {
11 |         table[class="pattern"] table { width: 100%; }
12 |         table[class="pattern"] .spacer { display: none; }
13 |         table[class="pattern"] .section-title,
14 |         table[class="pattern"] .section-row {
15 |             display: block;
16 |             height: auto;
17 |         }
18 |         table[class="pattern"] .section-title {
19 |             width: 100%;
20 |             padding: 20px 0;
21 |             margin-bottom: 8px;
22 |         }
23 |         table[class="pattern"] .section-row { width: 100%; }
24 |         table[class="pattern"] .section-row .section {
25 |             display: block;
26 |             float: left;
27 |             width: 32%;
28 |             height: auto;
29 |             margin-left: 2%;
30 |             padding: 60px 20px;
31 |             -moz-box-sizing: border-box;
32 |             -webkit-box-sizing: border-box;
33 |             box-sizing: border-box;
34 |         }
35 |         table[class="pattern"] .section-row .section:first-child { margin-left: 0; }
36 | 	}
37 |     @media only screen and (max-width: 400px) {
38 |         table[class="pattern"] .grid-block { padding-bottom: 0 !important; }
39 |         table[class="pattern"] .section-row .section {
40 |             float: none;
41 |             width: 100%;
42 |             margin: 0 0 8px 0;
43 |         }
44 |     }
45 | </style>
46 | 
47 | <table cellpadding="0" cellspacing="0" class="pattern" width="100%">
48 |     <% 3.times do %>
49 |     <tr>
50 |         <td class="grid-block" width="600" style="padding-bottom: 8px;">
51 |             <table cellpadding="0" cellspacing="0">
52 |                 <tr>
53 |                     <td class="section-title" width="144" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
54 |                         Section Title
55 |                     </td>
56 |                     <td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td>
57 |                     <td class="section-row" width="450">
58 |                         <table cellpadding="0" cellspacing="0">
59 |                             <tr>
60 |                                 <td class="section" width="144" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
61 |                                     1
62 |                                 </td>
63 |                                 <td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td>
64 |                                 <td class="section" width="144" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
65 |                                     2
66 |                                 </td>
67 |                                 <td class="spacer" width="8" style="font-size: 1px;">&nbsp;</td>
68 |                                 <td class="section" width="144" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
69 |                                     3
70 |                                 </td>
71 |                             </tr>
72 |                         </table>
73 |                     </td>
74 |                 </tr>
75 |             </table>
76 |         </td>
77 |     </tr>
78 |     <% end %>
79 | </table>


--------------------------------------------------------------------------------
/source/patterns/layout/2-equal-width-columns-v2.html.erb:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Responsive Email Patterns
 3 | layout: pattern
 4 | pattern_name: "2 Equal Width Columns v2"
 5 | pattern_desc: "A layout that starts as 2 equal width columns and ends as a single column layout, stacking the left column on top of the right as the screen sizes get narrower."
 6 | ---
 7 | <style>
 8 | 	/* 2 Equal-Width Columns V2 Layout Pattern CSS */
 9 | 	@media only screen and (max-width: 599px) {
10 |         td[class="pattern"] table { width: 100%; }
11 |         td[class="pattern"] .hero_image img {
12 |             width: 100%;
13 |             height: auto !important;
14 |         }
15 | 	}
16 |     @media only screen and (max-width: 450px) {
17 |         td[class="pattern"] .spacer { display: none; }
18 |         td[class="pattern"] .col{
19 |             width: 100%;
20 |             display: block;
21 |         }
22 |         td[class="pattern"] .col:first-child { margin-bottom: 30px; }
23 |         td[class="pattern"] .hero_image img { width: 100%; }
24 |     }
25 | </style>
26 | 
27 | <table cellpadding="0" cellspacing="0">
28 |     <tr>
29 |         <td class="pattern" width="600" align="center">
30 |             <table cellpadding="0" cellspacing="0">
31 |                 <tr>
32 |                     <td class="col" width="290" valign="top">
33 |                         <table cellpadding="0" cellspacing="0">
34 |                             <tr>
35 |                                 <td class="hero_image"><img src="http://placehold.it/450x150" width="290" alt="" style="display: block; border: 0;" /></td>
36 |                             </tr>
37 |                             <tr>
38 |                                 <td class="headline" align="left" style="font-family: arial,sans-serif; font-size: 22px; color: #333; padding-top: 15px;">
39 |                                     This is a story headline
40 |                                 </td>
41 |                             </tr>
42 |                             <tr>
43 |                                 <td class="body_copy" align="left" style="font-family: arial,sans-serif; font-size: 14px; line-height: 20px !important; color: #7f7f7f; padding-top: 10px;">
44 |                                     Virtual computing via the cloud is all the rage these days but blade servers, which make up the bulk of the infrastructure for cloud computing systems, require specific fusing for high reliability and uptime. The Littelfuse 456 Series--- NANO2 Subminature Surface Mount Fuse - is perfect for this.
45 |                                 </td>
46 |                             </tr>
47 |                             <tr>
48 |                                 <td align="left" style="padding-top: 15px;"><img src="http://placehold.it/118x34/333&text=Learn+More" alt="Learn More" style="display: block; border: 0;" /></td>
49 |                             </tr>
50 |                         </table>
51 |                     </td>
52 |                     <td class="spacer" width="20" style="font-size: 1px;">&nbsp;</td>
53 |                     <td class="col" width="290" valign="top">
54 |                         <table cellpadding="0" cellspacing="0">
55 |                             <tr>
56 |                                 <td class="hero_image"><img src="http://placehold.it/450x150" width="290" alt="" style="display: block; border: 0;" /></td>
57 |                             </tr>
58 |                             <tr>
59 |                                 <td class="headline" align="left" style="font-family: arial,sans-serif; font-size: 22px; color: #333; padding-top: 15px;">
60 |                                     This is a story headline
61 |                                 </td>
62 |                             </tr>
63 |                             <tr>
64 |                                 <td class="body_copy" align="left" style="font-family: arial,sans-serif; font-size: 14px; line-height: 20px !important; color: #7f7f7f; padding-top: 10px;">
65 |                                     Virtual computing via the cloud is all the rage these days but blade servers, which make up the bulk of the infrastructure for cloud computing systems, require specific fusing for high reliability and uptime. The Littelfuse 456 Series--- NANO2 Subminature Surface Mount Fuse - is perfect for this.
66 |                                 </td>
67 |                             </tr>
68 |                             <tr>
69 |                                 <td align="left" style="padding-top: 15px;"><img src="http://placehold.it/118x34/333&text=Learn+More" alt="Learn More" style="display: block; border: 0;" /></td>
70 |                             </tr>
71 |                         </table>
72 |                     </td>
73 |                 </tr>
74 |             </table>
75 |         </td>
76 |     </tr>
77 | </table>


--------------------------------------------------------------------------------
/source/patterns/layout/2-equal-width-columns.html.erb:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Responsive Email Patterns
  3 | layout: pattern
  4 | pattern_name: "2 Equal Width Columns"
  5 | pattern_desc: "A layout that starts as 2 equal width columns and ends as a single column layout, stacking the left column on top of the right as the screen sizes get narrower."
  6 | ---
  7 | 
  8 | <style>
  9 | 	/* 2 equal-width columns Layout Pattern CSS */
 10 | 	@media only screen and (max-width: 599px) {
 11 |         td[class="pattern"] table { width: 100%; }
 12 |         td[class="pattern"] img {
 13 |             width: 100%;
 14 |             height: auto !important;
 15 |         }
 16 | 	    td[class="pattern"] .col{
 17 | 	        width: 50%;
 18 | 	    }
 19 | 	}
 20 |     @media only screen and (max-width: 450px) {
 21 |         td[class="pattern"] .col{
 22 |             width: 100%;
 23 |             display: block;
 24 |         }
 25 |         td[class="pattern"] .col1{
 26 |             margin-bottom: 16px;
 27 |         }
 28 |         td[class="pattern"] .description span {
 29 |             display: block;
 30 |             max-width: 300px;
 31 |         }
 32 |     }
 33 | </style>
 34 | <table cellpadding="0" cellspacing="0">
 35 |     <tr>
 36 |         <td class="pattern" width="600" align="center">
 37 |             <table cellpadding="0" cellspacing="0">
 38 |                 <tr>
 39 |                     <td style="background: #eee; padding: 20px 0;">
 40 |                         <table cellpadding="0" cellspacing="0">
 41 |                             <tr>
 42 |                                 <td class="col col1" width="300" align="center">
 43 |                                     <table cellpadding="0" cellspacing="0">
 44 |                                         <tr>
 45 |                                             <td style="padding: 0 10px;">
 46 |                                                 <table cellpadding="0" cellspacing="0">
 47 |                                                     <tr>
 48 |                                                         <td align="center" style="font-family: arial,sans-serif; font-size: 22px; color: #000; padding-bottom: 8px;">
 49 |                                                             This is a Headline
 50 |                                                         </td>
 51 |                                                     </tr>
 52 |                                                     <tr>
 53 |                                                         <td class="description" align="center" style="font-family: arial,sans-serif; font-size: 12px; color: #333; padding-bottom: 8px;">
 54 |                                                             <span>Neyla of indie band The Lumineers swings by our office to meet her namesake dress!</span>
 55 |                                                         </td>
 56 |                                                     </tr>
 57 |                                                     <tr>
 58 |                                                         <td align="center" style="font-family: arial,sans-serif; font-size: 14px; font-weight: bold; color: #000">
 59 |                                                             <a href="#" style="text-decoration: none; color: #000;">Check It Out »</a>
 60 |                                                         </td>
 61 |                                                     </tr>
 62 |                                                 </table>
 63 |                                             </td>
 64 |                                         </tr>
 65 |                                     </table>
 66 |                                 </td>
 67 |                                 <td class="col" width="300" align="center">
 68 |                                     <table cellpadding="0" cellspacing="0">
 69 |                                         <tr>
 70 |                                             <td align="center" style="padding: 0 10px;">
 71 |                                                 <img src="http://placehold.it/400x110&text=Image" width="300" alt="" style="display: block;" />
 72 |                                             </td>
 73 |                                         </tr>
 74 |                                     </table>
 75 |                                 </td>
 76 |                             </tr>
 77 |                         </table>
 78 |                     </td>
 79 |                 </tr>
 80 |                 <tr>
 81 |                     <td style="background: #eee; padding: 20px 0;">
 82 |                         <table cellpadding="0" cellspacing="0">
 83 |                             <tr>
 84 |                                 <td class="col col1" width="300" align="center">
 85 |                                     <table cellpadding="0" cellspacing="0">
 86 |                                         <tr>
 87 |                                             <td style="padding: 0 10px;">
 88 |                                                 <table cellpadding="0" cellspacing="0">
 89 |                                                     <tr>
 90 |                                                         <td align="center" style="font-family: arial,sans-serif; font-size: 22px; color: #000; padding-bottom: 8px;">
 91 |                                                             This is a Headline
 92 |                                                         </td>
 93 |                                                     </tr>
 94 |                                                     <tr>
 95 |                                                         <td class="description" align="center" style="font-family: arial,sans-serif; font-size: 12px; color: #333; padding-bottom: 8px;">
 96 |                                                             <span>Neyla of indie band The Lumineers swings by our office to meet her namesake dress!</span>
 97 |                                                         </td>
 98 |                                                     </tr>
 99 |                                                     <tr>
100 |                                                         <td align="center" style="font-family: arial,sans-serif; font-size: 14px; font-weight: bold; color: #000">
101 |                                                             <a href="#" style="text-decoration: none; color: #000;">Check It Out »</a>
102 |                                                         </td>
103 |                                                     </tr>
104 |                                                 </table>
105 |                                             </td>
106 |                                         </tr>
107 |                                     </table>
108 |                                 </td>
109 |                                 <td class="col" width="300" align="center">
110 |                                     <table cellpadding="0" cellspacing="0">
111 |                                         <tr>
112 |                                             <td align="center" style="padding: 0 10px;">
113 |                                                 <img src="http://placehold.it/400x110&text=Image" width="300" alt="" style="display: block;" />
114 |                                             </td>
115 |                                         </tr>
116 |                                     </table>
117 |                                 </td>
118 |                             </tr>
119 |                         </table>
120 |                     </td>
121 |                 </tr>
122 |             </table>
123 |         </td>
124 |     </tr>
125 | </table>


--------------------------------------------------------------------------------
/source/patterns/layout/column-drop.html.erb:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Responsive Email Patterns
 3 | layout: pattern
 4 | pattern_name: "Column Drop"
 5 | pattern_desc: "A multi-column layout that ends up as a single column layout, dropping columns along the way as the screen sizes get narrower."
 6 | ---
 7 | <style>
 8 |     /* Column Drop Layout Pattern CSS */
 9 | 	@media only screen and (max-width: 450px) {
10 | 	    td[class="column"] {
11 | 	        display: block;
12 |             width: 100%;
13 |             -moz-box-sizing: border-box;
14 |             -webkit-box-sizing: border-box;
15 |             box-sizing: border-box;
16 | 	    }
17 | 	}
18 | </style>
19 | <table cellpadding="0" cellspacing="0">
20 |     <tr>
21 |         <td class="column" width="600" colspan="2" align="left" valign="top" style="padding: 10px 20px 20px 20px; background: #999; font-family: arial,sans-serif; font-size: 14px; line-height: 18px; color: #000001;">
22 |         	<h1>Column 1</h1>
23 |             <p>
24 |                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.
25 |             </p>
26 |         </td>
27 |     </tr>
28 |     <tr>
29 |         <td class="column" width="300" align="left" valign="top" style="padding: 20px; background: #666; font-family: arial,sans-serif; font-size: 14px; line-height: 18px; color: #fff;">
30 |             <h2 style="border: 0;">Column 2</h2>
31 |             <p>
32 |                 Nunc tempus felis vitae urna. Vivamus porttitor, neque at volutpat rutrum, purus nisi eleifend libero, a tempus libero lectus feugiat felis. Morbi diam mauris, viverra in, gravida eu, mattis in, ante. Morbi eget arcu. Morbi porta, libero id ullamcorper nonummy, nibh ligula pulvinar metus, eget consectetuer augue nisi quis lacus. Ut ac mi quis lacus mollis aliquam. Curabitur iaculis tempus eros. Curabitur vel mi sit amet magna malesuada ultrices. Ut nisi erat, fermentum vel, congue id, euismod in, elit. Fusce ultricies, orci ac feugiat suscipit, leo massa sodales velit, et scelerisque mi tortor at ipsum. Proin orci odio, commodo ac, gravida non, tristique vel, tellus. Pellentesque nibh libero, ultricies eu, sagittis non, mollis sed, justo. Praesent metus ipsum, pulvinar pulvinar, porta id, fringilla at, est.
33 |             </p>
34 |         </td>
35 |         <td class="column" width="300" align="left" valign="top" style="padding: 20px; background: #333; color: #fff; font-family: arial,sans-serif; font-size: 14px; line-height: 18px;">
36 |             <h2 style="border: 0;">Column 3</h2>
37 |             <p>
38 |                 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In posuere felis nec tortor. Pellentesque faucibus. Ut accumsan ultricies elit. Maecenas at justo id velit placerat molestie. Donec dictum lectus non odio. Cras a ante vitae enim iaculis aliquam. Mauris nunc quam, venenatis nec, euismod sit amet, egestas placerat, est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras id elit. Integer quis urna. Ut ante enim, dapibus malesuada, fringilla eu, condimentum quis, tellus. Aenean porttitor eros vel dolor. Donec convallis pede venenatis nibh. Duis quam. Nam eget lacus. Aliquam erat volutpat. Quisque dignissim congue leo.
39 |             </p>
40 |         </td>
41 |     </tr>
42 | </table>
43 | 
44 | 


--------------------------------------------------------------------------------
/source/patterns/layout/image-surround.html.erb:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Responsive Email Patterns
  3 | layout: pattern
  4 | pattern_name: "Image Surround"
  5 | pattern_desc: "A layout that provides placement for a headline in the center, wrapped with images arround the sides. As screen size narrows, certain images are dropped and others rearrange. Decent for promotional layouts containing product images."
  6 | ---
  7 | <style>
  8 | 	/* Image Surround Layout Pattern CSS */
  9 | 	@media only screen and (max-width: 599px) {
 10 |         td[class="pattern"] img {
 11 |             width: 100%;
 12 |             height: auto !important;
 13 |         }
 14 |         td[class="pattern"] img.cta {
 15 |             width: auto;
 16 |         }
 17 |         td[class="pattern"] table,
 18 |         td[class="pattern"] .row {
 19 |             width: 100%;
 20 |         }
 21 |         td[class="pattern"] .img {
 22 |             display: block;
 23 |             float: left;
 24 |             width: 25%;
 25 |         }
 26 |         td[class="pattern"] .middle {
 27 |             width: 50%;
 28 |         }
 29 | 	}
 30 |     @media only screen and (max-width: 550px) {
 31 |         td[class="pattern"] .headline { font-size: 26px !important; }
 32 |     }
 33 |     @media only screen and (max-width: 460px) {
 34 |         td[class="pattern"] .row2 { padding: 40px 0; }
 35 |         td[class="pattern"] .headline { font-size: 42px !important; }
 36 |         td[class="pattern"] .body_copy { font-size: 16px !important; }
 37 |         td[class="pattern"] .hide { display: none; }
 38 |         td[class="pattern"] .img {
 39 |             width: 50%;
 40 |         }
 41 |         td[class="pattern"] .img img {
 42 |             width: 100%;
 43 |         }
 44 |     }
 45 | </style>
 46 | 
 47 | <table cellpadding="0" cellspacing="0">
 48 |     <tr>
 49 |         <td class="pattern" width="600">
 50 |             <table cellpadding="0" cellspacing="0">
 51 |                 <tr>
 52 |                     <td class="row row1">
 53 |                         <table cellpadding="0" cellspacing="0">
 54 |                             <tr>
 55 |                                 <td class="img hide"><img src="http://placehold.it/150x150/bbbbbb&text=Image+7" alt="" style="display: block; border: 0;" /></td>
 56 |                                 <td class="img"><img src="http://placehold.it/150x150&text=Image+1" alt="" style="display: block; border: 0;" /></td>
 57 |                                 <td class="img"><img src="http://placehold.it/150x150/bbbbbb&text=Image+2" alt="" style="display: block; border: 0;" /></td>
 58 |                                 <td class="img hide"><img src="http://placehold.it/150x150&text=Image+8" alt="" style="display: block; border: 0;" /></td>
 59 |                             </tr>
 60 |                         </table>
 61 |                     </td>
 62 |                 </tr>
 63 |                 <tr>
 64 |                     <td class="row row2">
 65 |                         <table cellpadding="0" cellspacing="0">
 66 |                             <tr>
 67 |                                 <td class="hide">
 68 |                                     <table cellpadding="0" cellspacing="0">
 69 |                                         <tr>
 70 |                                             <td><img src="http://placehold.it/150x150&text=Image+9" alt="" style="display: block; border: 0;" /></td>
 71 |                                         </tr>
 72 |                                         <tr>
 73 |                                             <td><img src="http://placehold.it/150x150/bbbbbb&text=Image+11" alt="" style="display: block; border: 0;" /></td>
 74 |                                         </tr>
 75 |                                     </table>
 76 |                                 </td>
 77 |                                 <td class="middle" width="300" align="center" valign="middle">
 78 |                                     <table cellpadding="0" cellspacing="0">
 79 |                                         <tr>
 80 |                                             <td class="headline" align="center" style="font-family: arial,sans-serif; font-size: 42px; font-weight: bold; text-transform: uppercase; color: #333; padding: 10 20px;">
 81 |                                                 This is a Headline
 82 |                                             </td>
 83 |                                         </tr>
 84 |                                         <tr>
 85 |                                             <td class="body_copy" align="center" style="font-family: arial,sans-serif; font-size: 14px; color: #666; padding: 10px 20px;">
 86 |                                                 Nam sollicitudin dapibus nisi quis varius. Ut posuere volutpat erat, pellentesque iaculis velit eleifend vitae.
 87 |                                             </td>
 88 |                                         </tr>
 89 |                                         <tr>
 90 |                                             <td align="center" style="padding: 10px;">
 91 |                                                 <img class="cta" src="http://placehold.it/120x40/333333&text=Shop+Now" alt="" style="display: block; border: 0;" />
 92 |                                             </td>
 93 |                                         </tr>
 94 |                                     </table>
 95 |                                 </td>
 96 |                                 <td class="hide">
 97 |                                     <table cellpadding="0" cellspacing="0">
 98 |                                         <tr>
 99 |                                             <td><img src="http://placehold.it/150x150/bbbbbb&text=Image+10" alt="" style="display: block; border: 0;" /></td>
100 |                                         </tr>
101 |                                         <tr>
102 |                                             <td><img src="http://placehold.it/150x150&text=Image+12" alt="" style="display: block; border: 0;" /></td>
103 |                                         </tr>
104 |                                     </table>
105 |                                 </td>
106 |                             </tr>
107 |                         </table>
108 |                     </td>
109 |                 </tr>
110 |                 <tr>
111 |                     <td class="row row3">
112 |                         <table cellpadding="0" cellspacing="0">
113 |                             <tr>
114 |                                 <td class="img"><img src="http://placehold.it/150x150&text=Image+3" alt="" style="display: block; border: 0;" /></td>
115 |                                 <td class="img"><img src="http://placehold.it/150x150/bbbbbb&text=Image+4" alt="" style="display: block; border: 0;" /></td>
116 |                                 <td class="img"><img src="http://placehold.it/150x150&text=Image+5" alt="" style="display: block; border: 0;" /></td>
117 |                                 <td class="img"><img src="http://placehold.it/150x150/bbbbbb&text=Image+6" alt="" style="display: block; border: 0;" /></td>
118 |                             </tr>
119 |                         </table>
120 |                     </td>
121 |                 </tr>
122 |             </table>
123 |         </td>
124 |     </tr>
125 | </table>


--------------------------------------------------------------------------------
/source/patterns/layout/layout-shifter.html.erb:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Responsive Email Patterns
 3 | layout: pattern
 4 | pattern_name: "Layout Shifter"
 5 | pattern_desc: "A layout that starts as a single row left column and a multi-row right column. The layout shifts, stacking columns from left to right, top to bottom as the screen size gets narrower."
 6 | ---
 7 | <style>
 8 | 	/* Layout Shifter Layout Pattern CSS */
 9 | 	@media only screen and (max-width: 500px) {
10 | 	    table[class="pattern"] td{
11 | 	        width: 100%;
12 |             display: block;
13 | 	        -moz-box-sizing: border-box;
14 |             -webkit-box-sizing: border-box;
15 |             box-sizing: border-box;
16 | 	    }
17 | 	}
18 | </style>
19 | 
20 | </head>
21 | 
22 | <table cellpadding="0" cellspacing="0" class="pattern">
23 |     <tr>
24 |         <td width="200" align="left" valign="top" style="padding: 20px; background: #999; font-family: arial,sans-serif; font-size: 14px; line-height: 18px; color: #fff;">
25 |             <h1>Column 1</h1>
26 |             <p>
27 |                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.
28 |             </p>
29 |         </td>
30 |         <td width="400" valign="top">
31 |             <table cellpadding="0" cellspacing="0">
32 |                 <tr>
33 |                     <td width="400" align="left" valign="top" style="padding: 20px; background: #666; font-family: arial,sans-serif; font-size: 14px; line-height: 18px; color: #fff;">
34 |                         <h2>Column 2</h2>
35 |                         <p>
36 |                             Nunc tempus felis vitae urna. Vivamus porttitor, neque at volutpat rutrum, purus nisi eleifend libero, a tempus libero lectus feugiat felis. Morbi diam mauris, viverra in, gravida eu, mattis in, ante. Morbi eget arcu. Morbi porta, libero id ullamcorper nonummy, nibh ligula pulvinar metus, eget consectetuer augue nisi quis lacus. Ut ac mi quis lacus mollis aliquam. Curabitur iaculis tempus eros. Curabitur vel mi sit amet magna malesuada ultrices. Ut nisi erat, fermentum vel, congue id, euismod in, elit. Fusce ultricies, orci ac feugiat suscipit, leo massa sodales velit, et scelerisque mi tortor at ipsum. Proin orci odio, commodo ac, gravida non, tristique vel, tellus. Pellentesque nibh libero, ultricies eu, sagittis non, mollis sed, justo. Praesent metus ipsum, pulvinar pulvinar, porta id, fringilla at, est.
37 |                         </p>
38 |                     </td>
39 |                 </tr>
40 |                 <tr>
41 |                     <td width="400" align="left" valign="top" style="padding: 20px; background: #333; color: #fff; font-family: arial,sans-serif; font-size: 14px;">
42 |                         <h2>Column 3</h2>
43 |                         <p>
44 |                             Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In posuere felis nec tortor. Pellentesque faucibus. Ut accumsan ultricies elit. Maecenas at justo id velit placerat molestie. Donec dictum lectus non odio. Cras a ante vitae enim iaculis aliquam. Mauris nunc quam, venenatis nec, euismod sit amet, egestas placerat, est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras id elit. Integer quis urna. Ut ante enim, dapibus malesuada, fringilla eu, condimentum quis, tellus. Aenean porttitor eros vel dolor. Donec convallis pede venenatis nibh. Duis quam. Nam eget lacus. Aliquam erat volutpat. Quisque dignissim congue leo.
45 |                         </p>
46 |                     </td>
47 |                 </tr>
48 |             </table>
49 |         </td>
50 |     </tr>
51 | </table>


--------------------------------------------------------------------------------
/source/patterns/layout/main-column-with-sidebar.html.erb:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Responsive Email Patterns
 3 | layout: pattern
 4 | pattern_name: "Main Column With Sidebar"
 5 | pattern_desc: "A multi-column layout with one main column and a sidebar that ends up as a single column layout, stacking the main column on top of the sidebar as the screen size gets smaller."
 6 | ---
 7 | <style>
 8 | 	/* Column Drop Layout Pattern CSS */
 9 | 	@media only screen and (max-width: 460px) {
10 | 	    td[class="pattern"] .col {
11 |             display: block;
12 |             width: 100%;
13 | 	    }
14 |         td[class="pattern"] .col:first-child { margin-bottom: 20px; }
15 | 	}
16 | </style>
17 | 
18 | <table cellpadding="0" cellspacing="0">
19 |     <tr>
20 |         <td class="pattern">
21 |             <table cellpadding="0" cellspacing="0">
22 |                 <tr>
23 |                     <td class="col" width="400" align="left" valign="top">
24 |                         <table cellpadding="0" cellspacing="0">
25 |                             <tr>
26 |                                 <td align="left" valign="top" style="font-family: arial,sans-serif; font-size: 14px; color: #333; padding-right: 20px;">
27 |                                     <h1 style="margin-top: 0;">Main Column</h1>
28 |                                     <p style="padding-bottom: 10px; line-height: 20px !important;">
29 |                                         Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.
30 |                                     </p>
31 |                                     <img src="http://placehold.it/140x50/333&text=CTA»" alt="" style="display: block; border: 0;" />
32 |                                 </td>
33 |                             </tr>
34 |                         </table>
35 |                     </td>
36 |                     <td class="col" width="200" align="left" valign="top" style="background: #ebebeb;">
37 |                         <table cellpadding="0" cellspacing="0">
38 |                             <tr>
39 |                                 <td align="left" valign="top" style="padding: 20px;">
40 |                                     <table cellpadding="0" cellspacing="0">
41 |                                         <tr>
42 |                                             <td colspan="2" align="left" style="font-family: arial,sans-serif; font-size: 22px; font-weight: bold; color: #666; padding-bottom: 10px;">Sidebar</td>
43 |                                         </tr>
44 |                                         <tr>
45 |                                             <td width="14" align="left" style="font-family: arial,sans-serif; font-size: 20px; color: #666;">&bull;</td>
46 |                                             <td align="left" style="font-family: arial,sans-serif; font-size: 14px; color: #666;">Bullet 1</td>
47 |                                         </tr>
48 |                                         <tr>
49 |                                             <td width="20" align="left" style="font-family: arial,sans-serif; font-size: 20px; color: #666;">&bull;</td>
50 |                                             <td align="left" style="font-family: arial,sans-serif; font-size: 14px; color: #666;">Bullet 2</td>
51 |                                         </tr>
52 |                                         <tr>
53 |                                             <td width="20" align="left" style="font-family: arial,sans-serif; font-size: 20px; color: #666;">&bull;</td>
54 |                                             <td align="left" style="font-family: arial,sans-serif; font-size: 14px; color: #666;">Bullet 3</td>
55 |                                         </tr>
56 |                                         <tr>
57 |                                             <td width="20" align="left" style="font-family: arial,sans-serif; font-size: 20px; color: #666;">&bull;</td>
58 |                                             <td align="left" style="font-family: arial,sans-serif; font-size: 14px; color: #666;">Bullet 4</td>
59 |                                         </tr>
60 |                                         <tr>
61 |                                             <td width="20" align="left" style="font-family: arial,sans-serif; font-size: 20px; color: #666;">&bull;</td>
62 |                                             <td align="left" style="font-family: arial,sans-serif; font-size: 14px; color: #666;">Bullet 5</td>
63 |                                         </tr>
64 |                                     </table>
65 |                                 </td>
66 |                             </tr>
67 |                         </table>
68 |                     </td>
69 |                 </tr>
70 |             </table>
71 |         </td>
72 |     </tr>
73 | </table>


--------------------------------------------------------------------------------
/source/patterns/layout/shrink-wrap.html.erb:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Responsive Email Patterns
 3 | layout: pattern
 4 | pattern_name: "Shrink Wrap"
 5 | pattern_desc: "The simplesest layout is one that is mostly fluid. The layout does not shift with screen size changes. Text simply reflows and images scale."
 6 | ---
 7 | <style>
 8 | 	/* Shrink Wrap Layout Pattern CSS */
 9 | 	@media only screen and (max-width: 599px) {
10 |         td[class="hero"] img {
11 |             width: 100%;
12 |             height: auto !important;
13 |         }
14 | 	    td[class="pattern"] td{
15 | 	        width: 100%;
16 | 	    }
17 | 	}
18 | </style>
19 | 
20 | <table cellpadding="0" cellspacing="0">
21 |     <tr>
22 |         <td class="pattern" width="600">
23 |             <table cellpadding="0" cellspacing="0">
24 |                 <tr>
25 |                     <td class="hero">
26 |                         <img src="http://placehold.it/600x200&text=Hero+Image" alt="" style="display: block; border: 0;" />
27 |                     </td>
28 |                 </tr>
29 |                 <tr>
30 |                     <td align="left" style="font-family: arial,sans-serif; color: #333;">
31 |                         <h1>Header Text</h1>
32 |                     </td>
33 |                 </tr>
34 |                 <tr>
35 |                     <td align="left" style="font-family: arial,sans-serif; font-size: 14px; line-height: 20px !important; color: #666; padding-bottom: 20px;">
36 |                         Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.
37 |                     </td>
38 |                 </tr>
39 |                 <tr>
40 |                     <td align="left">
41 |                         <a href="#"><img src="http://placehold.it/200x50/333&text=CTA+»" alt="CTA" style="display: block; border: 0;" /></a>
42 |                     </td>
43 |                 </tr>
44 |             </table>
45 |         </td>
46 |     </tr>
47 | </table>


--------------------------------------------------------------------------------
/source/patterns/layout/source-order-shift.html.erb:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Responsive Email Patterns
 3 | layout: pattern
 4 | pattern_name: "Source Order Shift"
 5 | pattern_desc: "A layout that starts as 2 equal width columns and ends as a single column layout, stacking the right column on top of the left as the screen sizes get narrower."
 6 | ---
 7 | <style>
 8 | 	/* Source Order Shift Layout Pattern CSS */
 9 | 	@media only screen and (max-width: 599px) {
10 |         td[class="pattern"] .product_image img {
11 |             width: 100%;
12 |             height: auto !important;
13 |         }
14 | 	}
15 |     @media only screen and (max-width: 460px) {
16 |         td[class="pattern"] .product { padding: 20px !important; }
17 |         td[class="pattern"] .product_description {
18 |             padding-right: 0 !important;
19 |             width: 100%;
20 |         }
21 |         td[class="pattern"] .product_image { display: none; }
22 |         td[class="pattern"] .product_image_small {
23 |             display: table-cell !important;
24 |             width: 100% !important;
25 |             height: auto !important;
26 |             max-height: inherit !important;
27 |             overflow: visible !important;
28 |             float: none !important;
29 |             padding-bottom: 10px;
30 |         }
31 |         td[class="pattern"] .product_image_small img {
32 |             width: 100%;
33 |             display: block !important;
34 |         }
35 |     }
36 | </style>
37 | 
38 | <table cellpadding="0" cellspacing="0">
39 |     <tr>
40 |         <td class="pattern" width="600" style="background: #d8d8d8;">
41 |             <table cellpadding="0" cellspacing="0">
42 |                 <% 4.times do %>
43 |                 <tr>
44 |                     <td class="product" style="padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 20px;">
45 |                         <table cellpadding="0" cellspacing="0">
46 |                             <tr>
47 |                                 <td class="product_image_small" style="display: none; width: 0; height: 0; max-height: 0; overflow: hidden; float: left;">
48 |                                     <img src="http://placehold.it/400x180" alt="" style="display: none; border: 0;" />
49 |                                 </td>
50 |                             </tr>
51 |                             <tr>
52 |                                 <td class="product_description" width="285" align="left">
53 |                                     <table cellpadding="0" cellspacing="0">
54 |                                         <tr>
55 |                                             <td align="left" style="font-family: arial,sans-serif; font-size: 16px; color: #333; padding-right: 20px;">
56 |                                                 This is a Product Title<br />
57 |                                                 <strong style="font-size: 20px; color: #d21a22;">$XXXX.XX</strong><br />
58 |                                                 <span style="font-size: 12px;">product description here</span>
59 |                                             </td>
60 |                                         </tr>
61 |                                     </table>
62 |                                 </td>
63 |                                 <td class="product_image" width="285"><img src="http://placehold.it/400x180" width="285" alt="" style="display: block; border: 0;" /></td>
64 |                             </tr>
65 |                         </table>
66 |                     </td>
67 |                 </tr>
68 |                 <% end %>
69 |             </table>
70 |         </td>
71 |     </tr>
72 | </table>


--------------------------------------------------------------------------------
/source/patterns/lists/list-with-thumbnails-and-summary-hide.html.erb:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Responsive Email Patterns
 3 | layout: pattern
 4 | pattern_name: "List With Thumbnails &amp; Summary Hide"
 5 | pattern_desc: "List items start out as a single column with a thumbnail on the left and description on the right, at a specified breakpoint the description text is hidden leaving only the title and cta. The thumbnail images also scale down as the screen size shrinks."
 6 | ---
 7 | 
 8 | <style>
 9 | 	/* List with Thumbnails & Summary Hide Pattern CSS */
10 | 	@media only screen and (max-width: 599px) {
11 |         td[class="pattern"] img,
12 |         td[class="pattern"] table { width: 100%; }
13 |         td[class="pattern"] img {
14 |             width: 100%;
15 |             height: auto !important;
16 |         }
17 |         td[class="pattern"] .col td {
18 |             width: 70%;
19 |             padding-right: 0 !important;
20 |         }
21 |         td[class="pattern"] .col td:first-child {
22 |             width: 30%;
23 |         }
24 | 	}
25 |     @media only screen and (max-width: 450px) {
26 |         td[class="pattern"] .col p { display: none; }
27 |     }
28 | </style>
29 | 
30 | <table cellpadding="0" cellspacing="0">
31 |     <tr>
32 |         <td class="pattern" width="600">
33 |             <table cellpadding="0" cellspacing="0">
34 |                 <tr class="row">
35 |                     <td class="col" valign="top" width="600" style="padding-bottom: 20px;">
36 |                         <table cellpadding="0" cellspacing="0">
37 |                             <tr>
38 |                                 <td align="left" valign="top">
39 |                                     <img src="http://placehold.it/160x160/333333&text=Thumbnail" alt="" style="display: block; border: 0;" />
40 |                                 </td>
41 |                                 <td align="left" valign="middle" style="font-family: arial,sans-serif; font-size: 16px; color: #333; padding: 0 16px;">
42 |                                     <strong style="line-height: 30px !important;">Title of Content</strong>
43 |                                     <p id="description" style="padding-bottom: 10px; font-size: 14px;">
44 |                                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at nibh nulla, sed vestibulum mauris. Maecenas et justo et massa adipiscing pretium. Aliquam erat volutpat.
45 |                                     </p>
46 |                                     <a href="#" style="display: block; text-decoration: none; font-weight: bold;">Read More »</a>
47 |                                 </td>
48 |                             </tr>
49 |                         </table>
50 |                     </td>
51 |                 </tr>
52 |                 <tr class="row">
53 |                     <td class="col" valign="top" width="600" style="padding-bottom: 20px;">
54 |                         <table cellpadding="0" cellspacing="0">
55 |                             <tr>
56 |                                 <td align="left" valign="top">
57 |                                     <img src="http://placehold.it/160x160/333333&text=Thumbnail" alt="" style="display: block; border: 0;" />
58 |                                 </td>
59 |                                 <td align="left" valign="middle" style="font-family: arial,sans-serif; font-size: 16px; color: #333; padding: 0 16px;">
60 |                                     <strong style="line-height: 30px !important;">Title of Content</strong>
61 |                                     <p id="description" style="padding-bottom: 10px; font-size: 14px;">
62 |                                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at nibh nulla, sed vestibulum mauris. Maecenas et justo et massa adipiscing pretium. Aliquam erat volutpat.
63 |                                     </p>
64 |                                     <a href="#" style="display: block; text-decoration: none; font-weight: bold;">Read More »</a>
65 |                                 </td>
66 |                             </tr>
67 |                         </table>
68 |                     </td>
69 |                 </tr>
70 |                 <tr class="row">
71 |                     <td class="col" valign="top" width="600">
72 |                         <table cellpadding="0" cellspacing="0">
73 |                             <tr>
74 |                                 <td align="left" valign="top">
75 |                                     <img src="http://placehold.it/160x160/333333&text=Thumbnail" alt="" style="display: block; border: 0;" />
76 |                                 </td>
77 |                                 <td align="left" valign="middle" style="font-family: arial,sans-serif; font-size: 16px; color: #333; padding: 0 16px;">
78 |                                     <strong style="line-height: 30px !important;">Title of Content</strong>
79 |                                     <p id="description" style="padding-bottom: 10px; font-size: 14px;">
80 |                                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at nibh nulla, sed vestibulum mauris. Maecenas et justo et massa adipiscing pretium. Aliquam erat volutpat.
81 |                                     </p>
82 |                                     <a href="#" style="display: block; text-decoration: none; font-weight: bold;">Read More »</a>
83 |                                 </td>
84 |                             </tr>
85 |                         </table>
86 |                     </td>
87 |                 </tr>
88 |             </table>
89 |         </td>
90 |     </tr>
91 | </table>


--------------------------------------------------------------------------------
/source/patterns/lists/list-with-thumbnails-and-summary-stack.erb:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Responsive Email Patterns
  3 | layout: pattern
  4 | pattern_name: "List With Thumbnails &amp; Summary Stack"
  5 | pattern_desc: "List items start out as a single column with a thumbnail on the left and description on the right, at a specified breakpoint the summary stacks below the thumbnail. The thumbnail images also scale down as the screen size shrinks."
  6 | ---
  7 | 
  8 | <style>
  9 | 	/* List with Thumbnails & Summary Stacked Pattern CSS */
 10 | 	@media only screen and (max-width: 599px) {
 11 |         td[class="pattern"] table { width: 100%; }
 12 |         td[class="pattern"] img {
 13 |             width: 100%;
 14 |             height: auto !important;
 15 |         }
 16 |         td[class="pattern"] .col td {
 17 |             width: 70%;
 18 |             padding-right: 0 !important;
 19 |         }
 20 |         td[class="pattern"] .col td:first-child {
 21 |             width: 30%;
 22 |         }
 23 | 	}
 24 |     @media only screen and (max-width: 450px) {
 25 |         td[class="pattern"] img { width: 160px; margin: 0 auto; }
 26 |         td[class="pattern"] .col td,
 27 |         td[class="pattern"] .col td:first-child {
 28 |             width: 100%;
 29 |             display: block;
 30 |             text-align: center;
 31 |             -moz-box-sizing: border-box;
 32 |             -webkit-box-sizing: border-box;
 33 |             box-sizing: border-box;
 34 |         }
 35 |         td[class="pattern"] td.description {
 36 |             padding: 10px 18px 20px 18px !important;
 37 |         }
 38 |         td[class="pattern"] td.description strong {
 39 |             font-size: 20px;
 40 |         }
 41 |     }
 42 | </style>
 43 | 
 44 | <table cellpadding="0" cellspacing="0">
 45 |     <tr>
 46 |         <td class="pattern" width="600">
 47 |             <table cellpadding="0" cellspacing="0">
 48 |                 <tr class="row">
 49 |                     <td class="col" valign="top" width="600" style="padding-bottom: 20px;">
 50 |                         <table cellpadding="0" cellspacing="0">
 51 |                             <tr>
 52 |                                 <td align="left" valign="top">
 53 |                                     <img src="http://placehold.it/160x160/333333&text=Thumbnail" alt="" style="display: block; border: 0;" />
 54 |                                 </td>
 55 |                                 <td class="description" align="left" valign="middle" style="font-family: arial,sans-serif; font-size: 16px; color: #333; padding: 0 16px;">
 56 |                                     <strong style="line-height: 30px !important;">Title of Content</strong>
 57 |                                     <p style="padding-bottom: 10px; font-size: 14px;">
 58 |                                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at nibh nulla, sed vestibulum mauris. Maecenas et justo et massa adipiscing pretium. Aliquam erat volutpat.
 59 |                                     </p>
 60 |                                     <a href="#" style="display: block; text-decoration: none; font-weight: bold;">Read More »</a>
 61 |                                 </td>
 62 |                             </tr>
 63 |                         </table>
 64 |                     </td>
 65 |                 </tr>
 66 |                 <tr class="row">
 67 |                     <td class="col" valign="top" width="600" style="padding-bottom: 20px;">
 68 |                         <table cellpadding="0" cellspacing="0">
 69 |                             <tr>
 70 |                                 <td align="left" valign="top">
 71 |                                     <img src="http://placehold.it/160x160/333333&text=Thumbnail" alt="" style="display: block; border: 0;" />
 72 |                                 </td>
 73 |                                 <td class="description" align="left" valign="middle" style="font-family: arial,sans-serif; font-size: 16px; color: #333; padding: 0 16px;">
 74 |                                     <strong style="line-height: 30px !important;">Title of Content</strong>
 75 |                                     <p style="padding-bottom: 10px; font-size: 14px;">
 76 |                                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at nibh nulla, sed vestibulum mauris. Maecenas et justo et massa adipiscing pretium. Aliquam erat volutpat.
 77 |                                     </p>
 78 |                                     <a href="#" style="display: block; text-decoration: none; font-weight: bold;">Read More »</a>
 79 |                                 </td>
 80 |                             </tr>
 81 |                         </table>
 82 |                     </td>
 83 |                 </tr>
 84 |                 <tr class="row">
 85 |                     <td class="col" valign="top" width="600">
 86 |                         <table cellpadding="0" cellspacing="0">
 87 |                             <tr>
 88 |                                 <td align="left" valign="top">
 89 |                                     <img src="http://placehold.it/160x160/333333&text=Thumbnail" alt="" style="display: block; border: 0;" />
 90 |                                 </td>
 91 |                                 <td class="description" align="left" valign="middle" style="font-family: arial,sans-serif; font-size: 16px; color: #333; padding: 0 16px;">
 92 |                                     <strong style="line-height: 30px !important;">Title of Content</strong>
 93 |                                     <p style="padding-bottom: 10px; font-size: 14px;">
 94 |                                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at nibh nulla, sed vestibulum mauris. Maecenas et justo et massa adipiscing pretium. Aliquam erat volutpat.
 95 |                                     </p>
 96 |                                     <a href="#" style="display: block; text-decoration: none; font-weight: bold;">Read More »</a>
 97 |                                 </td>
 98 |                             </tr>
 99 |                         </table>
100 |                     </td>
101 |                 </tr>
102 |             </table>
103 |         </td>
104 |     </tr>
105 | </table>


--------------------------------------------------------------------------------
/source/patterns/lists/list-with-thumbnails-v2.erb:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Responsive Email Patterns
  3 | layout: pattern
  4 | pattern_name: "List With Thumbnails v2"
  5 | pattern_desc: "List items start out as a two column layout and stack to a single column. The thumbnail images also scale down as the screen size shrinks."
  6 | ---
  7 | 
  8 | <style>
  9 | 	/* List with Thumbnails V2 Pattern CSS */
 10 | 	@media only screen and (max-width: 599px) {
 11 |         td[class="pattern"] table { width: 100%; }
 12 |         td[class="pattern"] img {
 13 |             width: 100%;
 14 |             height: auto !important;
 15 |         }
 16 |         td[class="pattern"] .col {
 17 |             width: 48%;
 18 |         }
 19 |         td[class="pattern"] .col:first-child {
 20 |             margin-right: 4%;
 21 |         }
 22 |         td[class="pattern"] .col td {
 23 |             width: 70%;
 24 |             padding-right: 0 !important;
 25 |         }
 26 |         td[class="pattern"] .col td:first-child {
 27 |             width: 30%;
 28 |         }
 29 | 	}
 30 |     @media only screen and (max-width: 520px) {
 31 |         td[class="pattern"] .col {
 32 |             width: 100%;
 33 |             display: block;
 34 |             padding-bottom: 0 !important;
 35 |             margin-bottom: 20px;
 36 |         }
 37 |         td[class="pattern"] .col:first-child {
 38 |             margin-right: 0;
 39 |         }
 40 |         td[class="pattern"] .row:last-child .col:last-child { margin-bottom: 0; }
 41 |     }
 42 | </style>
 43 | 
 44 | <table cellpadding="0" cellspacing="0">
 45 |     <tr>
 46 |         <td class="pattern" width="600">
 47 |             <table cellpadding="0" cellspacing="0">
 48 |                 <tr class="row">
 49 |                     <td class="col" valign="top" width="300" style="padding-bottom: 20px;">
 50 |                         <table cellpadding="0" cellspacing="0">
 51 |                             <tr>
 52 |                                 <td align="left">
 53 |                                     <img src="http://placehold.it/120x120/333333&text=Thumbnail" alt="" style="display: block; border: 0;" />
 54 |                                 </td>
 55 |                                 <td align="left" style="font-family: arial,sans-serif; font-size: 16px; color: #333; padding: 0 16px;">
 56 |                                     <strong style="line-height: 30px !important;">Title of Content</strong><br />
 57 |                                     Summary of content
 58 |                                 </td>
 59 |                             </tr>
 60 |                         </table>
 61 |                     </td>
 62 |                     <td class="col" valign="top" width="300" style="padding-bottom: 20px;">
 63 |                         <table cellpadding="0" cellspacing="0">
 64 |                             <tr>
 65 |                                 <td align="left">
 66 |                                     <img src="http://placehold.it/120x120/333333&text=Thumbnail" alt="" style="display: block; border: 0;" />
 67 |                                 </td>
 68 |                                 <td align="left" style="font-family: arial,sans-serif; font-size: 16px; color: #333; padding: 0 0 0 16px;">
 69 |                                     <strong style="line-height: 30px !important;">Title of Content</strong><br />
 70 |                                     Summary of content
 71 |                                 </td>
 72 |                             </tr>
 73 |                         </table>
 74 |                     </td>
 75 |                 </tr>
 76 |                 <tr class="row">
 77 |                     <td class="col" width="300">
 78 |                         <table cellpadding="0" cellspacing="0">
 79 |                             <tr>
 80 |                                 <td align="left">
 81 |                                     <img src="http://placehold.it/120x120/333333&text=Thumbnail" alt="" style="display: block; border: 0;" />
 82 |                                 </td>
 83 |                                 <td align="left" style="font-family: arial,sans-serif; font-size: 16px; color: #333; padding: 0 16px;">
 84 |                                     <strong style="line-height: 30px !important;">Title of Content</strong><br />
 85 |                                     Summary of content
 86 |                                 </td>
 87 |                             </tr>
 88 |                         </table>
 89 |                     </td>
 90 |                     <td class="col" width="300">
 91 |                         <table cellpadding="0" cellspacing="0">
 92 |                             <tr>
 93 |                                 <td align="left">
 94 |                                     <img src="http://placehold.it/120x120/333333&text=Thumbnail" alt="" style="display: block; border: 0;" />
 95 |                                 </td>
 96 |                                 <td align="left" style="font-family: arial,sans-serif; font-size: 16px; color: #333; padding: 0 0 0 16px;">
 97 |                                     <strong style="line-height: 30px !important;">Title of Content</strong><br />
 98 |                                     Summary of content
 99 |                                 </td>
100 |                             </tr>
101 |                         </table>
102 |                     </td>
103 |                 </tr>
104 |             </table>
105 |         </td>
106 |     </tr>
107 | </table>


--------------------------------------------------------------------------------
/source/patterns/lists/list-with-thumbnails.erb:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Responsive Email Patterns
  3 | layout: pattern
  4 | pattern_name: "List With Thumbnails"
  5 | pattern_desc: "List items start out as a single row and reflow to a two column layout. The thumbnail images also scale down as the screen size shrinks."
  6 | ---
  7 | 
  8 | <style>
  9 | 	/* List with Thumbnails Pattern CSS */
 10 | 	@media only screen and (max-width: 599px) {
 11 |         td[class="pattern"] img {
 12 |             width: 100%;
 13 |             height: auto !important;
 14 |         }
 15 |         td[class="pattern"] .col {
 16 |             width: 25%;
 17 |         }
 18 | 	}
 19 |     @media only screen and (max-width: 430px) {
 20 |         td[class="pattern"] .col {
 21 |             width: 50%;
 22 |             float: left;
 23 |             margin-bottom: 20px;
 24 |             -moz-box-sizing: border-box;
 25 |             -webkit-box-sizing: border-box;
 26 |             box-sizing: border-box;
 27 |         }
 28 |         td[class="pattern"] .col table,
 29 |         td[class="pattern"] .col img { width: 100%; }
 30 |     }
 31 |     @media only screen and (max-width: 380px) {
 32 |         td[class="pattern"] .col {
 33 |             width: 100%;
 34 |             display: block;
 35 |             float: none;
 36 |             padding: 0 !important;
 37 |         }
 38 |         td[class="pattern"] .col tr {
 39 |             display: table-cell;
 40 |             width: 60%;
 41 |         }
 42 |         td[class="pattern"] .col tr:first-child {
 43 |             width: 40%;
 44 |             padding-right: 20px;
 45 |         }
 46 |         td[class="pattern"] .col td {
 47 |             font-size: 16px !important;
 48 |         }
 49 |     }
 50 | </style>
 51 | 
 52 | <table cellpadding="0" cellspacing="0">
 53 |     <tr>
 54 |         <td class="pattern" width="600">
 55 |             <table cellpadding="0" cellspacing="0">
 56 |                 <tr>
 57 |                     <td class="col" width="140" style="padding: 0 5px;">
 58 |                         <table cellpadding="0" cellspacing="0">
 59 |                             <tr>
 60 |                                 <td align="left"><img src="http://placehold.it/190x190/333333&text=Thumbnail" width="140" alt="" style="display: block; border: 0;" /></td>
 61 |                             </tr>
 62 |                             <tr>
 63 |                                 <td align="left" style="font-family: arial,sans-serif; font-size: 14px; color: #333; padding-top: 10px;">
 64 |                                     <strong>Title of Content</strong><br />
 65 |                                     Summary of content
 66 |                                 </td>
 67 |                             </tr>
 68 |                         </table>
 69 |                     </td>
 70 |                     <td class="col" width="140" style="padding: 0 5px;">
 71 |                         <table cellpadding="0" cellspacing="0">
 72 |                             <tr>
 73 |                                 <td align="left"><img src="http://placehold.it/190x190/333333&text=Thumbnail" width="140" alt="" style="display: block; border: 0;" /></td>
 74 |                             </tr>
 75 |                             <tr>
 76 |                                 <td align="left" style="font-family: arial,sans-serif; font-size: 14px; color: #333; padding-top: 10px;">
 77 |                                     <strong>Title of Content</strong><br />
 78 |                                     Summary of content
 79 |                                 </td>
 80 |                             </tr>
 81 |                         </table>
 82 |                     </td>
 83 |                     <td class="col" width="140" style="padding: 0 5px;">
 84 |                         <table cellpadding="0" cellspacing="0">
 85 |                             <tr>
 86 |                                 <td align="left"><img src="http://placehold.it/190x190/333333&text=Thumbnail" width="140" alt="" style="display: block; border: 0;" /></td>
 87 |                             </tr>
 88 |                             <tr>
 89 |                                 <td align="left" style="font-family: arial,sans-serif; font-size: 14px; color: #333; padding-top: 10px;">
 90 |                                     <strong>Title of Content</strong><br />
 91 |                                     Summary of content
 92 |                                 </td>
 93 |                             </tr>
 94 |                         </table>
 95 |                     </td>
 96 |                     <td class="col" width="140" style="padding: 0 5px;">
 97 |                         <table cellpadding="0" cellspacing="0">
 98 |                             <tr>
 99 |                                 <td align="left"><img src="http://placehold.it/190x190/333333&text=Thumbnail" width="140" alt="" style="display: block; border: 0;" /></td>
100 |                             </tr>
101 |                             <tr>
102 |                                 <td align="left" style="font-family: arial,sans-serif; font-size: 14px; color: #333; padding-top: 10px;">
103 |                                     <strong>Title of Content</strong><br />
104 |                                     Summary of content
105 |                                 </td>
106 |                             </tr>
107 |                         </table>
108 |                     </td>
109 |                 </tr>
110 |             </table>
111 |         </td>
112 |     </tr>
113 | </table>


--------------------------------------------------------------------------------
/source/patterns/media/basic-fluid-image.html.erb:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Responsive Email Patterns
 3 | layout: pattern
 4 | pattern_name: "Basic Fluid Image"
 5 | pattern_desc: "The simplest tactic for dealing with responsive images. The image is set to a maximum width of 100% of it's container and simply scales down as the screen size shrinks."
 6 | ---
 7 | 
 8 | <style>
 9 | 	/* Basic Fluid Image Pattern CSS */
10 |     @media only screen and (max-width: 599px) {
11 |         img.pattern {
12 |             max-width: 100%;
13 |             height: auto !important;
14 |         }
15 |     }
16 | </style>
17 | 
18 | <img class="pattern" src="spain.jpg" alt="Spain" width="600" height="450" style="display: block; border: 0;" />


--------------------------------------------------------------------------------
/source/patterns/media/connecting-fallback.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/briangraves/ResponsiveEmailPatterns/99c12fd3bb2a74abf869cdc47408c18c8ec9db46/source/patterns/media/connecting-fallback.jpg


--------------------------------------------------------------------------------
/source/patterns/media/description-overlay-bottom.html.erb:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Responsive Email Patterns
 3 | layout: pattern
 4 | pattern_name: "Description Overlay Bottom"
 5 | pattern_desc: "An image with a description overlayed on the bottom of the image. As the screen size narrows the image scales and the text in the description container reflows."
 6 | ---
 7 | 
 8 | <style>
 9 |   /* Description Overlay Pattern CSS */
10 |    @media only screen and (max-width: 599px) {
11 |             table { width: 100%; }
12 |             td[class=container] {
13 |                 background-size: auto 100%;
14 |                 background-position: center top;
15 |                 width: 100%;
16 |                 height: auto;
17 |                 min-height: 200px;
18 |                 padding-top: 100px !important;
19 |             }
20 |             td[class=spacer] { display: none; height: 0;}
21 |         }
22 | </style>
23 | 
24 | <table cellpadding="0" cellspacing="0">
25 |     <tr>
26 |         <td class="container" background="lindsey.jpg" width="600" height="448" style="background-position: center top;">
27 |           <!--[if gte mso 9]>
28 |           <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:448px;">
29 |             <v:fill type="tile" src="lindsey.jpg" color="#ff0000" />
30 |             <v:textbox inset="0,0,0,0">
31 |           <![endif]-->
32 |           <table cellpadding="0" cellspacing="0">
33 |               <tr>
34 |                   <td class="spacer" height="298">&nbsp;</td>
35 |               </tr>
36 |               <tr>
37 |                   <td class="inner-container" width="600" height="150" align="left" valign="top" style="background-color: #ccc; background: rgba(30,30,30,0.7);">
38 |                       <table cellpadding="0" cellspacing="0">
39 |                           <tr>
40 |                               <td align="left" style="padding: 14px 16px 10px 16px; font-family: arial,sans-serif; font-size: 16px; line-height: 22px; color: #fff;">
41 |                                   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, nisi, quis, at, magnam magni maiores pariatur eos ullam consectetur excepturi alias sed! Debitis, iusto, minima atque reiciendis in aut eaque!
42 |                               </td>
43 |                           </tr>
44 |                           <tr>
45 |                               <td align="right" style="padding: 0 16px 14px 16px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
46 |                                   <a href="#" style="text-decoration: none; color: #fff; display: block; padding: 0 5px; width: 100px; text-align: center; line-height: 40px; background: #b61528;">CTA ></a>
47 |                               </td>
48 |                           </tr>
49 |                       </table>
50 |                   </td>
51 |               </tr>
52 |           </table>
53 |           <!--[if gte mso 9]>
54 |             </v:textbox>
55 |           </v:rect>
56 |           <![endif]-->
57 |         </td>
58 |     </tr>
59 | </table>


--------------------------------------------------------------------------------
/source/patterns/media/description-overlay-right.html.erb:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Responsive Email Patterns
 3 | layout: pattern
 4 | pattern_name: "Description Overlay Right"
 5 | pattern_desc: ""
 6 | ---
 7 | 
 8 | <style>
 9 |   /* Description Overlay Right Pattern CSS */
10 |   @media only screen and (max-width: 599px) {
11 |         div[class="wrapper"] {
12 |           position: relative;
13 |           overflow: hidden;
14 |           width: 100%;
15 |           height: 450px;
16 |         }
17 |         div[class="wrapper"] img {
18 |           position: absolute;
19 |           top: 0;
20 |           left: 50%;
21 |           margin-left: -202px;
22 |         }
23 |     }
24 | </style>
25 | 
26 | <table cellpadding="0" cellspacing="0" class="container" style="position: relative;">
27 |   <tr>
28 |     <td class="col hero" width="404" align="left" valign="top" style="background: #fff;">
29 |       <div class="wrapp">
30 |         <img src="meat.jpg" alt="" width="404" style="display: block; border: 0;">
31 |       </div>
32 |     </td>
33 |     <td class="col" width="216" align="left" style="background-color: #ccc; background: rgba(30,30,30,0.7); position: relative;">
34 |       <table cellpadding="0" cellspacing="0">
35 |         <tr>
36 |           <td style="padding: 20px;">
37 |             <table cellpadding="0" cellspacing="0">
38 |               <tr>
39 |                 <td align="left" style="font-family: arial,sans-serif; font-size: 16px; line-height: 22px; color: #fff;">
40 |                   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero repellat placeat excepturi omnis quae laboriosam nesciunt.
41 |                 </td>
42 |               </tr>
43 |               <tr>
44 |                 <td align="left" style="padding-top: 15px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
45 |                   <a href="#" style="text-decoration: none; color: #fff; display: block; padding: 0 5px; width: 100px; text-align: center; line-height: 40px; background: #b61528;">CTA ></a>
46 |                 </td>
47 |               </tr>
48 |             </table>
49 |           </td>
50 |         </tr>
51 |       </table>
52 |     </td>
53 |   </tr>
54 | </table>


--------------------------------------------------------------------------------
/source/patterns/media/espana_alleyway.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/briangraves/ResponsiveEmailPatterns/99c12fd3bb2a74abf869cdc47408c18c8ec9db46/source/patterns/media/espana_alleyway.jpg


--------------------------------------------------------------------------------
/source/patterns/media/fluid-video.html.erb:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Responsive Email Patterns
 3 | layout: pattern
 4 | pattern_name: "Fluid Video"
 5 | pattern_desc: "An embedded HTML5 video that scales appropriately according to screen size. Will also fallback safely to a linked image for clients that don't support embedded video."
 6 | ---
 7 | 
 8 | <style>
 9 | 	/* Fluid Video Media Pattern CSS */
10 |    @media only screen and (max-width: 599px) {
11 |        div[class="pattern"] video,
12 |        div[class="pattern"] img
13 |        {
14 |            width: 100%;
15 |            height: auto !important;
16 |        }
17 |    }
18 | </style>
19 | 
20 | <div class="pattern">
21 |   <video style="padding: 0px; margin: 0px; display: block;" poster="http://b.vimeocdn.com/ts/364/865/364865123_960.jpg" controls="controls" height="337" width="600">
22 |       <source src="http://player.vimeo.com/play_redirect?quality=hd&amp;codecs=h264&amp;clip_id=52861634&amp;time=1361256207&amp;sig=21d65c6cd03979983f6efa864c746c06&amp;type=html5_desktop_local" type="video/mp4"></source>
23 |       <source type="video/ogg" src=""></source>
24 |       <source type="video/webm" src=""></source>
25 | 
26 |       <a href="http://vimeo.com/52861634"><img style="display: block;" border="0" src="connecting-fallback.jpg" width="600" height="337" label="Fallback Image" /></a>
27 |   </video>
28 | </div>


--------------------------------------------------------------------------------
/source/patterns/media/image-center-crop.html.erb:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Responsive Email Patterns
 3 | layout: pattern
 4 | pattern_name: "Image Center Crop"
 5 | pattern_desc: "An image that stays it's original size and is simply cropped equaly from the left and right as the width of it's parent container changes."
 6 | ---
 7 | 
 8 | <style>
 9 | 	/* Image Center Crop Pattern CSS */
10 |     @media only screen and (max-width: 599px) {
11 |         div[class="pattern"] {
12 | 			position: relative;
13 | 			overflow: hidden;
14 | 			width: 100%;
15 | 			height: 450px;
16 |         }
17 |         div[class="pattern"] img {
18 |         	position: absolute;
19 |         	top: 0;
20 |         	left: 50%;
21 |         	margin-left: -300px;
22 |         }
23 |     }
24 | </style>
25 | 
26 | <div class="pattern">
27 | 	<img src="tattoos.jpg" alt="Tattoo &amp; Piercing" width="600" height="450" style="display: block; border: 0;" />
28 | </div>


--------------------------------------------------------------------------------
/source/patterns/media/image-grid.html.erb:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Responsive Email Patterns
 3 | layout: pattern
 4 | pattern_name: "Image Grid"
 5 | pattern_desc: "A grid of equal size images that scale equaly as the viewport width changes."
 6 | ---
 7 | 
 8 | <style>
 9 | 	/* Fluid Image Grid Pattern CSS */
10 |     @media only screen and (max-width: 599px) {
11 |         td[class="pattern-grid"] img{
12 |             width: 100% !important;
13 |             height: auto !important;
14 |         }
15 |         td[class="pattern-grid"] td {
16 |             display: block;
17 |             float: left;
18 |             width: 25%;
19 |         }
20 |     }
21 |     @media only screen and (max-width: 520px) {
22 |         td[class="grid"] td { width: 50%; }
23 |     }
24 |     @media only screen and (max-width: 350px) {
25 |         td[class="grid"] td { width: 100%; }
26 |     }
27 | </style>
28 | 
29 | <table cellpadding="0" cellspacing="0">
30 |     <tr>
31 |         <td class="pattern-grid" width="600">
32 |             <table cellpadding="0" cellspacing="0" width="100%">
33 |                 <% 3.times do %>
34 |                 <tr>
35 |                     <% 4.times do %>
36 |                     <td><img src="souk.jpg" alt="Moroccan souk" width="150" style="display: block; border: 0;" /></td>
37 |                     <% end %>
38 |                 </tr>
39 |                 <% end %>
40 |             </table>
41 |         </td>
42 |     </tr>
43 | </table>


--------------------------------------------------------------------------------
/source/patterns/media/image-left-crop.html.erb:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Responsive Email Patterns
 3 | layout: pattern
 4 | pattern_name: "Image Left Crop"
 5 | pattern_desc: "An image that stays it's original size and is cropped from the left as the width of it's parent container changes."
 6 | ---
 7 | 
 8 | <style>
 9 | 	/* Image Left Crop Pattern CSS */
10 |     @media only screen and (max-width: 599px) {
11 |         div[class="pattern"] {
12 | 			position: relative;
13 | 			overflow: hidden;
14 | 			width: 100%;
15 | 			height: 450px;
16 |         }
17 |         div[class="pattern"] img {
18 |         	position: absolute;
19 |         	top: 0;
20 |         	right: 0;
21 |         }
22 |     }
23 | </style>
24 | 
25 | <div class="pattern">
26 | 	<img src="spain.jpg" alt="Spain" width="600" height="450" style="display: block; border: 0;" />
27 | </div>


--------------------------------------------------------------------------------
/source/patterns/media/image-right-crop.html.erb:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Responsive Email Patterns
 3 | layout: pattern
 4 | pattern_name: "Image Right Crop"
 5 | pattern_desc: "An image that stays it's original size and is cropped from the right as the width of it's parent container changes."
 6 | ---
 7 | 
 8 | <style>
 9 | 	/* Image Right Crop Pattern CSS */
10 |     @media only screen and (max-width: 599px) {
11 |         div[class="pattern"] {
12 | 			position: relative;
13 | 			overflow: hidden;
14 | 			width: 100%;
15 | 			height: 450px;
16 |         }
17 |         div[class="pattern"] img {
18 |         	position: absolute;
19 |         	top: 0;
20 |         	left: 0;
21 |         }
22 |     }
23 | </style>
24 | 
25 | <div class="pattern">
26 | 	<img src="spain.jpg" alt="Spain" width="600" height="450" style="display: block; border: 0;" />
27 | </div>


--------------------------------------------------------------------------------
/source/patterns/media/image-vertical-crop.html.erb:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Responsive Email Patterns
 3 | layout: pattern
 4 | pattern_name: "Image Vertical Crop"
 5 | pattern_desc: "An image that stays it's original size and is simply cropped from the bottom as the height of the screen gets shorter."
 6 | ---
 7 | 
 8 | <style>
 9 | 	/* Image Vertical Crop Pattern CSS */
10 |     @media only screen and (max-width: 599px) {
11 |         div[class="pattern"] {
12 | 			position: relative;
13 | 			overflow: hidden;
14 | 			width: 100%;
15 |             -webkit-transition: height .5s ease-out;
16 |             -moz-transition: height .5s ease-out;
17 |             -ms-transition: height .5s ease-out;
18 |             -o-transition: height .5s ease-out;
19 |             transition: height .5s ease-out;
20 |         }
21 |         div[class="pattern"] img {
22 |         	position: absolute;
23 |         	bottom: 0;
24 |         	left: 50%;
25 |         	margin-left: -225px;
26 |         }
27 |     }
28 |     @media only screen and (max-width: 599px) and (max-height: 700px) {
29 |         div[class="pattern"] { height: 560px !important; }
30 |         div[class="pattern"] img { bottom: -26px; }
31 |     }
32 |     @media only screen and (max-width: 599px) and (max-height: 600px) {
33 |         div[class="pattern"] { height: 460px !important; }
34 |         div[class="pattern"] img { bottom: -26px; }
35 |     }
36 |     @media only screen and (max-width: 599px) and (max-height: 500px) {
37 |         div[class="pattern"] { height: 360px !important; }
38 |         div[class="pattern"] img { bottom: -40px; }
39 |     }
40 | </style>
41 | 
42 | <table cellpadding="0" cellspacing="0">
43 |     <tr>
44 |         <td width="600" align="center">
45 |             <div class="pattern" style="height: 660px;">
46 |                 <img src="espana_alleyway.jpg" alt="Espana" width="450" height="660" style="display: block; border: 0;" />
47 |             </div>
48 |         </td>
49 |     </tr>
50 | </table>


--------------------------------------------------------------------------------
/source/patterns/media/lindsey.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/briangraves/ResponsiveEmailPatterns/99c12fd3bb2a74abf869cdc47408c18c8ec9db46/source/patterns/media/lindsey.jpg


--------------------------------------------------------------------------------
/source/patterns/media/meat.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/briangraves/ResponsiveEmailPatterns/99c12fd3bb2a74abf869cdc47408c18c8ec9db46/source/patterns/media/meat.jpg


--------------------------------------------------------------------------------
/source/patterns/media/souk.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/briangraves/ResponsiveEmailPatterns/99c12fd3bb2a74abf869cdc47408c18c8ec9db46/source/patterns/media/souk.jpg


--------------------------------------------------------------------------------
/source/patterns/media/spain.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/briangraves/ResponsiveEmailPatterns/99c12fd3bb2a74abf869cdc47408c18c8ec9db46/source/patterns/media/spain.jpg


--------------------------------------------------------------------------------
/source/patterns/media/tattoos.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/briangraves/ResponsiveEmailPatterns/99c12fd3bb2a74abf869cdc47408c18c8ec9db46/source/patterns/media/tattoos.jpg


--------------------------------------------------------------------------------
/source/patterns/navigation/drop-below.html.erb:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Responsive Email Patterns
 3 | layout: pattern
 4 | pattern_name: "Drop Below"
 5 | pattern_desc: "Navigation begins as a single row at the top of the layout. At a specified breakpoint, the entire nav drops from the top and moves down to a stacked layout below the main message."
 6 | type: "navigation"
 7 | ---
 8 | <style>
 9 |     /* Drop Below Navigation Pattern CSS */
10 |     .main_cta img { max-width: 100%; }
11 |     @media only screen and (max-width: 500px) {
12 |         table[class=pattern] .main_nav {
13 |             display: table-footer-group;
14 |         }
15 |         table[class=pattern] .main_nav td td {
16 |             display: inline-block;
17 |             width: 50%;
18 |             -moz-box-sizing: border-box;
19 |             -webkit-box-sizing: border-box;
20 |             box-sizing: border-box;
21 |         }
22 |         table[class=pattern] .main_cta {
23 |             display: table-header-group;
24 |         }
25 |         table[class=pattern] .main_cta td {
26 |             padding-top: 16px;
27 |         }
28 |     }
29 | 
30 | </style>
31 | 
32 | <table cellpadding="0" cellspacing="0" class="pattern">
33 |     <tr class="main_nav">
34 |         <td width="600">
35 |             <table cellpadding="0" cellspacing="0" width="100%">
36 |                 <tr>
37 |                     <td align="center" style="padding: 15px 20px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
38 |                         <a href="#" style="text-decoration: none; color: #999999;">Nav 1</a>
39 |                     </td>
40 |                     <td align="center" style="padding: 15px 20px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
41 |                         <a href="#" style="text-decoration: none; color: #999999;">Nav 2</a>
42 |                     </td>
43 |                     <td align="center" style="padding: 15px 20px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
44 |                         <a href="#" style="text-decoration: none; color: #999999;">Nav 3</a>
45 |                     </td>
46 |                     <td align="center" style="padding: 15px 20px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
47 |                         <a href="#" style="text-decoration: none; color: #999999;">Nav 4</a>
48 |                     </td>
49 |                     <td align="center" style="padding: 15px 20px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
50 |                         <a href="#" style="text-decoration: none; color: #999999;">Nav 5</a>
51 |                     </td>
52 |                     <td align="center" style="padding: 15px 20px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
53 |                         <a href="#" style="text-decoration: none; color: #999999;">Nav 6</a>
54 |                     </td>
55 |                 </tr>
56 |             </table>
57 |         </td>
58 |     </tr>
59 |     <tr class="main_cta">
60 |         <td width="600">
61 |             <img src="http://placehold.it/600x300&text=Main+CTA" alt="" style="display: block; border: 0;" />
62 |         </td>
63 |     </tr>
64 | </table>


--------------------------------------------------------------------------------
/source/patterns/navigation/footer-anchor.html.erb:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Responsive Email Patterns
 3 | layout: pattern
 4 | pattern_name: "Footer Anchor"
 5 | pattern_desc: "Navigation begins as a single row at the top of the layout. At a specified breakpoint, the entire nav drops from the top and moves down to a stacked layout below the main message. A menu or hamburger button is added at the top of the layout that anchors to the stacked menu."
 6 | type: "no-header"
 7 | ---
 8 | <style>
 9 |     .main_cta img { width: 100%; height: auto !important; }
10 | 
11 |     /* Footer Anchor Navigation Pattern CSS */
12 |     @media only screen and (max-width: 500px) {
13 |         td[id="header"] {
14 |             padding-bottom: 10px;
15 |         }
16 |         td[class="toggle"] {
17 |             display: table-cell !important;
18 |             width: auto !important;
19 |             height: auto !important;
20 |             max-width: inherit !important;
21 |             max-height: inherit !important;
22 |             float: none !important;
23 |             overflow: auto !important;
24 |             font-size: 12px !important;
25 |             font-family: arial,sans-serif;
26 |         }
27 |         td[class="toggle"] a {
28 |             display: block;
29 |             padding: 10px 0;
30 |         }
31 |         tr[class="main_nav"] {
32 |             display: table-footer-group;
33 |         }
34 |         tr[class="main_nav"] td {
35 |             display: block;
36 |             width: 100%;
37 |             padding: 0 !important;
38 |         }
39 |         tr[class="main_nav"] a {
40 |             display: block;
41 |             width: 100%;
42 |             padding: 20px 0;
43 |             border-bottom: 1px solid #999;
44 |         }
45 |         tr[class=main_cta] {
46 |             display: table-header-group;
47 |         }
48 |     }
49 | </style>
50 | 
51 | <table cellpadding="0" cellspacing="0">
52 |     <tr>
53 |         <td id="header">
54 |             <table cellpadding="0" cellspacing="0" width="100%">
55 |                 <tr>
56 |                     <td class="logo" align="left"><a href="#"><img src="http://placehold.it/156x34&text=Logo" alt="" style="display: block; border: 0;" /></a></td>
57 |                     <td align="right" class="toggle" style="display: none; width: 0; max-height: 0; max-width: 0; height: 0; overflow: hidden; float: left; font-size: 0;">
58 |                         <a href="#mobile_nav">Menu</a>
59 |                     </td>
60 |                 </tr>
61 |             </table>
62 |         </td>
63 |     </tr>
64 |     <tr class="main_nav">
65 |         <td id="mobile_nav" width="600">
66 |             <table cellpadding="0" cellspacing="0" width="100%">
67 |                 <tr>
68 |                     <td align="center" style="padding: 15px 20px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
69 |                     	<a href="#" style="text-decoration: none; color: #999999;">Nav 1</a>
70 |                     </td>
71 |                     <td align="center" style="padding: 15px 20px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
72 |                     	<a href="#" style="text-decoration: none; color: #999999;">Nav 2</a>
73 |                     </td>
74 |                     <td align="center" style="padding: 15px 20px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
75 |                     	<a href="#" style="text-decoration: none; color: #999999;">Nav 3</a>
76 |                     </td>
77 |                     <td align="center" style="padding: 15px 20px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
78 |                     	<a href="#" style="text-decoration: none; color: #999999;">Nav 4</a>
79 |                     </td>
80 |                     <td align="center" style="padding: 15px 20px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
81 |                     	<a href="#" style="text-decoration: none; color: #999999;">Nav 5</a>
82 |                     </td>
83 |                     <td align="center" style="padding: 15px 20px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
84 |                     	<a href="#" style="text-decoration: none; color: #999999;">Nav 6</a>
85 |                     </td>
86 |                 </tr>
87 |             </table>
88 |         </td>
89 |     </tr>
90 |     <tr class="main_cta">
91 |         <td>
92 |             <img src="http://placehold.it/600x300&text=Main+CTA" alt="" style="display: block; border: 0;" />
93 |         </td>
94 |     </tr>
95 | </table>


--------------------------------------------------------------------------------
/source/patterns/navigation/hide-everything.html.erb:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Responsive Email Patterns
 3 | layout: pattern
 4 | pattern_name: "Hide Everything"
 5 | pattern_desc: "Navigation begins as a single row at the top of the layout and the entire menu is hidden below a specified breakpoint."
 6 | type: "navigation"
 7 | ---
 8 | <style>
 9 |     .main_cta img { width: 100%; height: auto !important; }
10 |     
11 |     /* Hide Everything Navigation Pattern CSS */
12 |     @media only screen and (max-width: 500px) {
13 |     	td[class="main_nav"] { display: none; }
14 |         td[class="main_cta"] { padding-top: 16px; }
15 |     }
16 | </style>
17 | 
18 | <table cellpadding="0" cellspacing="0">
19 |     <tr>
20 |         <td class="main_nav" width="600">
21 |             <table cellpadding="0" cellspacing="0" width="100%">
22 |                 <tr>
23 |                     <td align="center" style="padding: 15px 20px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
24 |                         <a href="#" style="text-decoration: none; color: #999999;">Nav 1</a>
25 |                     </td>
26 |                     <td align="center" style="padding: 15px 20px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
27 |                     	<a href="#" style="text-decoration: none; color: #999999;">Nav 2</a>
28 |                     </td>
29 |                     <td align="center" style="padding: 15px 20px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
30 |                     	<a href="#" style="text-decoration: none; color: #999999;">Nav 3</a>
31 |                     </td>
32 |                     <td align="center" style="padding: 15px 20px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
33 |                     	<a href="#" style="text-decoration: none; color: #999999;">Nav 4</a>
34 |                     </td>
35 |                     <td align="center" style="padding: 15px 20px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
36 |                     	<a href="#" style="text-decoration: none; color: #999999;">Nav 5</a>
37 |                     </td>
38 |                     <td align="center" style="padding: 15px 20px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
39 |                     	<a href="#" style="text-decoration: none; color: #999999;">Nav 6</a>
40 |                     </td>
41 |                 </tr>
42 |             </table>
43 |         </td>
44 |     </tr>
45 |     <tr>
46 |         <td class="main_cta">
47 |             <img src="http://placehold.it/600x300&text=Main+CTA" alt="" style="display: block; border: 0;" />
48 |         </td>
49 |     </tr>
50 | </table>


--------------------------------------------------------------------------------
/source/patterns/navigation/reduce-v2.html.erb:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Responsive Email Patterns
 3 | layout: pattern
 4 | pattern_name: "Reduce v2"
 5 | pattern_desc: "Navigation begins as a single row at the top of the layout and items are removed from right to left as the viewport shrinks."
 6 | type: "navigation"
 7 | ---
 8 | <style>
 9 |     .main_cta img { width: 100%; height: auto !important; }
10 | 
11 |     /* Reduce Navigation Pattern CSS */
12 |     @media only screen and (max-width: 600px) {
13 |         td[class="main_nav"], td[class="main_nav"] table { 
14 |             display: block;
15 |             width: 100%;
16 |         }
17 |         td[class="main_nav"] tr { 
18 |             display: block;
19 |             height: 44px;
20 |             overflow: hidden;
21 |             text-align: center;
22 |         }
23 |         td[class="main_nav"] td { 
24 |             display: inline-block;
25 |         }
26 |     }
27 | </style>
28 | 
29 | <table cellpadding="0" cellspacing="0">
30 |     <tr>
31 |         <td class="main_nav" width="600">
32 |             <table cellpadding="0" cellspacing="0" width="100%">
33 |                 <tr>
34 |                     <td align="center" style="padding: 15px 10px; font-family: arial,sans-serif; font-size: 12px; font-weight: bold;">
35 |                         <a href="#" style="text-decoration: none; color: #999999;">Navigation 1</a>
36 |                     </td>
37 |                     <td align="center" style="padding: 15px 10px; font-family: arial,sans-serif; font-size: 12px; font-weight: bold;">
38 |                         <a href="#" style="text-decoration: none; color: #999999;">Navigation 2</a>
39 |                     </td>
40 |                     <td align="center" style="padding: 15px 10px; font-family: arial,sans-serif; font-size: 12px; font-weight: bold;">
41 |                         <a href="#" style="text-decoration: none; color: #999999;">Navigation 3</a>
42 |                     </td>
43 |                     <td align="center" style="padding: 15px 10px; font-family: arial,sans-serif; font-size: 12px; font-weight: bold;">
44 |                         <a href="#" style="text-decoration: none; color: #999999;">Navigation 4</a>
45 |                     </td>
46 |                     <td align="center" style="padding: 15px 10px; font-family: arial,sans-serif; font-size: 12px; font-weight: bold;">
47 |                         <a href="#" style="text-decoration: none; color: #999999;">Navigation 5</a>
48 |                     </td>
49 |                     <td align="center" style="padding: 15px 10px; font-family: arial,sans-serif; font-size: 12px; font-weight: bold;">
50 |                         <a href="#" style="text-decoration: none; color: #999999;">Navigation 6</a>
51 |                     </td>
52 |                 </tr>
53 |             </table>
54 |         </td>
55 |     </tr>
56 |     <tr>
57 |         <td class="main_cta" style="padding-bottom: 10px;">
58 |             <img src="http://placehold.it/600x300&text=Main+CTA" alt="" style="display: block; border: 0;" />
59 |         </td>
60 |     </tr>
61 | </table>


--------------------------------------------------------------------------------
/source/patterns/navigation/reduce.html.erb:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Responsive Email Patterns
 3 | layout: pattern
 4 | pattern_name: "Reduce"
 5 | pattern_desc: "Navigation begins as a single row at the top of the layout and specific items are removed as the viewport shrinks."
 6 | type: "navigation"
 7 | ---
 8 | <style>
 9 |     .main_cta img { width: 100%; height: auto !important; }
10 | 
11 |     /* Reduce Navigation Pattern CSS */
12 |     @media only screen and (max-width: 400px) {
13 |         td[class="nav3"] { display: none; }
14 |     }
15 |     @media only screen and (max-width: 465px) {
16 |         td[class="nav4"] { display: none; }
17 |         td[class="main_nav"] td { padding: 20px !important; }
18 |     }
19 |     @media only screen and (max-width: 500px) {
20 |         td[class="nav5"] { display: none; }
21 |         td[class="main_nav"] td { font-size: 14px !important; }
22 |     }
23 |     @media only screen and (max-width: 599px) {
24 |         td[class="nav6"] { display: none; }
25 |     }
26 | </style>
27 | 
28 | <table cellpadding="0" cellspacing="0">
29 |     <tr>
30 |         <td class="main_nav" width="600">
31 |             <table cellpadding="0" cellspacing="0" width="100%">
32 |                 <tr>
33 |                     <td align="center" style="padding: 15px 10px; font-family: arial,sans-serif; font-size: 12px; font-weight: bold;">
34 |                         <a href="#" style="text-decoration: none; color: #999999;">Navigation 1</a>
35 |                     </td>
36 |                     <td align="center" style="padding: 15px 10px; font-family: arial,sans-serif; font-size: 12px; font-weight: bold;">
37 |                         <a href="#" style="text-decoration: none; color: #999999;">Navigation 2</a>
38 |                     </td>
39 |                     <td class="nav3" align="center" style="padding: 15px 10px; font-family: arial,sans-serif; font-size: 12px; font-weight: bold;">
40 |                         <a href="#" style="text-decoration: none; color: #999999;">Navigation 3</a>
41 |                     </td>
42 |                     <td class="nav4" align="center" style="padding: 15px 10px; font-family: arial,sans-serif; font-size: 12px; font-weight: bold;">
43 |                         <a href="#" style="text-decoration: none; color: #999999;">Navigation 4</a>
44 |                     </td>
45 |                     <td class="nav5" align="center" style="padding: 15px 10px; font-family: arial,sans-serif; font-size: 12px; font-weight: bold;">
46 |                         <a href="#" style="text-decoration: none; color: #999999;">Navigation 5</a>
47 |                     </td>
48 |                     <td class="nav6" align="center" style="padding: 15px 10px; font-family: arial,sans-serif; font-size: 12px; font-weight: bold;">
49 |                         <a href="#" style="text-decoration: none; color: #999999;">Navigation 6</a>
50 |                     </td>
51 |                 </tr>
52 |             </table>
53 |         </td>
54 |     </tr>
55 |     <tr>
56 |         <td class="main_cta" style="padding-bottom: 10px;">
57 |             <img src="http://placehold.it/600x300&text=Main+CTA" alt="" style="display: block; border: 0;" />
58 |         </td>
59 |     </tr>
60 | </table>


--------------------------------------------------------------------------------
/source/patterns/navigation/stacked-split-links.html.erb:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Responsive Email Patterns
  3 | layout: pattern
  4 | pattern_name: "Stacked Split Links"
  5 | pattern_desc: "Navigation begins as a single row at the top of the layout. As screen size narrows, certain items drop from the top and move down to a stacked layout below the main message."
  6 | type: "navigation"
  7 | ---
  8 | 
  9 | <style>
 10 |     .main_cta img { width: 100%; height: auto !important; }
 11 | 
 12 |     /* Stacked Split Links Navigation Pattern CSS */
 13 |     @media only screen and (max-width: 599px) {
 14 |         table[class=pattern] .main_nav .nav_block1,
 15 |         table[class=pattern] .main_nav .nav_block2,
 16 |         table[class=pattern] .main_nav .nav_block3
 17 |         {
 18 |             padding-left: 20px !important;
 19 |         }
 20 |         table[class=pattern] .main_nav .nav_block1.first {
 21 |             padding-left: 0 !important;
 22 |         }
 23 |         table[class=pattern] .sub_nav a {
 24 |             display: block;
 25 |             width: 100%;
 26 |             padding: 16px 0;
 27 |             border-bottom: 1px solid #cccccc;
 28 |             color: #333333;
 29 |             font-size: 16px;
 30 |             font-weight: bold;
 31 |             text-decoration: none;
 32 |         }
 33 |         table[class=pattern] .sub_nav tr:last-child a {
 34 |             border-bottom: 0;
 35 |         }
 36 |     }
 37 |     @media only screen and (max-width: 486px) {
 38 |         table[class=pattern] .main_nav { padding: 20px 0 !important;}
 39 |         table[class=pattern] .main_nav .nav_block1,
 40 |         table[class=pattern] .main_nav .nav_block2
 41 |         {
 42 |             font-size: 14px !important;
 43 |         }
 44 |         table[class=pattern] .main_nav .nav_block3, table[class=pattern] .sub_nav .sub_nav_block2 { display: none; }
 45 |         table[class=pattern] .sub_nav td { display: table-cell !important; width: auto !important; height: auto !important; max-height: auto !important; float: none !important; }
 46 |         table[class=pattern] .sub_nav { padding: 0 12px; }
 47 |     }
 48 |     @media only screen and (max-width: 346px) {
 49 |         table[class=pattern] .main_nav .nav_block1 { font-size: 16px !important; }
 50 |         table[class=pattern] .main_nav .nav_block2 { display: none; }
 51 |         table[class=pattern] .sub_nav .sub_nav_block2 { display: table-row; }
 52 |     }
 53 | </style>
 54 | 
 55 | <table cellpadding="0" cellspacing="0" class="pattern">
 56 |     <tr>
 57 |         <td class="main_nav" width="600" style="padding-top: 10px; padding-bottom: 10px;">
 58 |             <table cellpadding="0" cellspacing="0" width="100%">
 59 |                 <tr>
 60 |                     <td class="nav_block1 first" align="center" style="font-family: arial,sans-serif; font-size: 12px; font-weight: bold;">
 61 |                     	<a href="#" style="text-decoration: none; color: #999999;">Nav 1</a>
 62 |                     </td>
 63 |                     <td class="nav_block1" align="center" style="padding-left: 40px; font-family: arial,sans-serif; font-size: 12px; font-weight: bold;">
 64 |                     	<a href="#" style="text-decoration: none; color: #999999;">Nav 2</a>
 65 |                     </td>
 66 |                     <td class="nav_block1" align="center" style="padding-left: 40px; font-family: arial,sans-serif; font-size: 12px; font-weight: bold;">
 67 |                     	<a href="#" style="text-decoration: none; color: #999999;">Nav 3</a>
 68 |                     </td>
 69 |                     <td class="nav_block2" align="center" style="padding-left: 40px; font-family: arial,sans-serif; font-size: 12px; font-weight: bold;">
 70 |                     	<a href="#" style="text-decoration: none; color: #999999;">Nav 4</a>
 71 |                     </td>
 72 |                     <td class="nav_block2" align="center" style="padding-left: 40px; font-family: arial,sans-serif; font-size: 12px; font-weight: bold;">
 73 |                     	<a href="#" style="text-decoration: none; color: #999999;">Nav 5</a>
 74 |                     </td>
 75 |                     <td class="nav_block3" align="center" style="padding-left: 40px; font-family: arial,sans-serif; font-size: 12px; font-weight: bold;">
 76 |                     	<a href="#" style="text-decoration: none; color: #999999;">Nav 6</a>
 77 |                     </td>
 78 |                     <td class="nav_block3" align="center" style="padding-left: 40px; font-family: arial,sans-serif; font-size: 12px; font-weight: bold;">
 79 |                     	<a href="#" style="text-decoration: none; color: #999999;">Nav 7</a>
 80 |                     </td>
 81 |                     <td class="nav_block3" align="center" style="padding-left: 40px; font-family: arial,sans-serif; font-size: 12px; font-weight: bold;">
 82 |                     	<a href="#" style="text-decoration: none; color: #999999;">Nav 8</a>
 83 |                     </td>
 84 |                 </tr>
 85 |             </table>
 86 |         </td>
 87 |     </tr>
 88 |     <tr>
 89 |         <td class="main_cta" style="padding-bottom: 10px;">
 90 |             <img src="http://placehold.it/600x300&text=Main+CTA" alt="" style="display: block; border: 0;" />
 91 |         </td>
 92 |     </tr>
 93 |     <tr>
 94 |         <td class="sub_nav">
 95 |             <table cellpadding="0" cellspacing="0" width="100%">
 96 |                 <tr class="sub_nav_block2">
 97 |                 	<td style="display: none; width: 0; height: 0; overflow: hidden; float: left; font-size: 0;">
 98 |                 		<a href="#">Nav 4</a>
 99 |                 	</td>
100 |                 </tr>
101 |                 <tr class="sub_nav_block2">
102 |                 	<td style="display: none; width: 0; height: 0; overflow: hidden; float: left; font-size: 0;">
103 |                 		<a href="#">Nav 5</a>
104 |                 	</td>
105 |                 </tr>
106 |                 <tr class="sub_nav_block3">
107 |                 	<td style="display: none; width: 0; height: 0; overflow: hidden; float: left; font-size: 0;">
108 |                 		<a href="#">Nav 6</a>
109 |                 	</td>
110 |                 </tr>
111 |                 <tr class="sub_nav_block3">
112 |                 	<td style="display: none; width: 0; height: 0; overflow: hidden; float: left; font-size: 0;">
113 |                 		<a href="#">Nav 7</a>
114 |                 	</td>
115 |                 </tr>
116 |                 <tr class="sub_nav_block3">
117 |                 	<td style="display: none; width: 0; height: 0; overflow: hidden; float: left; font-size: 0;">
118 |                 		<a href="#">Nav 8</a>
119 |                 	</td>
120 |                 </tr>
121 |             </table>
122 |         </td>
123 |     </tr>
124 | </table>


--------------------------------------------------------------------------------
/source/patterns/navigation/stacked-top-links-4-up.html.erb:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Responsive Email Patterns
 3 | layout: pattern
 4 | pattern_name: "Stacked Top Links 4-Up"
 5 | pattern_desc: "Navigation begins as a single row at the top of the layout. At a specified breakpoint, the nav stacks into a two column grid at the top."
 6 | type: "navigation"
 7 | ---
 8 | 
 9 | <style>
10 |     .main_cta img { width: 100%; height: auto !important; }
11 | 
12 |     /* Stacked Top Links Navigation Pattern CSS */
13 |     @media only screen and (max-width: 400px) {
14 |         td[class="main_nav"] {
15 |             padding: 10px 0;
16 |         }
17 |         td[class="main_nav"] td {
18 |             display: block;
19 |             float: left;
20 |             padding: 0 !important;
21 |             width: 50%;
22 |         }
23 |         td[class="main_nav"] a {
24 |             display: block;
25 |             padding: 20px 0;
26 |             background: #eee;
27 |         }
28 |         td[class="main_nav"] .nav1 a,
29 |         td[class="main_nav"] .nav2 a {
30 |             border-bottom: 1px solid #999;
31 |         }
32 |         td[class="main_nav"] .nav1 a,
33 |         td[class="main_nav"] .nav3 a {
34 |             border-right: 1px solid #999;
35 |         }
36 |     }
37 | </style>
38 | 
39 | <table cellpadding="0" cellspacing="0">
40 |     <tr>
41 |         <td class="main_nav" width="600">
42 |             <table cellpadding="0" cellspacing="0" width="100%">
43 |                 <tr>
44 |                     <td class="nav1" align="center" style="padding: 15px 10px; font-family: arial,sans-serif; font-size: 12px; font-weight: bold;">
45 |                         <a href="#" style="text-decoration: none; color: #999999;">Navigation 1</a>
46 |                     </td>
47 |                     <td class="nav2" align="center" style="padding: 15px 10px; font-family: arial,sans-serif; font-size: 12px; font-weight: bold;">
48 |                     	<a href="#" style="text-decoration: none; color: #999999;">Navigation 2</a>
49 |                     </td>
50 |                     <td class="nav3" align="center" style="padding: 15px 10px; font-family: arial,sans-serif; font-size: 12px; font-weight: bold;">
51 |                     	<a href="#" style="text-decoration: none; color: #999999;">Navigation 3</a>
52 |                     </td>
53 |                     <td align="center" style="padding: 15px 10px; font-family: arial,sans-serif; font-size: 12px; font-weight: bold;">
54 |                     	<a href="#" style="text-decoration: none; color: #999999;">Navigation 4</a>
55 |                     </td>
56 |                 </tr>
57 |             </table>
58 |         </td>
59 |     </tr>
60 |     <tr>
61 |         <td class="main_cta">
62 |             <img src="http://placehold.it/600x300&text=Main+CTA" alt="" style="display: block; border: 0;" />
63 |         </td>
64 |     </tr>
65 | </table>


--------------------------------------------------------------------------------
/source/patterns/navigation/stacked-top-links.html.erb:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Responsive Email Patterns
 3 | layout: pattern
 4 | pattern_name: "Stacked Top Links"
 5 | pattern_desc: "Navigation begins as a single row at the top of the layout. At a specified breakpoint, the entire nav stacks at the top."
 6 | type: "navigation"
 7 | ---
 8 | 
 9 | <style>
10 |     .main_cta img { width: 100%; height: auto !important; }
11 | 
12 |     /* Stacked Top Links Navigation Pattern CSS */
13 |     @media only screen and (max-width: 400px) {
14 |         td[class="main_nav"] td {
15 |             display: block;
16 |             padding: 0 !important;
17 |         }
18 |         td[class="main_nav"] a {
19 |             display: block;
20 |             padding: 20px 0;
21 |             border-bottom: 1px solid #999;
22 |         }
23 |     }
24 | </style>
25 | 
26 | <table cellpadding="0" cellspacing="0">
27 |     <tr>
28 |         <td class="main_nav" width="600">
29 |             <table cellpadding="0" cellspacing="0" width="100%">
30 |                 <tr>
31 |                     <td align="center" style="padding: 15px 10px; font-family: arial,sans-serif; font-size: 12px; font-weight: bold;">
32 |                         <a href="#" style="text-decoration: none; color: #999999;">Navigation 1</a>
33 |                     </td>
34 |                     <td align="center" style="padding: 15px 10px; font-family: arial,sans-serif; font-size: 12px; font-weight: bold;">
35 |                     	<a href="#" style="text-decoration: none; color: #999999;">Navigation 2</a>
36 |                     </td>
37 |                     <td align="center" style="padding: 15px 10px; font-family: arial,sans-serif; font-size: 12px; font-weight: bold;">
38 |                     	<a href="#" style="text-decoration: none; color: #999999;">Navigation 3</a>
39 |                     </td>
40 |                     <td align="center" style="padding: 15px 10px; font-family: arial,sans-serif; font-size: 12px; font-weight: bold;">
41 |                     	<a href="#" style="text-decoration: none; color: #999999;">Navigation 4</a>
42 |                     </td>
43 |                 </tr>
44 |             </table>
45 |         </td>
46 |     </tr>
47 |     <tr>
48 |         <td class="main_cta" style="padding-bottom: 10px;">
49 |             <img src="http://placehold.it/600x300&text=Main+CTA" alt="" style="display: block; border: 0;" />
50 |         </td>
51 |     </tr>
52 | </table>


--------------------------------------------------------------------------------
/source/patterns/navigation/top-links.html.erb:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Responsive Email Patterns
 3 | layout: pattern
 4 | pattern_name: "Top Links"
 5 | pattern_desc: "One of the easiest-to-implement solutions for navigation. Links stay at the top of the screen and wrap as the viewport shrinks. Can however cause height issues if too many links are used."
 6 | type: "navigation"
 7 | ---
 8 | <style>
 9 |     .main_cta img { width: 100%; height: auto !important; }
10 | 
11 |     /* Top Links Navigation Pattern CSS */
12 |     @media only screen and (max-width: 632px) {
13 |     	td[class="main_nav"] td {
14 |     		display: inline-block;
15 |     	}
16 |     }
17 | </style>
18 | 
19 | <table cellpadding="0" cellspacing="0">
20 |     <tr>
21 |         <td class="main_nav" width="600">
22 |             <table cellpadding="0" cellspacing="0" width="100%">
23 |                 <tr>
24 |                     <td align="center" style="padding: 15px 40px 15px 0; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
25 |                     	<a href="#" style="text-decoration: none; color: #999999;">Nav 1</a>
26 |                     </td>
27 |                     <td align="center" style="padding: 15px 40px 15px 0; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
28 |                     	<a href="#" style="text-decoration: none; color: #999999;">Nav 2</a>
29 |                     </td>
30 |                     <td align="center" style="padding: 15px 40px 15px 0; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
31 |                     	<a href="#" style="text-decoration: none; color: #999999;">Nav 3</a>
32 |                     </td>
33 |                     <td align="center" style="padding: 15px 40px 15px 0; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
34 |                     	<a href="#" style="text-decoration: none; color: #999999;">Nav 4</a>
35 |                     </td>
36 |                     <td align="center" style="padding: 15px 40px 15px 0; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
37 |                     	<a href="#" style="text-decoration: none; color: #999999;">Nav 5</a>
38 |                     </td>
39 |                     <td align="center" style="padding: 15px 40px 15px 0; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
40 |                     	<a href="#" style="text-decoration: none; color: #999999;">Nav 6</a>
41 |                     </td>
42 |                     <td align="center" style="padding: 15px 40px 15px 0; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
43 |                     	<a href="#" style="text-decoration: none; color: #999999;">Nav 7</a>
44 |                     </td>
45 |                     <td align="center" style="padding: 15px 0 15px 0; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
46 |                     	<a href="#" style="text-decoration: none; color: #999999;">Nav 8</a>
47 |                     </td>
48 |                 </tr>
49 |             </table>
50 |         </td>
51 |     </tr>
52 |     <tr>
53 |         <td class="main_cta">
54 |             <img src="http://placehold.it/600x300&text=Main+CTA" alt="" style="display: block; border: 0;" />
55 |         </td>
56 |     </tr>
57 | </table>


--------------------------------------------------------------------------------
/source/stylesheets/Partials/_branding.scss:
--------------------------------------------------------------------------------
1 | $color-brand: 		rgb(182,21,40);
2 | $color-text:  		rgb(106,114,125);
3 | $color-text-header: rgb(255,255,255);
4 | $color-link:  		rgb(106,114,125);
5 | 
6 | $color-footer: 		rgb(245,245,245);


--------------------------------------------------------------------------------
/source/stylesheets/Partials/_footer.scss:
--------------------------------------------------------------------------------
 1 | .footer {
 2 | 	@include clearfix;
 3 | 	padding: 2em 0;
 4 | 	background: $color-footer;
 5 | 	a { 
 6 | 		font-size: .8em; 
 7 | 		&.brand { font-size: 1em; }
 8 | 	}
 9 | 	li {
10 | 		margin-top: 1.5em;
11 | 		&:first-child { margin-top: 0; }
12 | 	}
13 | 	@media only screen and (min-width: 46em) {
14 | 		text-align: center;
15 | 		li {
16 | 			margin: 1em 1em 0 1em;
17 | 			display: inline-block;
18 | 			&:first-child { display: block; }
19 | 		}
20 | 	}
21 | 	@media only screen and (min-width: 70em) {
22 | 		padding: 1.5em 0;
23 | 		li {
24 | 			margin: 0 1.5em;
25 | 			&:first-child { display: inline-block; }
26 | 		}
27 | 	}
28 | }


--------------------------------------------------------------------------------
/source/stylesheets/Partials/_forms.scss:
--------------------------------------------------------------------------------
 1 | label, input {
 2 | 	display: block;
 3 | }
 4 | 
 5 | label {
 6 | 	cursor: pointer;
 7 | 	margin-top: 1.5em;
 8 | }
 9 | 
10 | select, 
11 | input[type=text],
12 | input[type=url],
13 | input[type=email] {
14 | 	font-size: .8em;
15 | 	width: 100%;
16 | 	padding: .75em;
17 | 	margin-top: .75em;
18 | 	color: $color-text;
19 | }
20 | 
21 | button,
22 | input[type=submit],
23 | .button {
24 | 	display: inline-block;
25 | 	padding: .5em 1em;
26 | 	background: darken($color-link, 20%);
27 | 	color: rgb(255,255,255);
28 | 	border: 0;
29 | 	&:hover {
30 | 		color: rgb(255,255,255);
31 | 		background: darken($color-link, 30%);
32 | 	}
33 | }
34 | 
35 | .form {
36 | 	@include clearfix;
37 | 	h1 { margin: 0; }
38 | 	fieldset {
39 | 		@include clearfix;
40 | 		padding: 1em 0 3em 0;
41 | 		margin: 0;
42 | 		border: 0;
43 | 		border-bottom: 1px solid lighten($color-text, 40%);
44 | 		&:first-child {
45 | 			padding-top: 0;
46 | 		}
47 | 
48 | 		&:last-of-type { 
49 | 			padding-bottom: 0;
50 | 			border: 0; 
51 | 		}
52 | 	}
53 | 	.submit {
54 | 		clear: both;
55 | 		padding: 3em 0 2em 0;
56 | 	}
57 | }
58 | @media only screen and (min-width: 40em) {
59 | 	.form {
60 | 		h1 { padding: 0 1em; }
61 | 		fieldset {
62 | 			float: left;
63 | 			width: 50%;
64 | 			padding: 1em 2em;
65 | 			border: 0;
66 | 			&:first-child { padding-top: 1em; }
67 | 		}
68 | 		.submit {
69 | 			padding: 2em;
70 | 		}
71 | 	}
72 | }
73 | @media only screen and (min-width: 60em) {
74 | 	.form {
75 | 		h1 { 
76 | 			font-size: 3em; 
77 | 			padding: 0 .65em;
78 | 		}
79 | 	}
80 | 	button,
81 | 	input[type=submit] {
82 | 		font-size: 1.2em;
83 | 	}
84 | 	select, 
85 | 	input[type=text],
86 | 	input[type=url],
87 | 	input[type=email] {
88 | 		font-size: .8em;
89 | 		width: 100%;
90 | 		padding: .75em;
91 | 		margin-top: .75em;
92 | 		color: $color-text;
93 | 	}
94 | }


--------------------------------------------------------------------------------
/source/stylesheets/Partials/_grid.scss:
--------------------------------------------------------------------------------
 1 | .grid {
 2 | 	vertical-align: top;
 3 | 	width: 100%;
 4 | 	margin-bottom: 2em;
 5 | 	&:last-child { margin-bottom: 0; }
 6 | 	ul {
 7 | 		padding: .25em 0 .5em 0;
 8 | 		li {
 9 | 			margin: .75em 0;
10 | 			font-size: 1.1em;
11 | 		}
12 | 	}
13 | 	@media only screen and (min-width: 40em) {
14 | 		display: inline-block;
15 | 		width: 50%;
16 | 		padding: 0 2em;
17 | 		&:nth-last-child(2) { margin-bottom: 0; }
18 | 	}
19 | 	@media only screen and (min-width: 60em) {
20 | 		width: 33.33%;
21 | 		&:nth-last-child(3) { margin-bottom: 0; }
22 | 	}
23 | }


--------------------------------------------------------------------------------
/source/stylesheets/Partials/_header.scss:
--------------------------------------------------------------------------------
 1 | .header {
 2 | 	@include clearfix;
 3 | 	padding: .75em 0;
 4 | 	background: $color-brand;
 5 | 	color: $color-text-header;
 6 | 	a { color: #fff; &:hover { color: #fff; }}
 7 | 	&.home {
 8 | 		padding: 3em 0;
 9 | 		text-align: center;
10 | 
11 | 		.logo {
12 | 			padding-bottom: .5em;
13 | 			display: block;
14 | 			margin: 0 auto;
15 | 		}
16 | 
17 | 		h1 { 
18 | 			font-size: 2em; 
19 | 			margin: .5em 0;
20 | 		}
21 | 		p { 
22 | 			margin: 0;
23 | 			font-weight: 600; 
24 | 		}
25 | 		p + a { margin: 2.5em 0 0 0; }
26 | 		
27 | 		span {
28 | 			display: block;
29 | 			font-size: .8em;
30 | 			font-weight: 300;
31 | 			color: #BEC2C7;
32 | 			margin-top: 1em;
33 | 		}
34 | 		@media only screen and (min-width: 40em) {
35 | 			padding: 3.5em 0;
36 | 			.logo {
37 | 				width: 9.25em;
38 | 			}
39 | 			h1 { font-size: 3em; }
40 | 		}
41 | 		@media only screen and (min-width: 60em) { font-size: 1.2em; }
42 | 	}
43 | 
44 | 	&.interior {
45 | 		a {
46 | 			color: #fff;
47 | 			&.logo { line-height: 2.38em; display: block;float: left; }
48 | 			&:hover { color: #fff; }
49 | 			&.button {
50 | 				font-size: .9em;
51 | 				margin: 0 0 0 1em;
52 | 				display: inline-block;
53 | 				float: right;
54 | 				h1 { display: none; }
55 | 			}
56 | 		}
57 | 		@media only screen and (min-width: 36em) { 
58 | 			a {
59 | 				&.button {
60 | 					font-size: 1em;
61 | 					h1 { display: inline-block; }
62 | 				}
63 | 			}
64 | 		}
65 | 		@media only screen and (min-width: 40em) { 
66 | 			.wrap {
67 | 				padding: 0 2em;
68 | 			}
69 | 		}
70 | 		img {
71 | 			display: inline-block;
72 | 			vertical-align: middle;
73 | 			margin-top: -3px;
74 | 		}
75 | 		h1 {
76 | 			font-size: 1em;
77 | 			display: inline-block;
78 | 			margin: 0 0 0 .5em;
79 | 			font-weight: 600;
80 | 		}
81 | 	}
82 | }
83 | 
84 | 


--------------------------------------------------------------------------------
/source/stylesheets/Partials/_pattern.scss:
--------------------------------------------------------------------------------
 1 | .pattern-desc,
 2 | .pattern-source {
 3 | 	max-width: 60em;
 4 | 	margin: 3.5em auto 0;
 5 | 	h1 { padding-top: .75em; border-top: 1px solid #E6E6E6; }
 6 | 	@media only screen and (min-width: 40em) {
 7 | 		margin: 5.5em auto 0;
 8 | 		padding: 0 1.5em;
 9 | 	}
10 | }
11 | 
12 | .pattern-source {
13 | 	margin: 1.5em auto 0;
14 | 	pre[class*="language-"] {
15 | 		margin: 0;
16 | 		padding: 0;
17 | 		background: none;
18 | 	}
19 | 	code {
20 | 		font-size: .9em;
21 | 		display: block;
22 | 		margin: 0;
23 | 		padding: 1.5em;
24 | 		max-height: 22em;
25 | 		overflow: scroll;
26 | 		background: whitesmoke;
27 | 	}
28 | }
29 | 
30 | .pattern-wrap { 
31 | 	font-size: 12px;
32 | 	margin: 0 auto;
33 | 	max-width: 600px;
34 | 	color: #000;
35 | 	font-family: arial,sans-serif;
36 | 	color: #999;
37 | 	@media only screen and (min-width: 40em) {
38 | 		margin-top: 1.5em;
39 | 	}
40 | }
41 | 
42 | .pattern-header, 
43 | .pattern-footer {
44 | 	height: 0;
45 | 	overflow: hidden;
46 | 	-webkit-transition: all .5s ease;
47 |        -moz-transition: all .5s ease;
48 |             transition: all .5s ease;
49 | }
50 | 
51 | .pattern-header {
52 | 	&.active { 
53 | 		height: 117px; 
54 | 		&.type-navigation {
55 | 			height: 45px;
56 | 		}
57 | 		&.type-no-header {
58 | 			display: none;
59 | 			height: 0;
60 | 		}
61 | 	}
62 | 	@include clearfix;
63 | 	.pattern-nav {
64 | 		overflow: hidden;
65 | 		height: 51px;
66 | 		margin-bottom: 20px;
67 | 		text-align: center;
68 | 		border-bottom: 1px solid #ccc;
69 | 		a {
70 | 			display: inline-block;
71 | 			padding: 18px 14px;
72 | 			font-weight: bold;
73 | 			color: #999;
74 | 		}
75 | 	}
76 | }
77 | .patterns_navigation_footer-anchor {
78 | 	.pattern-header {
79 | 		&.active { 
80 | 			display: none;
81 | 			height: 0;
82 | 		}
83 | 	}
84 | }
85 | 
86 | .pattern-footer {
87 | 	&.active { height: 97px; }
88 | 	@include clearfix;
89 | 	p {
90 | 		margin-top: 20px;
91 | 		margin-bottom: 0;
92 | 		padding-top: 20px;
93 | 		border-top: 1px solid #ccc;
94 | 	}
95 | }


--------------------------------------------------------------------------------
/source/stylesheets/Partials/_support.scss:
--------------------------------------------------------------------------------
 1 | .pattern-support {
 2 | 	max-width: 60em;
 3 | 	margin: 0 auto;
 4 | 	table {
 5 | 		width: 100%;
 6 | 		tr:hover td { background: whitesmoke; }
 7 | 		th { vertical-align: bottom; }
 8 | 		td { vertical-align: top; }
 9 | 		th, td {
10 | 			width: 50%;
11 | 			padding: 1em 0.5em;
12 | 			text-align: left;
13 | 			border-bottom: 1px solid whitesmoke;
14 | 			&:first-child { padding-right: 2em; }
15 | 			&:last-child { text-align: right; }
16 | 		}
17 | 		.support-level {
18 | 				position: relative;
19 | 				padding-right: 2.75em;
20 | 				&:after {
21 | 					display: block;
22 | 					position: absolute;
23 | 					top: 1em;
24 | 					right: 0.5em;
25 | 					width: 1.4em;
26 | 					height: 1.4em;
27 | 					background: url('../images/support.png') no-repeat;
28 | 					border-radius: 1em;
29 | 					text-align: center;
30 | 					font-weight: bold;
31 | 					color: #fff;
32 | 				}
33 | 		}
34 | 		.support-level.full:after {
35 | 			content: '';
36 | 			background-color: #7ebd26;
37 | 			background-position: -1px -1px;
38 | 		}
39 | 		.support-level.working:after {
40 | 			content: '';
41 | 			background-color: #72d0eb;
42 | 			background-position: center center;
43 | 		}
44 | 		.support-level.none:after {
45 | 			content: '';
46 | 			background-color: $color-brand;
47 | 			background-position: center -51px;
48 | 		}
49 | 	}
50 | }


--------------------------------------------------------------------------------
/source/stylesheets/Partials/_utilities.scss:
--------------------------------------------------------------------------------
 1 | @mixin unset-list {
 2 | 	margin: 0;
 3 | 	padding: 0;
 4 | 	list-style-type: none;
 5 | }
 6 | 
 7 | @mixin animation($name, $duration, $timing-function: ease, $delay: 0, $iteration-count: 1, $direction: both) {
 8 | 	-o-animation: $name $duration $timing-function $delay $iteration-count $direction;
 9 | 	-moz-animation: $name $duration $timing-function $delay $iteration-count $direction;
10 | 	-webkit-animation: $name $duration $timing-function $delay $iteration-count $direction;
11 | 	animation: $name $duration $timing-function $delay $iteration-count $direction;
12 | }
13 | 
14 | @mixin keyframes($name) {
15 |     @-webkit-keyframes #{$name} {
16 |         @content;
17 |     }
18 |     @-moz-keyframes #{$name} {
19 |         @content;
20 |     }
21 |     @-ms-keyframes #{$name} {
22 |         @content;
23 |     }
24 |     @keyframes #{$name} {
25 |         @content;
26 |     }
27 | }
28 | 
29 | @mixin destroyList {
30 |     display: block;
31 |     list-style: none;
32 |     padding: 0;
33 |     margin: 0;
34 |     li,
35 |     dd,
36 |     dt {
37 |         @include inline-block(middle);
38 |         list-style: none;
39 |         padding: 0;
40 |         margin: 0;
41 |     }
42 | }
43 | 
44 | @mixin destroyLinks {
45 |     text-decoration: none;
46 |     color: inherit;
47 | }


--------------------------------------------------------------------------------
/source/stylesheets/all.css.scss:
--------------------------------------------------------------------------------
 1 | @import "normalize";
 2 | @import "compass/utilities/general/clearfix";
 3 | @import "compass/css3";
 4 | @import "compass/css3/inline-block";
 5 | 
 6 | @import "Partials/utilities";
 7 | @import "Partials/branding";
 8 | @import "Partials/header";
 9 | @import "Partials/footer";
10 | @import "Partials/forms";
11 | @import "Partials/grid";
12 | @import "Partials/pattern";
13 | @import "Partials/support";
14 | 
15 | @import "prism";
16 | 
17 | @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
18 | 
19 | * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
20 | 
21 | body {
22 |     font-size: 1em;
23 |     font-family: 'Open Sans', sans-serif;
24 |     font-weight: 300;
25 |     color: $color-text;
26 | 	background: $color-footer;
27 | 	display: flex;
28 | 	min-height: 100vh;
29 | 	flex-direction: column;
30 | }
31 | 
32 | h1, h2, h3, h4, h5, h6 { font-weight: 300; }
33 | 
34 | 
35 | h2 {
36 | 	border-bottom: 1px solid lighten($color-link, 40%);
37 | 	margin: 0;
38 | 	padding: 0 0 .25em 0;
39 | }
40 | 
41 | a {
42 | 	color: $color-link;
43 | 	text-decoration: none;
44 | 	transition: color 0.25s;
45 | 	&:hover {
46 | 		color: $color-brand;
47 | 	}
48 | 	&.brand {
49 | 		color: $color-brand;
50 | 		font-weight: 600;
51 | 		&:hover { color: darken($color-brand, 10%); }
52 | 	}
53 | }
54 | 
55 | ul {
56 | 	@include unset-list;
57 | }
58 | 
59 | .wrap {
60 | 	max-width: 60em;
61 | 	margin: 0 auto;
62 | 	@include clearfix;
63 | }
64 | .index, .submit-pattern, .confirmation {
65 | 	.wrap {
66 | 		max-width: 70em;
67 | 	}
68 | }
69 | 
70 | .main {
71 | 	padding: 2em 0;
72 | 	background: #fff;
73 | 	flex: 1;
74 | 	@media only screen and (min-width: 60em) { padding: 3em 0 4em 0; }
75 | 
76 | }
77 | 
78 | .header,
79 | .header.home,
80 | .main,
81 | .footer {
82 | 	padding-left: 1.5em;
83 | 	padding-right: 1.5em;
84 | }
85 | 
86 | @media only screen and (min-width: 40em) {
87 | 	.header.home,
88 | 	.footer,
89 | 	.pattern-support {
90 | 		padding-left: 2em;
91 | 		padding-right: 2em;
92 | 	}
93 | 	.header,
94 | 	.main {
95 | 		padding-left: 0;
96 | 		padding-right: 0;
97 | 	}
98 | }
99 | 


--------------------------------------------------------------------------------
/source/stylesheets/prism.css:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * prism.js default theme for JavaScript, CSS and HTML
  3 |  * Based on dabblet (http://dabblet.com)
  4 |  * @author Lea Verou
  5 |  */
  6 | 
  7 | code[class*="language-"],
  8 | pre[class*="language-"] {
  9 | 	color: black;
 10 | 	text-shadow: 0 1px white;
 11 | 	font-family: Consolas, Monaco, 'Andale Mono', monospace;
 12 | 	direction: ltr;
 13 | 	text-align: left;
 14 | 	white-space: pre;
 15 | 	word-spacing: normal;
 16 | 	word-break: normal;
 17 | 
 18 | 
 19 | 	-moz-tab-size: 4;
 20 | 	-o-tab-size: 4;
 21 | 	tab-size: 4;
 22 | 
 23 | 	-webkit-hyphens: none;
 24 | 	-moz-hyphens: none;
 25 | 	-ms-hyphens: none;
 26 | 	hyphens: none;
 27 | }
 28 | 
 29 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
 30 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
 31 | 	text-shadow: none;
 32 | 	background: #b3d4fc;
 33 | }
 34 | 
 35 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
 36 | code[class*="language-"]::selection, code[class*="language-"] ::selection {
 37 | 	text-shadow: none;
 38 | 	background: #b3d4fc;
 39 | }
 40 | 
 41 | @media print {
 42 | 	code[class*="language-"],
 43 | 	pre[class*="language-"] {
 44 | 		text-shadow: none;
 45 | 	}
 46 | }
 47 | 
 48 | /* Code blocks */
 49 | pre[class*="language-"] {
 50 | 	padding: 1em;
 51 | 	margin: .5em 0;
 52 | 	overflow: auto;
 53 | }
 54 | 
 55 | :not(pre) > code[class*="language-"],
 56 | pre[class*="language-"] {
 57 | 	background: #f5f2f0;
 58 | }
 59 | 
 60 | /* Inline code */
 61 | :not(pre) > code[class*="language-"] {
 62 | 	padding: .1em;
 63 | 	border-radius: .3em;
 64 | }
 65 | 
 66 | .token.comment,
 67 | .token.prolog,
 68 | .token.doctype,
 69 | .token.cdata {
 70 | 	color: slategray;
 71 | }
 72 | 
 73 | .token.punctuation {
 74 | 	color: #999;
 75 | }
 76 | 
 77 | .namespace {
 78 | 	opacity: .7;
 79 | }
 80 | 
 81 | .token.property,
 82 | .token.tag,
 83 | .token.boolean,
 84 | .token.number,
 85 | .token.constant,
 86 | .token.symbol {
 87 | 	color: #905;
 88 | }
 89 | 
 90 | .token.selector,
 91 | .token.attr-name,
 92 | .token.string,
 93 | .token.builtin {
 94 | 	color: #690;
 95 | }
 96 | 
 97 | .token.operator,
 98 | .token.entity,
 99 | .token.url,
100 | .language-css .token.string,
101 | .style .token.string,
102 | .token.variable {
103 | 	color: #a67f59;
104 | 	background: hsla(0,0%,100%,.5);
105 | }
106 | 
107 | .token.atrule,
108 | .token.attr-value,
109 | .token.keyword {
110 | 	color: #07a;
111 | }
112 | 
113 | 
114 | .token.regex,
115 | .token.important {
116 | 	color: #e90;
117 | }
118 | 
119 | .token.important {
120 | 	font-weight: bold;
121 | }
122 | 
123 | .token.entity {
124 | 	cursor: help;
125 | }
126 | 
127 | 


--------------------------------------------------------------------------------
/source/submit-pattern.html.erb:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Responsive Email Patterns: Submit Pattern"
 3 | layout: interior
 4 | buttons: false
 5 | ---
 6 | 
 7 | <div class="form">
 8 | 	<h1>Submit a Pattern</h1>
 9 | 	<script type="text/javascript">var submitted=false;</script>
10 | 	<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted) {window.location='confirmation.html';}"></iframe>
11 | 	<form action="https://docs.google.com/forms/d/1ndVWdFXIjM-LFLxp4MdAPp60f79XbUarS_KmdDqVKkY/formResponse?embedded=true" method="post" target="hidden_iframe" onsubmit="submitted=true;">
12 | 		<fieldset>
13 | 			<label aria-hidden="true" class="ss-q-item-label aria-todo" for="entry_1729108410">*Pattern Name</label>
14 | 			<input type="text" name="entry.1729108410" value="" class="ss-q-short" id="entry_1729108410" dir="auto" aria-label="Pattern Name  " aria-required="true" required="" title="" placeholder="What should I call your pattern?">
15 | 
16 | 			<label aria-hidden="true" class="ss-q-item-label aria-todo" for="entry_273881373">*Category</label>
17 | 			<input type="text" name="entry.273881373" value="" class="ss-q-short" id="entry_273881373" dir="auto" aria-label="*Category  " aria-required="true" required="" title="" placeholder="What category should this go under?">
18 | 
19 | 			<label aria-hidden="true" class="ss-q-item-label aria-todo" for="entry_440496201">*Example Url</label>
20 | 			<input type="url" name="entry.440496201" value="" class="ss-q-short" id="entry_440496201" dir="auto" aria-label="*Example Url  " aria-required="true" required="" title="" placeholder="ex: Codepen, GitHub Gist, Litmus Scope" />
21 | 		</fieldset>
22 | 
23 | 		<fieldset>
24 | 			<label aria-hidden="true" class="ss-q-item-label aria-todo" for="entry_2099126953">Your Name</label>
25 | 			<input type="text" name="entry.2099126953" value="" class="ss-q-short" id="entry_2099126953" dir="auto" aria-label="Your Name  " title="" placeholder="If you'd like to receive attribution">
26 | 
27 | 			<label aria-hidden="true" class="ss-q-item-label aria-todo" for="entry_1311764690">Your Twitter Handle</label>
28 | 			<input type="text" name="entry.1311764690" value="" class="ss-q-short" id="entry_1311764690" dir="auto" aria-label="Your Twitter Handle" title="" placeholder="So I can thank you" />
29 | 
30 | 			<input type="hidden" name="draftResponse" value="[,,&quot;-7020540266671912340&quot;]
31 | 			">
32 | 			<input type="hidden" name="pageHistory" value="0">
33 | 
34 | 			<input type="hidden" name="fbzx" value="-7020540266671912340">
35 | 		</fieldset>
36 | 
37 | 		<div class="submit">
38 | 			<input type="submit" name="submit" value="Submit Pattern" id="ss-submit">
39 | 		</div>
40 | 	</form>
41 | </div>
42 | 


--------------------------------------------------------------------------------
/source/support.html.erb:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Pattern Support
  3 | desc: "All patterns have been tested using either <a href='https://litmus.com/' target='_blank'>Litmus</a> or with real devices in the email clients listed below.
  4 | <span>Full = Fully Responsive, Working = Renders Correctly at Full Width but Not Responsive, None = Either the Pattern Doesn't Work or Has Yet to be Tested.</span>"
  5 | ---
  6 | 
  7 | <section class="pattern-support">
  8 | 	<table>
  9 | 		<tr>
 10 | 			<th>Email Client</th>
 11 | 			<th>
 12 | 				Support Level
 13 | 			</th>
 14 | 		</tr>
 15 | 		<tr>
 16 | 			<td>iPhone 3GS iOS5</a></td>
 17 | 			<td class="support-level full">Full</td>
 18 | 		</tr>
 19 | 		<tr>
 20 | 			<td>iPhone 4S iOS6</td>
 21 | 			<td class="support-level full">Full</td>
 22 | 		</tr>
 23 | 		<tr>
 24 | 			<td>iPhone 5 iOS6</td>
 25 | 			<td class="support-level full">Full</td>
 26 | 		</tr>
 27 | 		<tr>
 28 | 			<td>iPhone 5s iOS7</td>
 29 | 			<td class="support-level full">Full</td>
 30 | 		</tr>
 31 | 		<tr>
 32 | 			<td>iPad iOS6</td>
 33 | 			<td class="support-level full">Full</td>
 34 | 		</tr>
 35 | 		<tr>
 36 | 			<td>iPad (Retina) iOS7</td>
 37 | 			<td class="support-level full">Full</td>
 38 | 		</tr>
 39 | 		<tr>
 40 | 			<td>iPad Mini iOS7</td>
 41 | 			<td class="support-level full">Full</td>
 42 | 		</tr>
 43 | 		<tr>
 44 | 			<td>Apple Mail 5 OS X 10.7</td>
 45 | 			<td class="support-level full">Full</td>
 46 | 		</tr>
 47 | 		<tr>
 48 | 			<td>Apple Mail 6 OS X 10.8</td>
 49 | 			<td class="support-level full">Full</td>
 50 | 		</tr>
 51 | 		<tr>
 52 | 			<td>Android 2.3 Native Client</td>
 53 | 			<td class="support-level full">Full</td>
 54 | 		</tr>
 55 | 		<tr>
 56 | 			<td>Android 4.0 Native Client</td>
 57 | 			<td class="support-level full">Full</td>
 58 | 		</tr>
 59 | 		<tr>
 60 | 			<td>Android Outlook Exchange via Native Client</td>
 61 | 			<td class="support-level working">Working</td>
 62 | 		</tr>
 63 | 		<tr>
 64 | 			<td>Android Gmail App</td>
 65 | 			<td class="support-level working">Working</td>
 66 | 		</tr>
 67 | 		<tr>
 68 | 			<td>Outlook 2000</td>
 69 | 			<td class="support-level working">Working</td>
 70 | 		</tr>
 71 | 		<tr>
 72 | 			<td>Outlook 2007</td>
 73 | 			<td class="support-level working">Working</td>
 74 | 		</tr>
 75 | 		<tr>
 76 | 			<td>Outlook 2010</td>
 77 | 			<td class="support-level working">Working</td>
 78 | 		</tr>
 79 | 		<tr>
 80 | 			<td>Outlook 2011 OS X 10.7</td>
 81 | 			<td class="support-level working">Working</td>
 82 | 		</tr>
 83 | 		<tr>
 84 | 			<td>Outlook 2013</td>
 85 | 			<td class="support-level working">Working</td>
 86 | 		</tr>
 87 | 		<tr>
 88 | 			<td>Gmail Chrome</td>
 89 | 			<td class="support-level working">Working</td>
 90 | 		</tr>
 91 | 		<tr>
 92 | 			<td>Gmail IE</td>
 93 | 			<td class="support-level working">Working</td>
 94 | 		</tr>
 95 | 		<tr>
 96 | 			<td>Gmail Firefox</td>
 97 | 			<td class="support-level working">Working</td>
 98 | 		</tr>
 99 | 		<tr>
100 | 			<td>Hotmail/Outlook.com Chrome</td>
101 | 			<td class="support-level working">Working</td>
102 | 		</tr>
103 | 		<tr>
104 | 			<td>Hotmail/Outlook.com IE</td>
105 | 			<td class="support-level working">Working</td>
106 | 		</tr>
107 | 		<tr>
108 | 			<td>Hotmail/Outlook.com Firefox</td>
109 | 			<td class="support-level working">Working</td>
110 | 		</tr>
111 | 		<tr>
112 | 			<td>Yahoo! Mail Chrome</td>
113 | 			<td class="support-level working">Working</td>
114 | 		</tr>
115 | 		<tr>
116 | 			<td>Yahoo! Mail IE</td>
117 | 			<td class="support-level working">Working</td>
118 | 		</tr>
119 | 		<tr>
120 | 			<td>Yahoo! Mail Firefox</td>
121 | 			<td class="support-level working">Working</td>
122 | 		</tr>
123 | 		<tr>
124 | 			<td>Windows Phone 7</td>
125 | 			<td class="support-level working">Working</td>
126 | 		</tr>
127 | 		<tr>
128 | 			<td>Windows Mobile 6.1</td>
129 | 			<td class="support-level none">None</td>
130 | 		</tr>
131 | 		<tr>
132 | 			<td>BlackBerry OS4</td>
133 | 			<td class="support-level none">None</td>
134 | 		</tr>
135 | 		<tr>
136 | 			<td>BlackBerry OS5</td>
137 | 			<td class="support-level none">None</td>
138 | 		</tr>
139 | 	</table>
140 | </section>


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