Skip to content
Sprite generator for Play Framework / SBT
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
project
sample
spritegen
src/main/scala/net/koofr/play2sprites
.gitignore
LICENSE
README.md

README.md

play2-sprites

play2-sprites is an sbt plugin that generates sprites from images.

CSS classes will be named by file names (my_icon.png -> .my-icon) by default.

Example

http://play2-sprites-demo.herokuapp.com/

CSS file:

http://play2-sprites-demo.herokuapp.com/assets/stylesheets/style.css

Sprite image:

http://play2-sprites-demo.herokuapp.com/assets/images/sprites.png

Usage

Add following lines to your project/plugins.sbt file:

resolvers += "Koofr repo" at "http://koofr.github.com/repo/maven/"

addSbtPlugin("net.koofr" % "play2-sprites" % "0.6.0")

Add following import to your Build.scala file:

import net.koofr.play2sprites.GenerateSprites._

Extend default settings with genSpritesSettings:

settings = Defaults.defaultSettings ++ genSpritesSettings

Now add following settings:

spritesSrcImages <<= baseDirectory( (base: File) => base / "public/images/sprites" * "*.png" ),
spritesDestImage <<= baseDirectory( (base: File) => base / "public/images/sprites.png" ),
spritesCssSpritePath := "../images/sprites.png",
spritesDestCss <<= baseDirectory( (base: File) => base / "public/stylesheets/sprites.css" )

resourceGenerators in Compile <<= (resourceGenerators in Compile, spritesGen) { (gens, spritesGen) =>
  spritesGen +: gens
}

Full example can be found in sample application.

Less

If you use Less, you can generate _sprites.less file and include it in your main less file.

spritesDestCss <<= baseDirectory( (base: File) => base / "app/assets/stylesheets/_sprites.less" ),

Your main less file (e.g. main.less):

@import "_sprites.less";

You can also use sprite classes as mixins:

.my-button {
  .my-icon();
}

Prefix

You can also prefix CSS classes:

spritesCssClassPrefix := "sprite-"

Now sprite classes will be named as .sprite-my-icon.

Padding

You can add more space between images:

spritesPadding := 50

Sample

Sample Play application is available in sample directory.

Local build

To build the plugin locally and publish it to your local filesystem:

$ sbt publish-local

Authors

Crafted by highly motivated engineers at http://koofr.net and, hopefully, making your day just a little bit better.

You can’t perform that action at this time.