Permalink
Browse files

updated media patterns

  • Loading branch information...
1 parent fdce8e5 commit 8c4226d5f77d7b01baa9c96aa847375ae952c0b8 Brian Graves committed Apr 10, 2014
Showing with 323 additions and 108 deletions.
  1. +2 −2 data/categories.yml
  2. BIN site/images/envelope.png
  3. BIN site/images/shadow.png
  4. +1 −1 site/index.html
  5. +5 −5 site/patterns/media/basic-fluid-image.html
  6. +13 −13 site/patterns/media/{description-overlay.html → description-overlay-bottom.html}
  7. +159 −0 site/patterns/media/description-overlay-right.html
  8. BIN site/patterns/media/espana_alleyway.jpg
  9. +2 −2 site/patterns/media/fluid-video.html
  10. +2 −2 site/patterns/media/image-center-crop.html
  11. +24 −24 site/patterns/media/image-grid.html
  12. +4 −4 site/patterns/media/image-left-crop.html
  13. +4 −4 site/patterns/media/image-right-crop.html
  14. +34 −22 site/patterns/media/image-vertical-crop.html
  15. BIN site/patterns/media/lindsey.jpg
  16. BIN site/patterns/media/meat.jpg
  17. BIN site/patterns/media/michael-jordan.jpg
  18. BIN site/patterns/media/souk.jpg
  19. BIN site/patterns/media/spain.jpg
  20. BIN site/patterns/media/steve-mcqueen.jpg
  21. BIN site/patterns/media/tattoos.jpg
  22. +1 −1 site/stylesheets/all.css
  23. +3 −3 source/patterns/media/basic-fluid-image.html.erb
  24. +7 −7 source/patterns/media/{description-overlay.html.erb → description-overlay-bottom.html.erb}
  25. +38 −0 source/patterns/media/description-overlay-right.html.erb
  26. BIN source/patterns/media/espana_alleyway.jpg
  27. +1 −1 source/patterns/media/fluid-video.html.erb
  28. +1 −1 source/patterns/media/image-center-crop.html.erb
  29. +1 −1 source/patterns/media/image-grid.html.erb
  30. +2 −2 source/patterns/media/image-left-crop.html.erb
  31. +2 −2 source/patterns/media/image-right-crop.html.erb
  32. +17 −11 source/patterns/media/image-vertical-crop.html.erb
  33. BIN source/patterns/media/lindsey.jpg
  34. BIN source/patterns/media/meat.jpg
  35. BIN source/patterns/media/michael-jordan.jpg
  36. BIN source/patterns/media/souk.jpg
  37. BIN source/patterns/media/spain.jpg
  38. BIN source/patterns/media/steve-mcqueen.jpg
  39. BIN source/patterns/media/tattoos.jpg
View
@@ -79,8 +79,8 @@
id: "image-right-crop"
- name: "Image Left Crop"
id: "image-left-crop"
- - name: "Description Overlay"
- id: "description-overlay"
+ - name: "Description Overlay Bottom"
+ id: "description-overlay-bottom"
- name: "Image Grid"
id: "image-grid"
- name: "Fluid Video"
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -78,7 +78,7 @@
<li><a href="patterns/media/image-vertical-crop.html">Image Vertical Crop</a>
<li><a href="patterns/media/image-right-crop.html">Image Right Crop</a>
<li><a href="patterns/media/image-left-crop.html">Image Left Crop</a>
- <li><a href="patterns/media/description-overlay.html">Description Overlay</a>
+ <li><a href="patterns/media/description-overlay-bottom.html">Description Overlay Bottom</a>
<li><a href="patterns/media/image-grid.html">Image Grid</a>
<li><a href="patterns/media/fluid-video.html">Fluid Video</a>
</ul>
@@ -56,13 +56,13 @@
/* Basic Fluid Image Pattern CSS */
@media only screen and (max-width: 599px) {
img.pattern {
- width: 100%;
+ max-width: 100%;
height: auto !important;
}
}
</style>
-<img class="pattern" src="michael-jordan.jpg" alt="Michael Jordan" width="600" height="450" style="display: block; border: 0;" />
+<img class="pattern" src="spain.jpg" alt="Spain" width="600" height="450" style="display: block; border: 0;" />
<div class="pattern-footer">
@@ -76,7 +76,7 @@
<section class="pattern-desc">
<h1>Basic Fluid Image</h1>
- <p>The simplest tactic for dealing with responsive images. The image is set to 100% of the width of it's container simply scales down as the screen size shrinks.</p>
+ <p>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.</p>
</section>
<section id="patternSource" class="pattern-source">
@@ -86,13 +86,13 @@
&#x2F;* Basic Fluid Image Pattern CSS *&#x2F;
@media only screen and (max-width: 599px) {
img.pattern {
- width: 100%;
+ max-width: 100%;
height: auto !important;
}
}
&lt;&#x2F;style&gt;
-&lt;img class=&quot;pattern&quot; src=&quot;michael-jordan.jpg&quot; alt=&quot;Michael Jordan&quot; width=&quot;600&quot; height=&quot;450&quot; style=&quot;display: block; border: 0;&quot; &#x2F;&gt;
+&lt;img class=&quot;pattern&quot; src=&quot;spain.jpg&quot; alt=&quot;Spain&quot; width=&quot;600&quot; height=&quot;450&quot; style=&quot;display: block; border: 0;&quot; &#x2F;&gt;
</code>
</pre>
@@ -13,7 +13,7 @@
<link href="../../stylesheets/all.css" rel="stylesheet" type="text/css" />
<script src="../../javascripts/plugins/modernizr.js" type="text/javascript"></script><script src="../../javascripts/init.js" type="text/javascript"></script>
</head>
- <body class="patterns patterns_media patterns_media_description-overlay">
+ <body class="patterns patterns_media patterns_media_description-overlay-bottom">
<header class="header interior">
<div class="wrap">
@@ -70,15 +70,15 @@
<table cellpadding="0" cellspacing="0">
<tr>
- <td class="container" background="http://www.fillmurray.com/600/300" width="600" height="300" style="background-position: center top;">
+ <td class="container" background="lindsey.jpg" width="600" height="448" style="background-position: center top;">
<!--[if gte mso 9]>
- <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:300px;">
- <v:fill type="tile" src="http://www.fillmurray.com/600/300" color="#ff0000" />
+ <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:448px;">
+ <v:fill type="tile" src="lindsey.jpg" color="#ff0000" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table cellpadding="0" cellspacing="0">
<tr>
- <td class="spacer" height="150">&nbsp;</td>
+ <td class="spacer" height="298">&nbsp;</td>
</tr>
<tr>
<td class="inner-container" width="600" height="150" align="left" valign="top" style="background-color: #ccc; background: rgba(30,30,30,0.7);">
@@ -90,7 +90,7 @@
</tr>
<tr>
<td align="right" style="padding: 0 16px 14px 16px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
- <a href="#" style="text-decoration: none; color: #fff; display: block; padding: 0 5px; width: 100px; text-align: center; line-height: 40px; background: teal;">CTA ></a>
+ <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>
</td>
</tr>
</table>
@@ -116,8 +116,8 @@
</section>
<section class="pattern-desc">
- <h1>Description Overlay</h1>
- <p>An image with a description overlayed on top. As the screen size narrows the image scales and the text in the description container reflows.</p>
+ <h1>Description Overlay Bottom</h1>
+ <p>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.</p>
</section>
<section id="patternSource" class="pattern-source">
@@ -141,15 +141,15 @@
&lt;table cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;&gt;
&lt;tr&gt;
- &lt;td class=&quot;container&quot; background=&quot;http:&#x2F;&#x2F;www.fillmurray.com&#x2F;600&#x2F;300&quot; width=&quot;600&quot; height=&quot;300&quot; style=&quot;background-position: center top;&quot;&gt;
+ &lt;td class=&quot;container&quot; background=&quot;lindsey.jpg&quot; width=&quot;600&quot; height=&quot;448&quot; style=&quot;background-position: center top;&quot;&gt;
&lt;!--[if gte mso 9]&gt;
- &lt;v:rect xmlns:v=&quot;urn:schemas-microsoft-com:vml&quot; fill=&quot;true&quot; stroke=&quot;false&quot; style=&quot;width:600px;height:300px;&quot;&gt;
- &lt;v:fill type=&quot;tile&quot; src=&quot;http:&#x2F;&#x2F;www.fillmurray.com&#x2F;600&#x2F;300&quot; color=&quot;#ff0000&quot; &#x2F;&gt;
+ &lt;v:rect xmlns:v=&quot;urn:schemas-microsoft-com:vml&quot; fill=&quot;true&quot; stroke=&quot;false&quot; style=&quot;width:600px;height:448px;&quot;&gt;
+ &lt;v:fill type=&quot;tile&quot; src=&quot;lindsey.jpg&quot; color=&quot;#ff0000&quot; &#x2F;&gt;
&lt;v:textbox inset=&quot;0,0,0,0&quot;&gt;
&lt;![endif]--&gt;
&lt;table cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;&gt;
&lt;tr&gt;
- &lt;td class=&quot;spacer&quot; height=&quot;150&quot;&gt;&amp;nbsp;&lt;&#x2F;td&gt;
+ &lt;td class=&quot;spacer&quot; height=&quot;298&quot;&gt;&amp;nbsp;&lt;&#x2F;td&gt;
&lt;&#x2F;tr&gt;
&lt;tr&gt;
&lt;td class=&quot;inner-container&quot; width=&quot;600&quot; height=&quot;150&quot; align=&quot;left&quot; valign=&quot;top&quot; style=&quot;background-color: #ccc; background: rgba(30,30,30,0.7);&quot;&gt;
@@ -161,7 +161,7 @@
&lt;&#x2F;tr&gt;
&lt;tr&gt;
&lt;td align=&quot;right&quot; style=&quot;padding: 0 16px 14px 16px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;&quot;&gt;
- &lt;a href=&quot;#&quot; style=&quot;text-decoration: none; color: #fff; display: block; padding: 0 5px; width: 100px; text-align: center; line-height: 40px; background: teal;&quot;&gt;CTA &gt;&lt;&#x2F;a&gt;
+ &lt;a href=&quot;#&quot; style=&quot;text-decoration: none; color: #fff; display: block; padding: 0 5px; width: 100px; text-align: center; line-height: 40px; background: #b61528;&quot;&gt;CTA &gt;&lt;&#x2F;a&gt;
&lt;&#x2F;td&gt;
&lt;&#x2F;tr&gt;
&lt;&#x2F;table&gt;
@@ -0,0 +1,159 @@
+<!DOCTYPE html>
+<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
+<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="description" content="">
+ <meta name="viewport" content="width=device-width">
+ <title>Responsive Email Patterns</title>
+ <link rel="icon" type="icon" href="images/favicon.png">
+ <link href="../../stylesheets/all.css" rel="stylesheet" type="text/css" />
+ <script src="../../javascripts/plugins/modernizr.js" type="text/javascript"></script><script src="../../javascripts/init.js" type="text/javascript"></script>
+ </head>
+ <body class="patterns patterns_media patterns_media_description-overlay-right">
+
+ <header class="header interior">
+ <div class="wrap">
+ <a class="logo" href="http://www.responsiveemailpatterns.com">
+ <img src="http://briangraves.github.io/ResponsiveEmailPatterns/images/envelope.svg" alt="" width="20" />
+ <h1>Responsive Patterns</h1>
+ </a>
+
+ <!--<a id="source" href="#patternSource" class="button source">
+ <img src="../../images/source.svg" alt="" width="32" />
+ <h1>Source</h1>
+ </a>-->
+ <a id="context" href="#" class="button context">
+ <img src="../../images/context.svg" alt="" width="20" />
+ <h1>Context</h1>
+ </a>
+
+ </div>
+</header>
+
+ <section class="main">
+ <div class="wrap">
+ <section class="pattern-wrap">
+ <div class="pattern-header ">
+ <div class="pattern-logo">
+ <a href="#"><img src="http://placehold.it/156x46&text=Logo" alt="" style="display: block; border: 0;" /></a>
+ </div>
+ <div class="pattern-nav">
+ <a href="#">Navigation Item</a>
+ <a href="#">Navigation Item</a>
+ <a href="#">Navigation Item</a>
+ <a href="#">Navigation Item</a>
+ <a href="#">Navigation Item</a>
+ </div>
+ </div>
+
+
+
+ <style>
+ /* Description Overlay Right Pattern CSS */
+</style>
+
+<table cellpadding="0" cellspacing="0" class="container" style="position: relative;">
+ <tr>
+ <td class="col hero" width="405" align="left" valign="top" style="background: #fff;">
+ <img src="meat.jpg" alt="" style="display: block; border: 0;">
+ </td>
+ <td class="col" width="215" align="left" style="background-color: #ccc; background: rgba(30,30,30,0.7); position: relative;">
+ <table cellpadding="0" cellspacing="0">
+ <tr>
+ <td style="padding: 20px;">
+ <table cellpadding="0" cellspacing="0">
+ <tr>
+ <td align="left" style="font-family: arial,sans-serif; font-size: 16px; line-height: 22px; color: #fff;">
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero repellat placeat excepturi omnis quae laboriosam nesciunt.
+ </td>
+ </tr>
+ <tr>
+ <td align="left" style="padding-top: 15px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
+ <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>
+ </td>
+ </tr>
+ </table>
+ </td>
+ </tr>
+ </table>
+ </td>
+ </tr>
+</table>
+
+
+ <div class="pattern-footer">
+ <p>
+ This email was sent by: Your Company Here<br />
+ 4822 West 62nd Street Mission, KS 66205<br /><br />
+ <a href="#" style="color: #999;">Preferences</a> | <a href="#" style="color: #999;">Unsubscribe</a>
+ </p>
+ </div>
+ </section>
+
+ <section class="pattern-desc">
+ <h1>Description Overlay Right</h1>
+ <p></p>
+ </section>
+
+ <section id="patternSource" class="pattern-source">
+ <pre class="language-markup">
+ <code class="language-markup">
+ &lt;style&gt;
+ &#x2F;* Description Overlay Right Pattern CSS *&#x2F;
+&lt;&#x2F;style&gt;
+
+&lt;table cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; class=&quot;container&quot; style=&quot;position: relative;&quot;&gt;
+ &lt;tr&gt;
+ &lt;td class=&quot;col hero&quot; width=&quot;405&quot; align=&quot;left&quot; valign=&quot;top&quot; style=&quot;background: #fff;&quot;&gt;
+ &lt;img src=&quot;meat.jpg&quot; alt=&quot;&quot; style=&quot;display: block; border: 0;&quot;&gt;
+ &lt;&#x2F;td&gt;
+ &lt;td class=&quot;col&quot; width=&quot;215&quot; align=&quot;left&quot; style=&quot;background-color: #ccc; background: rgba(30,30,30,0.7); position: relative;&quot;&gt;
+ &lt;table cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;&gt;
+ &lt;tr&gt;
+ &lt;td style=&quot;padding: 20px;&quot;&gt;
+ &lt;table cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;&gt;
+ &lt;tr&gt;
+ &lt;td align=&quot;left&quot; style=&quot;font-family: arial,sans-serif; font-size: 16px; line-height: 22px; color: #fff;&quot;&gt;
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero repellat placeat excepturi omnis quae laboriosam nesciunt.
+ &lt;&#x2F;td&gt;
+ &lt;&#x2F;tr&gt;
+ &lt;tr&gt;
+ &lt;td align=&quot;left&quot; style=&quot;padding-top: 15px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;&quot;&gt;
+ &lt;a href=&quot;#&quot; style=&quot;text-decoration: none; color: #fff; display: block; padding: 0 5px; width: 100px; text-align: center; line-height: 40px; background: #b61528;&quot;&gt;CTA &gt;&lt;&#x2F;a&gt;
+ &lt;&#x2F;td&gt;
+ &lt;&#x2F;tr&gt;
+ &lt;&#x2F;table&gt;
+ &lt;&#x2F;td&gt;
+ &lt;&#x2F;tr&gt;
+ &lt;&#x2F;table&gt;
+ &lt;&#x2F;td&gt;
+ &lt;&#x2F;tr&gt;
+&lt;&#x2F;table&gt;
+
+ </code>
+ </pre>
+ </section>
+
+ </div>
+ </section>
+
+ <footer class="footer">
+ <nav>
+ <ul>
+ <li><a class="brand" href="http://www.responsiveemailpatterns.com">Responsive Email Patterns</a></li>
+ <li><a href="http://www.responsiveemailresources.com">Responsive Email Resources</a></li>
+ <li><a href="http://www.responsiveemailpatterns.com/support.html">Pattern Support</a></li>
+ <li><a href="https://github.com/briangraves/ResponsiveEmailPatterns">Fork on Github</a></li>
+ <li><a href="http://www.twitter.com/briangraves">@BrianGraves</a></li>
+ </ul>
+ </nav>
+</footer>
+
+ <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
+ <script src="../../javascripts/all.js" type="text/javascript"></script>
+ </body>
+</html>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -66,7 +66,7 @@
<div class="pattern">
<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">
- <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"></source>
+ <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>
<source type="video/ogg" src=""></source>
<source type="video/webm" src=""></source>
@@ -106,7 +106,7 @@
&lt;div class=&quot;pattern&quot;&gt;
&lt;video style=&quot;padding: 0px; margin: 0px; display: block;&quot; poster=&quot;http:&#x2F;&#x2F;b.vimeocdn.com&#x2F;ts&#x2F;364&#x2F;865&#x2F;364865123_960.jpg&quot; controls=&quot;controls&quot; height=&quot;337&quot; width=&quot;600&quot;&gt;
- &lt;source src=&quot;http:&#x2F;&#x2F;player.vimeo.com&#x2F;play_redirect?quality=hd&amp;amp;codecs=h264&amp;amp;clip_id=52861634&amp;amp;time=1361256207&amp;amp;sig=21d65c6cd03979983f6efa864c746c06&amp;amp;type=html5_desktop_local&quot;&gt;&lt;&#x2F;source&gt;
+ &lt;source src=&quot;http:&#x2F;&#x2F;player.vimeo.com&#x2F;play_redirect?quality=hd&amp;amp;codecs=h264&amp;amp;clip_id=52861634&amp;amp;time=1361256207&amp;amp;sig=21d65c6cd03979983f6efa864c746c06&amp;amp;type=html5_desktop_local&quot; type=&quot;video&#x2F;mp4&quot;&gt;&lt;&#x2F;source&gt;
&lt;source type=&quot;video&#x2F;ogg&quot; src=&quot;&quot;&gt;&lt;&#x2F;source&gt;
&lt;source type=&quot;video&#x2F;webm&quot; src=&quot;&quot;&gt;&lt;&#x2F;source&gt;
@@ -71,7 +71,7 @@
</style>
<div class="pattern">
- <img src="michael-jordan.jpg" alt="Michael Jordan" width="600" height="450" style="display: block; border: 0;" />
+ <img src="tattoos.jpg" alt="Tattoo &amp; Piercing" width="600" height="450" style="display: block; border: 0;" />
</div>
@@ -111,7 +111,7 @@
&lt;&#x2F;style&gt;
&lt;div class=&quot;pattern&quot;&gt;
- &lt;img src=&quot;michael-jordan.jpg&quot; alt=&quot;Michael Jordan&quot; width=&quot;600&quot; height=&quot;450&quot; style=&quot;display: block; border: 0;&quot; &#x2F;&gt;
+ &lt;img src=&quot;tattoos.jpg&quot; alt=&quot;Tattoo &amp;amp; Piercing&quot; width=&quot;600&quot; height=&quot;450&quot; style=&quot;display: block; border: 0;&quot; &#x2F;&gt;
&lt;&#x2F;div&gt;
</code>
Oops, something went wrong.

0 comments on commit 8c4226d

Please sign in to comment.