grunt-spritesmith example for http://twolfson.com/2015-04-21-retina-sprites-are-here!

.gitignore

node_modules/
dist/
sprites.scss

README.md

gist-grunt-spritesmith-retina

grunt-spritesmith example for http://twolfson.com/2015-04-21-retina-sprites-are-here!

Getting Started

The following steps will get this repo setup and running with our build:

# Clone the repository
git clone https://gist.github.com/f9d046b1e312809fced0.git gist-grunt-spritesmith-retina
cd gist-grunt-spritesmith-retina/

# Install our dependencies
npm install

# Run our build steps
#   DEV: If we leverage `npm-run-script`, we can remove `./node_modules/.bin/`
./node_modules/.bin/grunt sprite
./node_modules/.bin/grunt sass

Attribution

GitHub and Twitter icons were taken from Alex Peattie's JustVector Social Icons.

Fork designed by P.J. Onori from The Noun Project

fork-2x.png

fork.png

github-2x.png

github.png

Gruntfile.js

module.exports = function (grunt) {
  // Configure our grunt tasks
  grunt.initConfig({
    sass: {
      main: {
        // Compile our SCSS which relies on the SCSS from spritesmith
        src: 'index.scss',
        dest: 'dist/index.scss'
      }
    },
    sprite: {
      main: {
        // Include all normal and `-2x` (retina) images
        //   e.g. `github.png`, `github-2x.png`
        src: ['*.png'],

        // Filter out `-2x` (retina) images to separate spritesheet
        //   e.g. `github-2x.png`, `twitter-2x.png`
        retinaSrcFilter: ['*-2x.png'],

        // Generate a normal and a `-2x` (retina) spritesheet
        dest: 'dist/spritesheet.png',
        retinaDest: 'dist/spritesheet-2x.png',

        // Generate SCSS variables/mixins for both spritesheets
        destCss: 'sprites.scss'
      }
    }
  });

  // Load in our task dependencies
  grunt.loadNpmTasks('grunt-sass');
  grunt.loadNpmTasks('grunt-spritesmith');
};

index.scss

// Load in our compiled SCSS variables
@import 'sprites.scss';

// Generate sprite rules and media queries
@include retina-sprites($retina-groups);

package.json

{
  "name": "gist-grunt-spritesmith-retina",
  "description": "grunt-spritesmith example for http://twolfson.com/2015-04-21-retina-sprites-are-here!",
  "version": "1.0.0",
  "author": {
    "name": "Todd Wolfson",
    "email": "todd@twolfson.com",
    "url": "http://twolfson.com/"
  },
  "licenses": [
    "UNLICENSE"
  ],
  "engines": {
    "node": ">= 0.10.0"
  },
  "dependencies": {
    "grunt": "~0.4.5",
    "grunt-cli": "~0.1.13",
    "grunt-sass": "~0.18.1",
    "grunt-spritesmith": "~4.5.3"
  },
  "devDependencies": {},
  "keywords": [],
  "private": true
}

twitter-2x.png

twitter.png