Menu icon Foundation
Creating css image sprites in the workflow with Zurb Template

Hi,

I am using Zurb Template on CLI. When starting a new project I command "foundation new" and then choose Foundation Sites and then Zurb Template.

I want to create css sprites and collect all images in a single image and use their background positions from CSS.

Like this:
http://compass-style.org/reference/compass/helpers/sprites/

But I wasn't able to get it to work.

What changes should I do in which files? I tried installing compass with bower and npm but no luck after than.

I am waiting for professionals answers. THank you

compasscssimagespriteszurbtemplate

Hi,

I am using Zurb Template on CLI. When starting a new project I command "foundation new" and then choose Foundation Sites and then Zurb Template.

I want to create css sprites and collect all images in a single image and use their background positions from CSS.

Like this:
http://compass-style.org/reference/compass/helpers/sprites/

But I wasn't able to get it to work.

What changes should I do in which files? I tried installing compass with bower and npm but no luck after than.

I am waiting for professionals answers. THank you

yeoman over 3 years ago

well let me tell you a quick dirty solution. caution had bugs and cockroaches :P   

In your package.json add this under "devDependencies" 

 

 

    "gulp-csso": "^1.1.0",

    "vinyl-buffer": "^1.0.0",

    "merge-stream": "^1.0.0",

    "gulp.spritesmith": "^6.2.0",

In your gulp.babel.js add this code 

 

 

/*
*   @summary For sprites config only, generating sprite css and image 
 *  @author danish
 */
var csso = require('gulp-csso');
var buffer = require('vinyl-buffer');
var merge = require('merge-stream');
var spritesmith = require('gulp.spritesmith');

function sprite() { 
    var spriteData = gulp.src('src/assets/img/sprite/*.png')
        .pipe(spritesmith({
            imgName: '../img/sprite.png',
            cssName: '_sprite.scss'
        }));
    var spriteImg = spriteData.img.pipe(gulp.dest('src/assets/img'));
    var spriteCss = spriteData.css.pipe(gulp.dest('src/assets/scss/modules/'));
    if (!PRODUCTION) return (spriteImg && spriteCss);
}

// and in your watch function add below mentioned line 
gulp.watch('src/assets/img/sprite**/*', gulp.series(sprite, browser.reload));

 

after adding above code. do one time npm install

 

 

npm install 

so this way all dev dependencies are installed! Thing to notice in above code are as follow:

my sprite folder is under src/assets/img/sprite/*.png which contains individual images.

Generated output ie sprite is being generated under src/assets/img folder with the name of sprite.png you can rename it by renaming value of imgName key in spritesmith object. 

and my generated css is under src/assets/scss/modules with the file name of sprite.scss. Again, have a look in the object of spritesmith to do desired changes.

 

Cheers!

Ercan Murat KISACA over 3 years ago

You are the KING,

thank you yeoman.

 

Unfortunately I am just able to hit HELPFUL button once.

People reading this topic, please appreciate this by pressing Helpful button.

THank you 

I will try and let you know what happened

 

 

yeoman over 3 years ago

i will be waiting curiously! :D Hope you get it working as its working for me :)

yeoman over 3 years ago

and me again =) in case someone wanted to make this work in FoundationPress Then solution is pretty much same (i got you covered man)

same like above add this in package.json

"gulp-csso": "^1.1.0",
"vinyl-buffer": "^1.0.0",
"merge-stream": "^1.0.0",
"gulp.spritesmith": "^6.2.0",

and in gulpgfile.js add this code 

// sprite
gulp.task('sprite', function () {    
    var spriteData = gulp.src('assets/images/sprite/*.png')
        .pipe(spritesmith({
            imgName: '../images/sprite.png',
            cssName: '_sprite.scss'
        }));
    var spriteImg = spriteData.img.pipe(gulp.dest('assets/images'));
    var spriteCss = spriteData.css.pipe(gulp.dest('assets/scss/modules/'));
    if (!isProduction || isProduction) return (spriteImg && spriteCss);
});

// Clean sprite
gulp.task('clean:sprite', function() {
  return del([
      'assets/images/sprite.png',
    ]);
});

again in gulpfile check this last gulp task where  it says gulp.task('default', ['build', 'browser-sync'], function() { and following code (rephrase after me =p)

  // watch sprite
  gulp.watch(['assets/images/sprite/**/*.png'], ['clean:sprite', 'sprite'])
    .on('change', function(event) {
      logFileChange(event);
    });

All done and set (i think so) just run this now

npm install

 

and watch your changes or compile just like normal npm task ie npm run watch or npm run production or whatever.

generated sprite image is under assets/images with the file name of sprite.png while individual sprite images should go to assets/images/sprite folder.

generated css in under assets/scss/module for me.

Tweak mangle or whatever however you like with the code.  I gotta run now. Run forest run! 

 

Cheers!