Skip to content

Commit

Permalink
Refactoring files structure + better demo page
Browse files Browse the repository at this point in the history
  • Loading branch information
@verlok
verlok committed Apr 21, 2014
1 parent ea38224 commit 2942b81
Show file tree
Hide file tree
Showing 7 changed files with 481 additions and 64 deletions.
6 changes: 3 additions & 3 deletions Gruntfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ module.exports = function(grunt) {
grunt.initConfig({
// Metadata.
meta: {
version: '3.2.0'
version: '3.2.1'
},
banner: '/*! picturePolyfill - v<%= meta.version %> - ' +
'<%= grunt.template.today("yyyy-mm-dd") %>\n' +
Expand All @@ -18,8 +18,8 @@ module.exports = function(grunt) {
banner: '<%= banner %>'
},
dist: {
src: 'picturePolyfill.js',
dest: 'picturePolyfill.min.js'
src: 'src/picturePolyfill.js',
dest: 'dist/picturePolyfill.min.js'
}
},
jshint: {
Expand Down
5 changes: 2 additions & 3 deletions bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
{
"name": "picturePolyfill",
"version": "3.2.0",
"version": "3.2.1",
"main": "picturePolyfill.js",
"ignore": [
".idea",
".gitignore",
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
"test"
],
"homepage": "https://github.com/verlok/picturePolyfill",
"authors": [
Expand Down
4 changes: 4 additions & 0 deletions dist/picturePolyfill.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

144 changes: 88 additions & 56 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,72 +4,104 @@
<meta charset="UTF-8">
<title>Responsive images using verlok/picturePolyfill - by Andrea Verlicchi</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/main.css"/>
<style>
body {font-family: Helvetica, Arial, sans-serif; margin: 0 0 2em 0; padding: 0; text-align: center}
a {color: #0b97c4; text-decoration: none; border-bottom: 1px dotted #2b81af; padding-bottom: .1em}
a:visited {color: #2F6FAD}
a:hover {color: #cc0000; border-bottom: 1px solid #cc0000}
.element a, .element span, .element img {display: block}
h2 {margin-top: 1.5em}
img {width: 100%; height: auto; border: 0}
@media screen and (min-width: 481px) {
.element {float: left; width: 50%}
}
.cf:before, .cf:after { content: " "; display: table}
.cf:after { clear: both}
</style>
</head>
<body>
<header>
<h1>
<span class="icon"></span>
<span class="text">picturePolyfill</span>
<span class="more">a picture polyfill to use responsive images today</span>
</h1>
<a href="https://twitter.com/picturePolyfill" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @picturePolyfill</a>
<!--
<ul>
<li>
<div class="text"><a href="#features">Features</a></div>
<div class="icon"></div>
</li>
<li>
<div class="text"><a href="#advantages">Advantages</a></div>
<div class="icon"></div>
</li>
<li>
<div class="text"><a href="#usage">Usage</a></div>
<div class="icon"></div>
</li>
</ul>
-->
</header>
<div id="container">

<main>
<div class="info">
<p>The underlying image is made using <strong>responsive images</strong> created using a real <code>&lt;picture&gt;</code> element, and the <a href="https://github.com/verlok/picturePolyfill">picturePolyfill</a> script.</p>
</div>
<picture data-alt="A beautiful responsive image" data-default-src="http://demo.api.pixtulate.com/demo/large-2.jpg?w=1440">
<source srcset="http://demo.api.pixtulate.com/demo/large-2.jpg?w=480, http://demo.api.pixtulate.com/demo/large-2.jpg?w=960 2x"/>
<source srcset="http://demo.api.pixtulate.com/demo/large-2.jpg?w=1024, http://demo.api.pixtulate.com/demo/large-2.jpg?w=2048 2x" media="(min-width: 481px)"/>
<source srcset="http://demo.api.pixtulate.com/demo/large-2.jpg?w=1280, http://demo.api.pixtulate.com/demo/large-2.jpg?w=2560 2x" media="(min-width: 1025px)"/>
<source srcset="http://demo.api.pixtulate.com/demo/large-2.jpg?w=1440, http://demo.api.pixtulate.com/demo/large-2.jpg?w=2880 2x" media="(min-width: 1281px)"/>
<source srcset="http://demo.api.pixtulate.com/demo/large-2.jpg?w=1920, http://demo.api.pixtulate.com/demo/large-2.jpg?w=3840 2x" media="(min-width: 1441px)"/>
<h1>Responsive images using <a href="https://github.com/verlok/picturePolyfill">picturePolyfill</a> - Demo</h1>

<a href="https://twitter.com/picturePolyfill" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @picturePolyfill</a>

<p>The following are some <strong>responsive images</strong> created using a real <code>&lt;picture&gt;</code> element, and the <a href="https://github.com/verlok/picturePolyfill">picturePolyfill</a> script.</p>
<p>Real time server side scaling in this demo is provided by <a href="http://www.pixtulate.com">Pixtulate</a>.</p>

<h2>Full width server-side scaled image</h2>

<picture data-alt="A beautiful responsive image" data-default-src="http://demo.api.pixtulate.com/demo/large-1.jpg?w=1440">
<source srcset="http://demo.api.pixtulate.com/demo/large-1.jpg?w=480, http://demo.api.pixtulate.com/demo/large-1.jpg?w=960 2x"/>
<source srcset="http://demo.api.pixtulate.com/demo/large-1.jpg?w=1024, http://demo.api.pixtulate.com/demo/large-1.jpg?w=2048 2x" media="(min-width: 481px)"/>
<source srcset="http://demo.api.pixtulate.com/demo/large-1.jpg?w=1440, http://demo.api.pixtulate.com/demo/large-1.jpg?w=2880 2x" media="(min-width: 1025px)"/>
<source srcset="http://demo.api.pixtulate.com/demo/large-1.jpg?w=1920, http://demo.api.pixtulate.com/demo/large-1.jpg?w=3840 2x" media="(min-width: 1441px)"/>
<noscript>
<img src="http://demo.api.pixtulate.com/demo/large-2.jpg?w=1440" alt="A beautiful responsive image"/>
</noscript>
</picture>
</main>
<!--
<section>
<h1>Features</h1>
</section>

<section>
<h1>Advantages</h1>
<ul>
<li>Performing</li>
<li>Unit tested</li>
<li>Ajax calls</li>
</ul>
</section>
<h2>Half width server-side scaled images</h2>

<div class="cf">
<div class="element">
<h3>With HD (Retina) display support</h3>
<picture data-alt="A beautiful responsive image" data-default-src="http://demo.api.pixtulate.com/demo/large-2.jpg?w=1440">
<source srcset="http://demo.api.pixtulate.com/demo/large-2.jpg?w=480, http://demo.api.pixtulate.com/demo/large-2.jpg?w=960 2x"/>
<source srcset="http://demo.api.pixtulate.com/demo/large-2.jpg?w=512, http://demo.api.pixtulate.com/demo/large-2.jpg?w=1024 2x" media="(min-width: 481px)"/>
<source srcset="http://demo.api.pixtulate.com/demo/large-2.jpg?w=720, http://demo.api.pixtulate.com/demo/large-2.jpg?w=1440 2x" media="(min-width: 1025px)"/>
<source srcset="http://demo.api.pixtulate.com/demo/large-2.jpg?w=960, http://demo.api.pixtulate.com/demo/large-2.jpg?w=1920 2x" media="(min-width: 1441px)"/>
<noscript>
<img src="http://demo.api.pixtulate.com/demo/large-2.jpg?w=1440" alt="A beautiful responsive image"/>
</noscript>
</picture>
</div>
<div class="element">
<h3>Without HD (Retina) display support</h3>
<picture data-alt="A beautiful responsive image" data-default-src="http://demo.api.pixtulate.com/demo/large-2.jpg?w=1440">
<source src="http://demo.api.pixtulate.com/demo/large-2.jpg?w=480"/>
<source src="http://demo.api.pixtulate.com/demo/large-2.jpg?w=512" media="(min-width: 481px)"/>
<source src="http://demo.api.pixtulate.com/demo/large-2.jpg?w=720" media="(min-width: 1025px)"/>
<source src="http://demo.api.pixtulate.com/demo/large-2.jpg?w=960" media="(min-width: 1441px)"/>
<noscript>
<img src="http://demo.api.pixtulate.com/demo/large-2.jpg?w=1440" alt="A beautiful responsive image"/>
</noscript>
</picture>
</div>
</div>

<h2>Half width pre-scaled images</h2>

<div class="cf">
<div class="element">
<h3>With HD (Retina) display support</h3>
<picture data-alt="A beautiful responsive image" data-default-src="img/960x960.gif">
<source srcset="img/480x480.gif, img/480x480x2.gif 2x"/>
<source srcset="img/512x512.gif, img/512x512x2.gif 2x" media="(min-width: 481px)"/>
<source srcset="img/720x720.gif, img/720x720x2.gif 2x" media="(min-width: 1025px)"/>
<source srcset="img/960x960.gif, img/960x960x2.gif 2x" media="(min-width: 1441px)"/>
<noscript>
<img src="img/960x960.gif" alt="A beautiful responsive image"/>
</noscript>
</picture>
</div>
<div class="element">
<h3>Without HD (Retina) display support</h3>
<picture data-alt="A beautiful responsive image" data-default-src="img/960x960.gif">
<source src="img/480x480.gif"/>
<source src="img/512x512.gif" media="(min-width: 481px)"/>
<source src="img/720x720.gif" media="(min-width: 1025px)"/>
<source src="img/960x960.gif" media="(min-width: 1441px)"/>
<noscript>
<img src="img/960x960.gif" alt="A beautiful responsive image"/>
</noscript>
</picture>
</div>
</div>

<section>
Usage
</section>
-->
<footer>
<p>Real time server side image scaling is provided by <a href="http://www.pixtulate.com">Pixtulate</a>.</p>
</footer>
</div>

<script src="picturePolyfill.min.js"></script>
<script src="dist/picturePolyfill.min.js"></script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

</body>
Expand Down
2 changes: 1 addition & 1 deletion karma.conf.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ module.exports = function(config) {
'test/sinon-1.9.0.js',
'test/sinon-qunit-1.0.0.js',
'test/picturePolyfill.qunit.js',
'picturePolyfill.js'
'src/picturePolyfill.js'
],


Expand Down
Loading

0 comments on commit 2942b81

Please sign in to comment.