Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for retina icons #25

Open
Daniel15 opened this issue Nov 25, 2013 · 1 comment
Open

Add support for retina icons #25

Daniel15 opened this issue Nov 25, 2013 · 1 comment

Comments

@Daniel15
Copy link

MacBook Pros have retina screens and use double density icons. Basically a 100x100 icon would be displayed in a 50x50 space on the screen.

To support with Stitches:

  • Change default padding from 5px to 4px so it's always divisible by 2
  • Add an option to output a Retina-friendly spritesheet:
    • Include background-size: x y to resize the image, where x is half the width and y is half the height of the image (eg. background-size: 250px 100px for a 500px by 200px spritesheet)
    • Halve all the background-position values

More information: http://miekd.com/articles/using-css-sprites-to-optimize-your-website-for-retina-displays/

@yarontt
Copy link

yarontt commented Sep 6, 2014

+1 to that.
At least make sure the output .png's size is a multiple of two :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants