Skip to content

Instantly share code, notes, and snippets.

@adyz

adyz/retina-simple-sprite-compass

Last active September 12, 2018 08:02
Show Gist options
  • Save adyz/9774898 to your computer and use it in GitHub Desktop.
Save adyz/9774898 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. adyz revised this gist Mar 26, 2014. 1 changed file with 11 additions and 13 deletions.
    24 changes: 11 additions & 13 deletions retina-simple-sprite-compass
    View file
    Original file line number Diff line number Diff line change
    @@ -1,13 +1,13 @@
    **1:** To export the PNGs in different sizes I used Slicy - http://macrabbit.com/slicy/ - a mac app that looks into your PSD and if it finds any layer with .png extention will export that layer to PNG. You can also add a tag to the main group layer to export retina version too. A bit pricy, but it's fine if you value your time.
    // 1: To export the PNGs in different sizes I used Slicy - http://macrabbit.com/slicy/ - a mac app that looks into your PSD and if it finds any layer with .png extention will export that layer to PNG. You can also add a tag to the main group layer to export retina version too. A bit pricy, but it's fine if you value your time.


    **2:** I added the icons in two folders (retina and normal) You just have to make sure that both folders contain the same number of files and they both have the same file name inside.
    // 2: I added the icons in two folders (retina and normal) You just have to make sure that both folders contain the same number of files and they both have the same file name inside.


    **3:** I added this code after long time of searchin, testing, and mashing my head into the wall.
    // 3: I added this code after long time of searchin, testing, and mashing my head into the wall.


    $naviconsNormal: sprite-map("navicons/normal/*.png", $spacing: 10px);
    $naviconsNormal: sprite-map("navicons/normal/*.png", $spacing: 10px);
    $naviconsRetina: sprite-map("navicons/retina/*.png", $spacing: 20px);

    .icn{
    @@ -36,18 +36,16 @@ $naviconsNormal: sprite-map("navicons/normal/*.png", $spacing: 10px);
    }
    }

    **All this code performs really slow on multiple icons, but I refuse to do-it otherwhise.**
    * The @include bp-retina it's a mixin for retina screens media query. *
    //The @include bp-retina it's a mixin for retina screens media query.

    **Huge thanks to:**
    Rasmus Thulstrup
    https://gist.github.com/thulstrup/2140082
    //Huge thanks to:

    //Rasmus Thulstrup
    //https://gist.github.com/thulstrup/2140082

    //and

    and

    Alan Hogan
    https://gist.github.com/alanhogan/2878758
    //Alan Hogan
    //https://gist.github.com/alanhogan/2878758


  2. adyz renamed this gist Mar 26, 2014. 1 changed file with 0 additions and 0 deletions.
    0 gistfile1.md → retina-simple-sprite-compass
    View file
    File renamed without changes.
  3. adyz revised this gist Mar 26, 2014. 1 changed file with 23 additions and 18 deletions.
    41 changes: 23 additions & 18 deletions gistfile1.md
    View file
    Original file line number Diff line number Diff line change
    @@ -7,28 +7,33 @@
    **3:** I added this code after long time of searchin, testing, and mashing my head into the wall.


    $naviconsNormal: sprite-map("navicons/normal/*.png", $spacing: 10px);
    $naviconsNormal: sprite-map("navicons/normal/*.png", $spacing: 10px);
    $naviconsRetina: sprite-map("navicons/retina/*.png", $spacing: 20px);

    .icn{
    background: $naviconsNormal;
    display: inline-block; // or block
    @include bp-retina {
    background: $naviconsRetina;
    //Instead of sprite-path might be sprite-url
    @include background-size(image-width(sprite-path($naviconsNormal)) image- height(sprite-path($naviconsNormal)));
    }
    background: $naviconsNormal;
    display: inline-block; // or block
    @include bp-retina {
    background: $naviconsRetina;
    //Instead of sprite-path might be sprite-url
    @include background-size(image-width(sprite-path($naviconsNormal)) image-height(sprite-path($naviconsNormal)));
    }
    }

    @each $i in sprite_names($naviconsNormal){
    .icn-#{$i}{
    background-position: sprite-position($naviconsNormal, $i);
    @include sprite-dimensions($naviconsNormal, $i);
    @include bp-retina {
    $ypos: round(nth(sprite-position($naviconsRetina, $i), 2) / 2);
    background-position: 0 $ypos;
    }
    }
    .icn-#{$i}{
    background-position: sprite-position($naviconsNormal, $i);
    @include sprite-dimensions($naviconsNormal, $i);
    }
    }

    @include bp-retina {
    @each $i in sprite_names($naviconsNormal){
    .icn-#{$i}{
    $ypos: round(nth(sprite-position($naviconsRetina, $i), 2) / 2);
    background-position: 0 $ypos;
    }
    }
    }

    **All this code performs really slow on multiple icons, but I refuse to do-it otherwhise.**
  4. adyz revised this gist Mar 26, 2014. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions gistfile1.md
    View file
    Original file line number Diff line number Diff line change
    @@ -15,6 +15,8 @@
    display: inline-block; // or block
    @include bp-retina {
    background: $naviconsRetina;
    //Instead of sprite-path might be sprite-url
    @include background-size(image-width(sprite-path($naviconsNormal)) image- height(sprite-path($naviconsNormal)));
    }
    }

    @@ -25,8 +27,6 @@
    @include bp-retina {
    $ypos: round(nth(sprite-position($naviconsRetina, $i), 2) / 2);
    background-position: 0 $ypos;
    //Instead of sprite-path might be sprite-url
    @include background-size(image-width(sprite-path($naviconsNormal)) image- height(sprite-path($naviconsNormal)));
    }
    }
    }
  5. adyz revised this gist Mar 26, 2014. 1 changed file with 26 additions and 25 deletions.
    51 changes: 26 additions & 25 deletions gistfile1.md
    View file
    Original file line number Diff line number Diff line change
    @@ -6,39 +6,40 @@

    **3:** I added this code after long time of searchin, testing, and mashing my head into the wall.

    `
    $naviconsNormal: sprite-map("navicons/normal/*.png", $spacing: 10px);
    $naviconsRetina: sprite-map("navicons/retina/*.png", $spacing: 20px);

    .icn{
    background: $naviconsNormal;
    display: inline-block; // or block
    @include bp-retina {
    background: $naviconsRetina;
    }
    }

    @each $i in sprite_names($naviconsNormal){
    .icn-#{$i}{
    background-position: sprite-position($naviconsNormal, $i);
    @include sprite-dimensions($naviconsNormal, $i);
    @include bp-retina {
    $ypos: round(nth(sprite-position($naviconsRetina, $i), 2) / 2);
    background-position: 0 $ypos;

    //Instead of sprite-path might be sprite-url
    @include background-size(image-width(sprite-path($naviconsNormal)) image-height(sprite-path($naviconsNormal)));

    $naviconsNormal: sprite-map("navicons/normal/*.png", $spacing: 10px);
    $naviconsRetina: sprite-map("navicons/retina/*.png", $spacing: 20px);

    .icn{
    background: $naviconsNormal;
    display: inline-block; // or block
    @include bp-retina {
    background: $naviconsRetina;
    }
    }

    @each $i in sprite_names($naviconsNormal){
    .icn-#{$i}{
    background-position: sprite-position($naviconsNormal, $i);
    @include sprite-dimensions($naviconsNormal, $i);
    @include bp-retina {
    $ypos: round(nth(sprite-position($naviconsRetina, $i), 2) / 2);
    background-position: 0 $ypos;
    //Instead of sprite-path might be sprite-url
    @include background-size(image-width(sprite-path($naviconsNormal)) image- height(sprite-path($naviconsNormal)));
    }
    }
    }
    }
    }
    `

    **All this code performs really slow on multiple icons, but I refuse to do-it otherwhise.**
    * The @include bp-retina it's a mixin for retina screens media query. *

    **Huge thanks to:**
    Rasmus Thulstrup
    https://gist.github.com/thulstrup/2140082



    and

    Alan Hogan
  6. adyz revised this gist Mar 26, 2014. 1 changed file with 5 additions and 5 deletions.
    10 changes: 5 additions & 5 deletions gistfile1.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,10 +1,10 @@
    ##1: To export the PNGs in different sizes I used Slicy - http://macrabbit.com/slicy/ - a mac app that looks into your PSD and if it finds any layer with .png extention will export that layer to PNG. You can also add a tag to the main group layer to export retina version too. A bit pricy, but it's fine if you value your time.
    **1:** To export the PNGs in different sizes I used Slicy - http://macrabbit.com/slicy/ - a mac app that looks into your PSD and if it finds any layer with .png extention will export that layer to PNG. You can also add a tag to the main group layer to export retina version too. A bit pricy, but it's fine if you value your time.


    ##2: I added the icons in two folders (retina and normal) You just have to make sure that both folders contain the same number of files and they both have the same file name inside.
    **2:** I added the icons in two folders (retina and normal) You just have to make sure that both folders contain the same number of files and they both have the same file name inside.


    ##3: I added this code after long time of searchin, testing, and mashing my head into the wall.
    **3:** I added this code after long time of searchin, testing, and mashing my head into the wall.

    `
    $naviconsNormal: sprite-map("navicons/normal/*.png", $spacing: 10px);
    @@ -33,9 +33,9 @@ $naviconsRetina: sprite-map("navicons/retina/*.png", $spacing: 20px);
    }
    `

    All this code performs really slow on multiple icons, but I refuse to do-it otherwhise.
    **All this code performs really slow on multiple icons, but I refuse to do-it otherwhise.**

    ##Huge thanks to:
    **Huge thanks to:**
    Rasmus Thulstrup
    https://gist.github.com/thulstrup/2140082

  7. adyz renamed this gist Mar 26, 2014. 1 changed file with 6 additions and 6 deletions.
    12 changes: 6 additions & 6 deletions gistfile1.txt → gistfile1.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,12 +1,12 @@
    #1: To export the PNGs in different sizes I used Slicy - http://macrabbit.com/slicy/ - a mac app that looks into your PSD and if it finds any layer with .png extention will export that layer to PNG. You can also add a tag to the main group layer to export retina version too. A bit pricy, but it's fine if you value your time.
    ##1: To export the PNGs in different sizes I used Slicy - http://macrabbit.com/slicy/ - a mac app that looks into your PSD and if it finds any layer with .png extention will export that layer to PNG. You can also add a tag to the main group layer to export retina version too. A bit pricy, but it's fine if you value your time.


    2: I added the icons in two folders (retina and normal) You just have to make sure that both folders contain the same number of files and they both have the same file name inside.
    ##2: I added the icons in two folders (retina and normal) You just have to make sure that both folders contain the same number of files and they both have the same file name inside.


    3: I added this code after long time of searchin, testing, and mashing my head into the wall.

    ##3: I added this code after long time of searchin, testing, and mashing my head into the wall.

    `
    $naviconsNormal: sprite-map("navicons/normal/*.png", $spacing: 10px);
    $naviconsRetina: sprite-map("navicons/retina/*.png", $spacing: 20px);

    @@ -31,11 +31,11 @@ $naviconsRetina: sprite-map("navicons/retina/*.png", $spacing: 20px);
    }
    }
    }

    `

    All this code performs really slow on multiple icons, but I refuse to do-it otherwhise.

    Huge thanks to:
    ##Huge thanks to:
    Rasmus Thulstrup
    https://gist.github.com/thulstrup/2140082

  8. adyz revised this gist Mar 26, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    1: To export the PNGs in different sizes I used Slicy - http://macrabbit.com/slicy/ - a mac app that looks into your PSD and if it finds any layer with .png extention will export that layer to PNG. You can also add a tag to the main group layer to export retina version too. A bit pricy, but it's fine if you value your time.
    #1: To export the PNGs in different sizes I used Slicy - http://macrabbit.com/slicy/ - a mac app that looks into your PSD and if it finds any layer with .png extention will export that layer to PNG. You can also add a tag to the main group layer to export retina version too. A bit pricy, but it's fine if you value your time.


    2: I added the icons in two folders (retina and normal) You just have to make sure that both folders contain the same number of files and they both have the same file name inside.
  9. adyz revised this gist Mar 26, 2014. No changes.
  10. adyz created this gist Mar 26, 2014.
    47 changes: 47 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,47 @@
    1: To export the PNGs in different sizes I used Slicy - http://macrabbit.com/slicy/ - a mac app that looks into your PSD and if it finds any layer with .png extention will export that layer to PNG. You can also add a tag to the main group layer to export retina version too. A bit pricy, but it's fine if you value your time.


    2: I added the icons in two folders (retina and normal) You just have to make sure that both folders contain the same number of files and they both have the same file name inside.


    3: I added this code after long time of searchin, testing, and mashing my head into the wall.


    $naviconsNormal: sprite-map("navicons/normal/*.png", $spacing: 10px);
    $naviconsRetina: sprite-map("navicons/retina/*.png", $spacing: 20px);

    .icn{
    background: $naviconsNormal;
    display: inline-block; // or block
    @include bp-retina {
    background: $naviconsRetina;
    }
    }

    @each $i in sprite_names($naviconsNormal){
    .icn-#{$i}{
    background-position: sprite-position($naviconsNormal, $i);
    @include sprite-dimensions($naviconsNormal, $i);
    @include bp-retina {
    $ypos: round(nth(sprite-position($naviconsRetina, $i), 2) / 2);
    background-position: 0 $ypos;

    //Instead of sprite-path might be sprite-url
    @include background-size(image-width(sprite-path($naviconsNormal)) image-height(sprite-path($naviconsNormal)));
    }
    }
    }


    All this code performs really slow on multiple icons, but I refuse to do-it otherwhise.

    Huge thanks to:
    Rasmus Thulstrup
    https://gist.github.com/thulstrup/2140082

    and

    Alan Hogan
    https://gist.github.com/alanhogan/2878758