Skip to content

Commit

Permalink
Add distinct demo pages
Browse files Browse the repository at this point in the history 
This pull request adds demo pages for each distinct code
sample. This allows users to see the effect of resizing
the window on the photo without large quantities of text
pushing the image off the page.
  • Loading branch information
@commadelimited
commadelimited committed Apr 22, 2014
1 parent cdc1fba commit 43388ae
Show file tree
Hide file tree
Showing 6 changed files with 330 additions and 146 deletions.
35 changes: 35 additions & 0 deletions demo-01.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Picturefill - Demo</title>
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400' rel='stylesheet' type='text/css'>
<link href='src/styles.css' rel='stylesheet' type='text/css'>

<script>
// Picture element HTML shim|v it for old IE (pairs with Picturefill.js)
document.createElement( "picture" );
</script>
<script async="true" src="dist/picturefill.js"></script>
</head>
<body>
<a href="http://responsiveimages.org/" class="ricg"><img src="https://raw.github.com/ResponsiveImagesCG/meta/master/logo/Web/RICG_logo_small.png"></a>



<h3>An img with "srcset" and sizes" attributes:</h3>
<pre><code>&lt;img sizes=&quot;(max-width: 30em) 100%, (max-width: 50em) 75%, 50%&quot;
srcset=&quot;examples/images/pic-small.png 400w, examples/images/pic-medium.png 800w, examples/images/pic-large.png 1200w&quot; alt=&quot;Obama with soldiers&quot;&gt;
</code></pre>

<p>Here's how that renders in the browser. Feel free to resize to see it change.</p>

<img sizes="(max-width: 30em) 100%, (max-width: 50em) 75%, 50%"
srcset="examples/images/pic-small.png 400w, examples/images/pic-medium.png 800w, examples/images/pic-large.png 1200w" alt="Obama with soldiers">



</body>
</html>
49 changes: 49 additions & 0 deletions demo-02.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Picturefill - Demo</title>
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400' rel='stylesheet' type='text/css'>
<link href='src/styles.css' rel='stylesheet' type='text/css'>

<script>
// Picture element HTML shim|v it for old IE (pairs with Picturefill.js)
document.createElement( "picture" );
</script>
<script async="true" src="dist/picturefill.js"></script>
</head>
<body>
<a href="http://responsiveimages.org/" class="ricg"><img src="https://raw.github.com/ResponsiveImagesCG/meta/master/logo/Web/RICG_logo_small.png"></a>



<h3>Supporting Picture in Internet Explorer 9</h3>
<p>While most versions of IE (even older ones!) are supported well, IE9 has a little conflict to work around. To support IE9, you will need to wrap a <code>video</code> element wrapper around the source elements in your <code>picture</code> tag. You can do this using conditional comments, like so:</p>

<pre><code>&lt;picture&gt;
&lt;!--[if IE 9]&gt;&lt;video style=&quot;display: none;&quot;&gt;&lt;![endif]--&gt;
&lt;source srcset=&quot;examples/images/extralarge.jpg&quot; media=&quot;(min-width: 1000px)&quot;&gt;
&lt;source srcset=&quot;examples/images/large.jpg&quot; media=&quot;(min-width: 800px)&quot;&gt;
&lt;source srcset=&quot;examples/images/medium.jpg&quot;&gt;
&lt;!--[if IE 9]&gt;&lt;/video&gt;&lt;![endif]--&gt;
&lt;img srcset=&quot;examples/images/medium.jpg&quot; alt=&quot;A giant stone face at The Bayon temple in Angkor Thom, Cambodia&quot;&gt;
&lt;/picture&gt;
</code></pre>

<p>Here's how that renders in the browser. Feel free to resize to see it change.</p>

<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="examples/images/extralarge.jpg" media="(min-width: 1000px)">
<source srcset="examples/images/large.jpg" media="(min-width: 800px)">
<source srcset="examples/images/medium.jpg">
<!--[if IE 9]></video><![endif]-->
<img srcset="examples/images/medium.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
</picture>



</body>
</html>
45 changes: 45 additions & 0 deletions demo-03.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Picturefill - Demo</title>
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400' rel='stylesheet' type='text/css'>
<link href='src/styles.css' rel='stylesheet' type='text/css'>

<script>
// Picture element HTML shim|v it for old IE (pairs with Picturefill.js)
document.createElement( "picture" );
</script>
<script async="true" src="dist/picturefill.js"></script>
</head>
<body>
<a href="http://responsiveimages.org/" class="ricg"><img src="https://raw.github.com/ResponsiveImagesCG/meta/master/logo/Web/RICG_logo_small.png"></a>



<h3><code>media</code> and <code>srcset</code> syntax:</h3>
<p>The <code>1x</code>, <code>2x</code> syntax in <code>srcset</code> acts as a shorthand for more complex resolution media queries. When natively supported, <code>srcset</code> will allow the UA to override requests for higher-resolution options based on a bandwidth limitations or a user preference (see #9 in the <a href="http://usecases.responsiveimages.org/#h2_requirements">Responsive Images Use Cases and Requirements</a>).</p>

<pre><code>&lt;picture&gt;
&lt;!--[if IE 9]&gt;&lt;video style=&quot;display: none;&quot;&gt;&lt;![endif]--&gt;
&lt;source srcset=&quot;examples/images/large.jpg, examples/images/extralarge.jpg 2x&quot; media=&quot;(min-width: 800px)&quot;&gt;
&lt;source srcset=&quot;examples/images/small.jpg, examples/images/medium.jpg 2x&quot;&gt;
&lt;!--[if IE 9]&gt;&lt;/video&gt;&lt;![endif]--&gt;
&lt;img srcset=&quot;examples/images/small.jpg, examples/images/medium.jpg 2x&quot; alt=&quot;A giant stone face at The Bayon temple in Angkor Thom, Cambodia&quot;&gt;
&lt;/picture&gt;
</code></pre>

<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="examples/images/large.jpg, examples/images/extralarge.jpg 2x" media="(min-width: 800px)">
<source srcset="examples/images/small.jpg, examples/images/medium.jpg 2x">
<!--[if IE 9]></video><![endif]-->
<img srcset="examples/images/small.jpg, examples/images/medium.jpg 2x" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
</picture>



</body>
</html>
47 changes: 47 additions & 0 deletions demo-04.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Picturefill - Demo</title>
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400' rel='stylesheet' type='text/css'>
<link href='src/styles.css' rel='stylesheet' type='text/css'>

<script>
// Picture element HTML shim|v it for old IE (pairs with Picturefill.js)
document.createElement( "picture" );
</script>
<script async="true" src="dist/picturefill.js"></script>
</head>
<body>
<a href="http://responsiveimages.org/" class="ricg"><img src="https://raw.github.com/ResponsiveImagesCG/meta/master/logo/Web/RICG_logo_small.png"></a>



<h3><code>media</code> example with one webp source qualified with a <code>type</code> attribute.</h3>
<p>Note: Picturefill supports SVG and WebP types on any source element, and will disregard a <code>source</code> if its type is not supported in a particular environment:</p>

<pre><code>&lt;picture&gt;
&lt;!--[if IE 9]&gt;&lt;video style=&quot;display: none;&quot;&gt;&lt;![endif]--&gt;
&lt;source srcset=&quot;examples/images/large.webp&quot; media=&quot;(min-width: 800px)&quot; type=&quot;image/webp&quot;&gt;
&lt;source srcset=&quot;examples/images/large.jpg&quot; media=&quot;(min-width: 800px)&quot;&gt;
&lt;source srcset=&quot;examples/images/medium.jpg&quot; media=&quot;(min-width: 400px)&quot;&gt;
&lt;!--[if IE 9]&gt;&lt;/video&gt;&lt;![endif]--&gt;
&lt;img srcset=&quot;examples/images/small.jpg&quot; alt=&quot;A giant stone face at The Bayon temple in Angkor Thom, Cambodia&quot;&gt;
&lt;/picture&gt;
</code></pre>

<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="examples/images/large.webp" media="(min-width: 800px)" type="image/webp">
<source srcset="examples/images/large.jpg" media="(min-width: 800px)">
<source srcset="examples/images/medium.jpg" media="(min-width: 400px)">
<!--[if IE 9]></video><![endif]-->
<img srcset="examples/images/small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
</picture>



</body>
</html>
157 changes: 11 additions & 146 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,153 +6,8 @@
<title>Picturefill</title>
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400' rel='stylesheet' type='text/css'>
<link href='src/styles.css' rel='stylesheet' type='text/css'>


<style>
body {
font-family: 'Source Sans Pro', sans-serif;
margin: 3em 5%;
color: #333;
line-height: 1.4;
}
a {
color: #e6615e;
}
a:hover {
text-decoration: none;
}
.ricg img {
display: block;
margin: 0 auto 1em;
max-width: 8em;
}
@media (min-width: 60em){
body {
width: 54em;
margin: 3em auto;
}
}
h1 {
clear: both;
font-family: 'Raleway', sans-serif;
text-align: center;
font-size: 2.8em;
margin: 0;
color: #951c19;
}
h1 em {
display: block;
font-size: .36em;
color: #444;
font-style: normal;
margin: .1em 0 1em;
font-weight: normal;
}
p, li {
font-size: 1.1em;
margin: .6em 0 .8em;
}

h1 .picture,
p code {
background: papayawhip;
border-radius: .3em;
padding: 0 .2em;
border: 1px solid rgba(0,0,0,.1);
}
.filament-logo {
display: inline;
background: #247201;
padding: .1em .3em;
margin: 0 .1em 0;
max-width: 7em;
border-radius: 3px;
position: relative;
top: .3em;
}
.nav {
text-align: center;
display: block;
padding: 0 5%;
border-top: 1px solid papayawhip;
border-bottom: 1px solid papayawhip;
margin: 0 auto 2em;
background: #fafafa;
font-size: 1em;
color: #444;
width: 90%;

}
.nav li {
display: block;
font-size: .9em;
padding: .4em 0;
margin: 0;
border-top: 1px solid #fff;
}
.nav li:first-child {
border: none;
}
.nav li a {
display: inline-block;
text-decoration: none;
color: #222;
}
.nav li a:hover {
background: papayawhip;
}
@media (min-width: 44em){
.nav {
display: table;
border: 1px solid papayawhip;
width: 80%;
padding: 0;
}
.nav li {
display: table-cell;
padding: 0;
border: 0;
font-size: 1em;
}
.nav li a {
padding: .8em 0;
display: block;
}
}
pre {
overflow: auto;
background: #fafafa;
font-size: 1em;
border: 2px solid #ddd;
padding: .5em 1em;
width: 100%;
box-sizing: border-box;
font-family: "monaco", monospace;
}
pre code {
margin: 0;
padding: 0;
}
img {
max-width: 100%
}
h2 {
margin: 2em 0;
font-family: 'Raleway', sans-serif;
font-size: 1.2em;
border-bottom: 1px solid papayawhip;
text-align: center;
padding: .3em 0 .4em;
}
.note {
font-style: italic;
font-size: .9em;
}
h3 {
font-size: 1.1em;
font-weight: bold;
}
</style>
<script>
// Picture element HTML shim|v it for old IE (pairs with Picturefill.js)
document.createElement( "picture" );
Expand Down Expand Up @@ -236,6 +91,8 @@ <h3>An img with "srcset" and sizes" attributes:</h3>
<img sizes="(max-width: 30em) 100%, (max-width: 50em) 75%, 50%"
srcset="examples/images/pic-small.png 400w, examples/images/pic-medium.png 800w, examples/images/pic-large.png 1200w" alt="Obama with soldiers">

<p><a href="demo-01.html" target="_blank">Open this demo in a new window</a></p>

<h2>Using the <code>picture</code> element</h2>

<p>The <code>picture</code> element requires a little more markup than the example above, but it allows you to use features like CSS3 Media Queries to pair image sources with other layout conditions in your designs. </p>
Expand Down Expand Up @@ -276,10 +133,13 @@ <h3>Supporting Picture in Internet Explorer 9</h3>
<img srcset="examples/images/medium.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
</picture>

<p><a href="demo-02.html" target="_blank">Open this demo in a new window</a></p>

<h2>More Picture markup examples</h2>

<h3><code>media</code> and <code>srcset</code> syntax:</h3>
<p>The <code>1x</code>, <code>2x</code> syntax in <code>srcset</code> acts as a shorthand for more complex resolution media queries. When natively supported, <code>srcset</code> will allow the UA to override requests for higher-resolution options based on a bandwidth limitations or a user preference (see #9 in the <a href="http://usecases.responsiveimages.org/#h2_requirements">Responsive Images Use Cases and Requirements</a>).</p>

<pre><code>&lt;picture&gt;
&lt;!--[if IE 9]&gt;&lt;video style=&quot;display: none;&quot;&gt;&lt;![endif]--&gt;
&lt;source srcset=&quot;examples/images/large.jpg, examples/images/extralarge.jpg 2x&quot; media=&quot;(min-width: 800px)&quot;&gt;
Expand All @@ -288,6 +148,7 @@ <h3><code>media</code> and <code>srcset</code> syntax:</h3>
&lt;img srcset=&quot;examples/images/small.jpg, examples/images/medium.jpg 2x&quot; alt=&quot;A giant stone face at The Bayon temple in Angkor Thom, Cambodia&quot;&gt;
&lt;/picture&gt;
</code></pre>

<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="examples/images/large.jpg, examples/images/extralarge.jpg 2x" media="(min-width: 800px)">
Expand All @@ -296,6 +157,8 @@ <h3><code>media</code> and <code>srcset</code> syntax:</h3>
<img srcset="examples/images/small.jpg, examples/images/medium.jpg 2x" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
</picture>

<p><a href="demo-03.html" target="_blank">Open this demo in a new window</a></p>

<h3><code>media</code> example with one webp source qualified with a <code>type</code> attribute.</h3>
<p>Note: Picturefill supports SVG and WebP types on any source element, and will disregard a <code>source</code> if its type is not supported in a particular environment:</p>

Expand All @@ -318,6 +181,8 @@ <h3><code>media</code> example with one webp source qualified with a <code>type<
<img srcset="examples/images/small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
</picture>

<p><a href="demo-04.html" target="_blank">Open this demo in a new window</a></p>

<h2 id="api">Picturefill JavaScript API</h2>

<p>Under ordinary circumstances, you likely won't need to do more than include picturefill.js in your page, but in some situations you may want to run picturefill's function manually yourself, and there are a few options to keep in mind:</p>
Expand Down
Loading

0 comments on commit 43388ae

Please sign in to comment.