├── .babelrc
├── .editorconfig
├── .eslintignore
├── .eslintrc
├── .flowconfig
├── .github
├── CODE_OF_CONDUCT.md
└── ISSUE_TEMPLATE.md
├── .gitignore
├── .npmignore
├── .travis.yml
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── __tests__
└── retina.test.js
├── bower.json
├── dist
├── _retina.sass
├── _retina.scss
├── retina.js
├── retina.js.map
├── retina.less
├── retina.min.js
├── retina.min.js.map
└── retina.styl
├── jest.config.json
├── package.json
├── rollup.config.js
├── src
├── _retina.sass
├── _retina.scss
├── retina.js
├── retina.less
└── retina.styl
└── yarn.lock
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["env"],
3 | "plugins": ["transform-flow-strip-types"]
4 | }
5 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | end_of_line = lf
5 | insert_final_newline = true
6 |
7 | # Set default charset
8 | [*]
9 | charset = utf-8
10 | indent_size = 2
11 | indent_style = space
12 | trim_trailing_whitespace = true
13 |
14 | # JavaScript, JSON, JSX
15 | [*.{js,json,jsx}]
16 | indent_size = 2
17 | indent_style = space
18 | trim_trailing_whitespace = true
19 | insert_final_newline = true
20 |
21 | # CSS
22 | # SASS
23 | # https://sass-guidelin.es/#syntax--formatting
24 | # https://google.github.io/styleguide/htmlcssguide.xml#General_Formatting_Rules
25 | # http://cssguidelin.es/#syntax-and-formatting
26 | [*.{css,sass,scss,less,styl}]
27 | indent_size = 2
28 | indent_style = space
29 | trim_trailing_whitespace = true
30 |
31 |
32 | [*.md]
33 | trim_trailing_whitespace=false
34 |
35 | # YAML
36 | # http://yaml.org/spec/1.2/2009-07-21/spec.html#id2576668
37 | [*.{yaml,yml}]
38 | indent_size = 2
39 | indent_style = space
40 |
--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | test/*
2 | dist/*
3 | es/
4 | dev/
5 | flow-typed
6 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["boldr"]
3 | }
4 |
--------------------------------------------------------------------------------
/.flowconfig:
--------------------------------------------------------------------------------
1 | [ignore]
2 | .*/node_modules/.*
3 | .*/dev/.*
4 | .*/es/.*
5 | .*/dist/.*
6 | .*/__tests__/.*
7 | .*/.idea/.*
8 | .*/.vscode/.*
9 | .*/coverage/.*
10 |
11 | [libs]
12 | flow-typed/npm
13 |
14 | [options]
15 | emoji=true
16 | module.system=node
17 |
18 |
19 | esproposal.decorators=ignore
20 | esproposal.export_star_as=ignore
21 | module.system.node.resolve_dirname=node_modules
22 | module.ignore_non_literal_requires=true
23 | munge_underscores=false
24 |
25 |
26 | suppress_comment=\\(.\\|\n\\)*\\$FlowIssue
27 | suppress_comment= \\(.\\|\n\\)*\\$FlowIgnore
28 |
29 | [version]
30 | 0.48.0
31 |
--------------------------------------------------------------------------------
/.github/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | # Code of Conduct
2 |
3 | ### Conduct
4 |
5 | * We are committed to providing a friendly, safe and welcoming
6 | environment for all, regardless of level of experience, gender
7 | identity and expression, sexual orientation, disability,
8 | personal appearance, body size, race, ethnicity, age, religion,
9 | nationality, or other similar characteristic.
10 | * Please avoid using overtly sexual nicknames or other nicknames that
11 | might detract from a friendly, safe and welcoming environment for
12 | all.
13 | * Please be kind and courteous. There's no need to be mean or rude.
14 | * Respect that some individuals and cultures consider the casual use of
15 | profanity offensive and off-putting.
16 | * Respect that people have differences of opinion and that every
17 | design or implementation choice carries a trade-off and numerous
18 | costs. There is seldom a right answer.
19 | * Please keep unstructured critique to a minimum. If you have solid
20 | ideas you want to experiment with, make a fork and see how it works.
21 | * We will exclude you from interaction if you insult, demean or harass
22 | anyone. That is not welcome behavior. We interpret the term
23 | "harassment" as including the definition in the [Citizen Code of
24 | Conduct](http://citizencodeofconduct.org/); if you have any lack of
25 | clarity about what might be included in that concept, please read
26 | their definition. In particular, we don't tolerate behavior that
27 | excludes people in socially marginalized groups.
28 | * Private harassment is also unacceptable. No matter who you are, if
29 | you feel you have been or are being harassed or made uncomfortable
30 | by a community member, please contact one of the channel ops or any
31 | of the TSC members immediately with a capture (log, photo, email) of
32 | the harassment if possible. Whether you're a regular contributor or
33 | a newcomer, we care about making this community a safe place for you
34 | and we've got your back.
35 | * Likewise any spamming, trolling, flaming, baiting or other
36 | attention-stealing behavior is not welcome.
37 | * Avoid the use of personal pronouns in code comments or
38 | documentation. There is no need to address persons when explaining
39 | code (e.g. "When the developer").
40 |
41 | ### Contact
42 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
43 | reported by:
44 |
45 | * Emailing [steven@strues.io](mailto:steven@strues.io)
46 |
47 |
48 | ### Attribution
49 |
50 | This Code of Conduct is adapted from
51 | [Contributor Covenant v1.3.0](http://contributor-covenant.org/version/1/3/0/).
52 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE.md:
--------------------------------------------------------------------------------
1 | # Retina.js Issue Template
2 |
3 | Before opening a new issue, please take a moment and explore [already closed issues](https://github.com/strues/retinajs/issues?q=is%3Aissue+is%3Aclosed). You might find the answer you're looking for.
4 |
5 | Can't find the answer? Use this template as a reference when creating an issue.
6 |
7 |
8 | ### Description of issue
9 |
10 | Screenshots are great here.
11 |
12 |
13 | ### Steps to reproduce
14 |
15 | Use a live example or a [CodePen](https://codepen.io) if you can.
16 |
17 |
18 |
19 | ### What were you expecting to happen vs what actually happened?
20 |
21 |
22 | ### Version/Browser/OS
23 | - Retina.js: 2.1.2
24 | - Node/NPM: v8.1.2 Yarn 0.24.6
25 | - MacOS Sierra / Chrome latest
26 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | build
2 | pkg
3 | tmp
4 | .DS_Store
5 | test/functional/retina.*
6 | test/functional/public/retina.*
7 | node_modules
8 | es/
9 | flow-typed
10 | dev
11 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | src
2 | __tests__
3 | .github
4 | dev
5 | flow-typed
6 | node_modules
7 | .babelrc
8 | .eslintrc
9 | .editorconfig
10 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - 6
4 | - 7
5 | - 8
6 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing to Retina.js
2 |
3 | Thanks for thinking about contributing to Retina.js.
4 |
5 | #### **Did You Find a Bug?**
6 |
7 | * **Ensure the bug was not already reported** by searching on GitHub under [Issues](issues).
8 | * If you're unable to find an open issue addressing the problem, [open a new one](new-issue). Be sure to include a **title and clear description**, as much relevant information as possible, and a **code sample** or an **executable test case** demonstrating the expected behavior that is not occurring.
9 |
10 | #### **Did You Write a Patch That Fixes a Bug?**
11 |
12 | * Open a new GitHub pull request with the patch.
13 | 1. Fork this project
14 | 1. Create your feature branch: `git checkout -b my-new-feature`
15 | 1. Commit your changes: `git commit -am 'Add some feature'`
16 | 1. Push to the branch: `git push origin my-new-feature`
17 | 1. Submit a pull request :tada:
18 | * Ensure the PR description clearly describes the problem and solution. Include the relevant issue number if applicable.
19 |
20 | #### **Do You Intend to Add a New Feature or Change an Existing One?**
21 |
22 | * Suggest your change as a new [issue](new-issue) using the label `enhancement` **BEFORE** you start writing code.
23 |
24 | Thanks for contributing! :heart:
25 |
26 | [issues]: https://github.com/strues/retinajs/issues
27 | [new-issue]: https://github.com/strues/retinajs/issues/new
28 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2013-2017 Steven Truesdell, John Newman, Ben Atkin, and other contributors
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
6 | this software and associated documentation files (the "Software"), to deal in
7 | the Software without restriction, including without limitation the rights to
8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # retina.js
2 |
3 | [](https://badge.fury.io/js/retinajs) [](https://github.com/prettier/prettier) [](http://commitizen.github.io/cz-cli/) [](https://raw.githubusercontent.com/strues/retinajs/master/LICENSE)
4 |
5 |
6 | ### JavaScript, Sass, Less, and Stylus helpers for rendering high-resolution image variants
7 |
8 | `retina.js` makes it easy to serve high-resolution images to devices with displays that support them. You can prepare images for as many levels of pixel density as you want and let `retina.js` dynamically serve the right image to the user.
9 |
10 | ## How it works
11 |
12 | There are 4 ways to use `retina.js`:
13 |
14 | 1. Automatically swapping out `src` paths on `img` tags.
15 | 2. Automatically swapping out background image URLs in inline styles.
16 | 3. Manually specifying the location of a high-res image variant (works for `src` attributes and inline styles).
17 | 4. Automatically creating media queries for CSS background images.
18 |
19 | #### Img Tags
20 |
21 | `retina.js` assumes you are using Apple's prescribed high-resolution modifiers (@2x, @3x, etc) to denote high-res image variants on your server. It also assumes that if you have prepared a variant for a given high-res environment, that you have also prepared variants for each environment below it. For example, if you have prepared 3x variants, `retina.js` will assume that you have also prepared 2x variants.
22 |
23 | With this in mind, you'll specify your highest environment level with the `data-rjs` attribute and let `retina.js` take it from there.
24 |
25 | Let's say you have an image on your page that looks like this:
26 |
27 | ```html
28 |
29 | ```
30 |
31 | In this case, we've set our resolution cap at "3", denoting that we've prepared 3x and 2x image variants. When the page loads, `retina.js` will check the actual resolution of the device environment to decide whether it should really serve up a 3x image. If the user happens to be in a 2x environment, `retina.js` will serve up the 2x image instead, assuming it will find the image at `/images/my_image@2x.png`.
32 |
33 | If the environment does have 3x capabilities, `retina.js` will serve up the 3x image. It will expect that url to be `/images/my_image@3x.png`. If the environment has the ability to display images at higher densities than 3x, `retina.js` will serve up the image of the highest resolution that you've provided, in this case 3x.
34 |
35 | #### Inline Styles
36 |
37 | Previous versions of `retina.js` were unable to target background images set via inline styles. Now, if you apply a `data-rjs` attribute to any kind of element other than an `img`, the script will target inline background images instead of `src` attributes.
38 |
39 | So if you created an element like this:
40 |
41 | ```html
42 |