Simplifying CSS Sprites

Shalam is a CSS processing tool that makes it incredibly easy to sprite the images in your web application. Unlike other CSS spriting tools, Shalam uses a special approach that is not only faster and simpler, but also supports high density displays and does a better-than-average job of minimizing wasted space inside the sprite.

.my-great-class {
    font-size: 1.5em;
    font-weight: bold;

    -shalam-sprite: "files-page/chevron.png" dest-size(32px 32px);
}

…becomes…

.my-great-class {
    font-size: 1.5em;
    font-weight: bold;

    -shalam-sprite: "files-page/chevron.png" dest-size(32px 32px);
    /* shalam! */;
    background: url(../img/sprites/main-sprite.compat.png) -20px -74px;
    background: url(../img/sprites/main-sprite.png) -50px -24px/125px 32px;
    /* end shalam */
}

…with only a single command:

shalam static/css/ static/images/ static/images/sprite

Quick Links

• Installation Instructions
• Quick Start
• FAQ

Features

Basic Layout Engine

Unlike other CSS spriting tools, Shalam uses a simple layout engine to help minimize the dimensions of the generated sprite. This helps to decrease overall file size.

Retina Friendly

Shalam allows developers to specify the destination size of images on the page. That means that you can support high-density screens without needing to manually fiddle with sprite sheets.

Automatic Downsampling

Let's say you have an image that's 512 by 512 pixels, and you use it at 128 by 128 pixels. Shalam will automatically downsample the source image to 256 by 256 pixels (2x) in the generated sprite. This ensures no bytes are wasted.

Pull directly from Git

Shalam can be configured to pull your image assets directly from a Git repository. Your design team can use their own design processes and hand off high-resolution assets directly to developers. And with automatic downsampling, designers don't need to worry about what size to store the images at. No more ZIP files full of resized images being emailed back and forth!

Support for IE8

Nobody likes supporting old browsers. Shalam has built-in support for generating IE8-friendly sprites. No extra effort required.