Automagic generation of CSS Sprites

[reneviering]

Spritesmith seems to be a good library for this purpose:
https://github.com/Ensighten/grunt-spritesmith

[mischah]

Yeees 👌

[mischah]

I wonder how the default setup of this task should look like.

Because something like the following is too generic:

sprite: {
  all: {
    src: 'path/to/your/sprites/*.png',
    dest: 'destination/of/spritesheet.png',
    destCss: 'destination/of/sprites.css'
  }
}

I guess settings for sprite generation are very project specific. So I guess we should use the following as default:

sprite: {
  /*
   * Generating CSS sprites is very project specific. Please take your time and 
   * configure one ore more subtasks according to your needs.
   */
  // subTaskName: {
  //   src: 'path/to/your/images/*.png',
  //   dest: 'destination/of/spritesheet.png',
  //   destCss: 'destination/of/sprites.less'
  // }
}

Any thoughts on that @revrng?

[reneviering]

That's a good point. Maybe we should write a few more lines how to use the sprite plugin. Especially how to integrate the generated sprites.less into the existing less files and how to use the generated sprite mixins.

[mischah]

Good catch. Makes sense to point out to https://github.com/Ensighten/grunt-spritesmith or add some own documentation about how to set up this thing.

I guess that belongs to the readme and we could add another sentence like »See readme for further information« or just »See https://github.com/Ensighten/grunt-spritesmith for further information«.

[mischah]

Going to close this (for now).

If we have a project using SVGs intensively we should consider using either gulp-svg-sprite, gulp-svgstore or gulp-svg-sprites and check if it makes sense to integrate one or another in Bootstrap Kickstart by default.

[mischah]

Going to reopen this just in case someone finds time to investigate those gulp plugins ⬆️

[mischah]

Closing this.
Issue might be recreated in the upcoming Baumeister Repo.