Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
add retina image thumbnails to mediabundle
- Loading branch information
Showing
41 changed files
with
5,354 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
{ | ||
"name": "picturefill", | ||
"repo": "scottjehl/picturefill", | ||
"description": "A polyfill for responsive images (http://picture.responsiveimages.org/) that you can use today.", | ||
"main": "dist/picturefill.js", | ||
"scripts": [ | ||
"dist/picturefill.js" | ||
], | ||
"license": "MIT", | ||
"homepage": "http://scottjehl.github.com/picturefill/", | ||
"authors": [ | ||
"Scott Jehl <scottjehl@gmail.com>" | ||
], | ||
"moduleType": [ | ||
"amd", | ||
"globals", | ||
"node" | ||
], | ||
"keywords": [ | ||
"picture", | ||
"srcset", | ||
"polyfill" | ||
], | ||
"ignore": [ | ||
"**/.*", | ||
"node_modules", | ||
"bower_components", | ||
"test", | ||
"tests", | ||
"examples", | ||
"perf-test" | ||
], | ||
"version": "3.0.1", | ||
"_release": "3.0.1", | ||
"_resolution": { | ||
"type": "version", | ||
"tag": "3.0.1", | ||
"commit": "87597fca6842c7df9e4f16da3ffda89ccf2351b6" | ||
}, | ||
"_source": "git://github.com/scottjehl/picturefill.git", | ||
"_target": "~3.0.1", | ||
"_originalSource": "picturefill" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
External authors, ordered by first contribution. | ||
|
||
David Beesley, @davebeesley | ||
Gordon Brander, @gordonbrander | ||
Max Klenk, @maxklenk | ||
@ignasio | ||
Dennis Gaebel, @grayghostvisuals | ||
@codekipple | ||
@jelmerdemaat | ||
Brandon Belvin, @pizzabrandon | ||
Jonathan Goldsmith, @goldsmith | ||
Aaron Raimist, @aaronraimist | ||
@floriangouy | ||
John Albin Wilkins, @JohnAlbin | ||
Maxime Thirouin, @MoOx | ||
William Turrell, @wturrell | ||
Brian Muenzenmeyer, @bmuenzenmeyer | ||
Bryan Burgers, @bryanburgers | ||
@michaelgilley | ||
Tina Holly, @tinacious | ||
Travis Northcutt, @tnorthcutt | ||
@Zearin | ||
Samy Al Zahrani, @salzhrani | ||
Shawn Jansepar, @jansepar | ||
John Bender, @johnbender | ||
Thorsten Lorenz, @thlorenz | ||
@gBokiau | ||
Andy Matthews, @commadelimited | ||
James Kerr, @jkerr838 | ||
Pascal Borreli, @pborreli | ||
Christoph Rohrer, @crohrer | ||
Krister Kari, @kristerkari | ||
Zoltan Hawryluk, @zoltan-dulac | ||
|
||
The Picturefill core team | ||
|
||
Scott Jehl, @scottjehl | ||
Mat Marquis, @wilto | ||
Mike Engel, @beardfury | ||
Alex Jegtnes, @jegtnes | ||
Sarah Forst, @quoo | ||
Alexander Farkas, @aFarkas | ||
Alex Bell, @albell |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,60 @@ | ||
# Contributing | ||
|
||
## Project Scope | ||
Picturefill aims to polyfill the standard features of the `picture` element and related `srcset`, `sizes`, `type`, and `media` attributes (some of which work on `img` elements without a `picture` parent as well). Issues and contributions that fall outside of this scope are not likely to be accepted by the project. Some exceptions include workarounds that improve browser support for standard features. | ||
|
||
## Code License | ||
|
||
Picturefill is an open source project falling under the MIT License. By using, distributing, or contributing to this project, you accept and agree that all code within the Picturefill project are licensed under MIT license. | ||
|
||
## Working on Picturefill | ||
|
||
### Issue Discussion | ||
|
||
General Picturefill discussion takes place in Slack, at [http://picturefill.slack.com](http://picturefill.slack.com). To join, send an email to `picturefill` at `ricg.io`. Discussion of issues pertaining to the responsive images specifications takes place in the [RICG IRC channel](irc://irc.w3.org:6665/#respimg) and [issue tracker](https://github.com/responsiveimagescg/picture-element/issues/). | ||
|
||
You can connect to the Picturefill Slack channel [via IRC](https://slack.zendesk.com/hc/en-us/articles/201727913-Connecting-to-Slack-over-IRC-and-XMPP) (SSL enabled). | ||
|
||
### Modifying the code | ||
First, ensure that you have the latest [Node.js](http://nodejs.org/) or [io.js](http://iojs.org) and [npm](http://npmjs.org/) installed. | ||
|
||
Test that Grunt's CLI is installed by running `grunt --version`. If the command isn't found, run `npm install -g grunt-cli`. For more information about installing Grunt, see the [getting started guide](http://gruntjs.com/getting-started). | ||
|
||
1. Fork and clone the repo. | ||
1. Run `npm install` to install all dependencies (including Grunt). | ||
1. Run `grunt` to grunt this project. | ||
|
||
Assuming that you don't see any red, you're ready to go. Just be sure to run `grunt` after making any changes, to ensure that nothing is broken. | ||
|
||
### Development Workflow | ||
|
||
**Note**: The `master` branch now represents the publishing branch. Anything on master should be publishable to npm and bower. When something goes into master, it gets published. Minor version branches (`2.2`, `2.3`, etc) also exist to capture in-progress work on a particular version of picturefill. Once work on a version branch is complete, it gets merged into master to be published. | ||
|
||
1. If no issue already exists for the work you’ll be doing, create one to document the problem(s) being solved and self-assign. | ||
1. Create a new branch based off of the minor version branch you're fixing (`2.3`, `2.2`, etc) — please don't work in the `master` branch directly. We recommend naming the branch to match the issue being addressed (`issue-777`). | ||
1. Add failing tests for the change you want to make. Run `grunt` to see the tests fail. | ||
1. Fix stuff. | ||
1. Run `grunt` to see if the tests pass. Repeat steps 2-4 until done. | ||
1. Open `test/*.html` unit test file(s) in actual browsers to ensure tests pass everywhere. | ||
1. Update the documentation to reflect any changes. | ||
1. Push to your fork or push your issue-specific branch to the main repo, then submit a pull request against the minor version branch you're fixing. `2.2`, `2.3`, etc. | ||
1. Once tested and +1’d by another team member (with no outstanding objections), self-merge into the branch specified in the pull request. | ||
1. Once ready to release to the public, merge the minor version branch into master and publish to npm and create a tag for bower. | ||
|
||
### Versioning | ||
|
||
The rules of [semver](http://semver.org/) don’t necessarily apply here in the case of major releases (as a polyfill for a stable spec, we _shouldn’t_ have breaking changes), so we’re using the following: | ||
|
||
1. MAJOR versions at maintaners’ discretion following significant changes to the codebase (e.g. refactoring core) | ||
1. MINOR versions for backwards-compatible enhancements (e.g. performance improvements) | ||
1. PATCH versions for backwards-compatible bug fixes (e.g. spec compliance bugs, support issues) | ||
|
||
### Important notes | ||
|
||
Please don't edit files in the `dist` subdirectory as they are generated via Grunt. You'll find source code in the `src` subdirectory! | ||
|
||
#### Code style | ||
Regarding code style like indentation and whitespace, **follow the conventions you see used in the source already.** | ||
|
||
#### PhantomJS | ||
While Grunt can run the included unit tests via [PhantomJS](http://phantomjs.org/), this shouldn't be considered a substitute for the real thing. Please be sure to test the `test/*.html` unit test file(s) in _actual_ browsers. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
The MIT License (MIT) | ||
|
||
Copyright (c) 2014 Filament Group | ||
|
||
Permission is hereby granted, free of charge, to any person obtaining a copy | ||
of this software and associated documentation files (the "Software"), to deal | ||
in the Software without restriction, including without limitation the rights | ||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | ||
copies of the Software, and to permit persons to whom the Software is | ||
furnished to do so, subject to the following conditions: | ||
|
||
The above copyright notice and this permission notice shall be included in all | ||
copies or substantial portions of the Software. | ||
|
||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | ||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | ||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | ||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | ||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE | ||
SOFTWARE. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,53 @@ | ||
# Picturefill | ||
A [responsive image](http://www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content.html#embedded-content) polyfill. | ||
* Authors: See [Authors.txt](https://raw.githubusercontent.com/scottjehl/picturefill/master/Authors.txt) | ||
* License: MIT | ||
|
||
[![build-status](https://api.travis-ci.org/scottjehl/picturefill.svg)](https://travis-ci.org/scottjehl/picturefill) [<img src="https://pf-slackin.herokuapp.com/badge.svg" alt="Join Slack channel">](https://pf-slackin.herokuapp.com/) | ||
|
||
Picturefill has three versions: | ||
|
||
* Version 1 mimics the Picture element pattern with `span` elements. It is no longer maintained. | ||
* Version 2 is a lightweight polyfill of the [Picture element draft specification](http://www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content.html#embedded-content). | ||
* Version 3.0.0 is the current stable release. | ||
|
||
## Usage, Demos, Docs | ||
To find out how to use Picturefill, visit the [project site](http://scottjehl.github.com/picturefill/). | ||
|
||
## The gotchas | ||
Be it browser issues, the responsive images specifications, or Picturefill itself, there are a couple gotchas you should be aware of when working with Picturefill: | ||
|
||
- Firefox 38 and 39 has some bugs [[1]](https://bugzilla.mozilla.org/show_bug.cgi?id=1139560) [[2]](https://bugzilla.mozilla.org/show_bug.cgi?id=1139554) [[3]](https://bugzilla.mozilla.org/show_bug.cgi?id=1135812) where images won't update on screen resize. These issues are addressed by Picturefill 3.0.0, and should be fixed in Firefox 41. | ||
|
||
- Per the `picture` spec, using `%` _isn't_ allowed in the `sizes` attribute. Using `%` will fallback to `100vw`. | ||
|
||
- Trying to use the `src` attribute in a browser that _doesn't_ support `picture` natively can result in a double download. To avoid this, don't use the `src` attribute on the `img` tag: | ||
|
||
```html | ||
<picture> | ||
<source srcset="../img/sample.svg" media="(min-width: 768px)" /> | ||
<img srcset="default.png" alt="Sample pic" /> | ||
</picture> | ||
``` | ||
|
||
- If you only want to have an image show up at certain sizes, and not show up at others, you will need to use a transparent placeholder gif: | ||
|
||
```html | ||
<picture> | ||
<source srcset="../img/sample.svg" media="(min-width: 768px)" /> | ||
<img srcset="data:image/gifbase64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" | ||
alt="Sample pic" /> | ||
</picture> | ||
``` | ||
|
||
## Contributing | ||
For information on how to contribute code to Picturefill, check out [`CONTRIBUTING.md`](CONTRIBUTING.md) | ||
|
||
## Issues | ||
If you find a bug in Picturefill, please add it to [the issue tracker](https://github.com/scottjehl/picturefill/issues) | ||
|
||
## Discussion | ||
Picturefill discussion takes place via Slack. For an invitation, visit [https://pf-slackin.herokuapp.com/](https://pf-slackin.herokuapp.com/) | ||
|
||
## Support | ||
There are currently no known unsupported browsers, provided that you use the markup patterns provided. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
{ | ||
"name": "picturefill", | ||
"repo": "scottjehl/picturefill", | ||
"description": "A polyfill for responsive images (http://picture.responsiveimages.org/) that you can use today.", | ||
"main": "dist/picturefill.js", | ||
"scripts": [ | ||
"dist/picturefill.js" | ||
], | ||
"license": "MIT", | ||
"homepage": "http://scottjehl.github.com/picturefill/", | ||
"authors": [ | ||
"Scott Jehl <scottjehl@gmail.com>" | ||
], | ||
"moduleType": [ | ||
"amd", | ||
"globals", | ||
"node" | ||
], | ||
"keywords": [ | ||
"picture", | ||
"srcset", | ||
"polyfill" | ||
], | ||
"ignore": [ | ||
"**/.*", | ||
"node_modules", | ||
"bower_components", | ||
"test", | ||
"tests", | ||
"examples", | ||
"perf-test" | ||
] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
{ | ||
"name": "scottjehl/picturefill", | ||
"description": "A responsive image polyfill for <picture>, srcset, sizes, and more.", | ||
"type": "component", | ||
"homepage": "http://scottjehl.github.com/picturefill/", | ||
"license": "MIT", | ||
"extra": { | ||
"component": { | ||
"scripts": [ | ||
"dist/picturefill.js" | ||
], | ||
"files": [ | ||
"dist/picturefill.min.js", | ||
"extensions/ie8-mq-shim.js" | ||
] | ||
} | ||
} | ||
} |
Oops, something went wrong.