Tag Archives: css

Clippings, Tools

Building CSS sprites using Python Glue

Leave a comment

css-sprite was giving me some issues so I went looking for a different way to tackle the problem.

While a pain in the rear end to install, I found Glue. Given I already had all the python stuff installed it was pretty easy for me to get it working for this project.

  1. Install Glue http://glue.readthedocs.org/en/latest/installation.html
  2. Run Glue, here is the command that I like:
    glue src glue –scss –sprite-namespace= –namespace= –cachebuster

(The above command, looks for all the images in the src folder, and then outputs into the glue folder).

While the scss support is woeful, the retina side of things seems to be working better. (Although I’m not using the retina switch in the command above).

Clippings, Tools

Generate CSS sprites from cmd with css-sprite and node.js

Leave a comment

Update: I’ve also found a different method, this time instead using a Python script called “Glue“.

I did this about 12 months, but recently had to setup a new development environment.
Here are some notes on setting up css-sprite.

  1. Install node.js
  2. Install css-sprite 
    npm install css-sprite -g
  3. Have fun.

Usage:

  1. Create two folders src (add png files here) and images
  2. run the command from cmd: 
    css-sprite images/ src/*.png -p scss -s sprite.scss
  3. (Here I'm using scss, you can choose from LESS, SCSS or CSS, depending on the project).