Automated CSS sprites for localized large organisations using build tools 

Optimize page speed when your code base is used for multiple countries for front end developers 

In this article i’m going to tell you how i automated the process of generating sprites for a web app that is localized for ten countries using three languages not only with build tools but also with a strategic solution.

My web app is available for ten countries in three languages and using personalized background images in some pages and what i mean by personalized images is sometimes those background images are a speech bubble or a text rotated like 55 degrees or arrow in the opposite direction or sometimes illustrations or characters pointing to some direction even horizontally mirrored sometimes a different image and i hope you get the idea.

First of all generate and automate the process is nowadays easy, there is bunch of tools and techniques out there that are just perfect but the combination of code management build tools and front end techniques for a flexible and localized web app can be problematic in some cases.

The tools available for generating a sprite require in general placing png or jpg images in a single folder then pointing to it in some configuration file, the result is a single png image and a css file mapping each class to the right coordinates of the bg image.

As i said some background images in my webapp are slightly or completely different from a language to another so far, i had a group of png images used in Arabic pages, in English and in both, of course i’m not going to put everything in one sprite and serve almost double the size of what people need but before answering this let me tell about the tech stack i used.

At that time i used Grunt as build tool, Django templates for html, compass as a CSS pre-processor and had and still working on command line on Ubuntu.
Using Python i included a css file per language in my html page:

<link rel=”stylesheet” type=”text/css” href=”{{ MEDIA }}css/landing-{{ LANGUAGE_DIRECTION }}.css”>

Where MEDIA is a path to my static assets folder and LANGUAGE_DIRECTION is ltr or rtl.

In the SCSS file i wrote all CSS once and generate two files, i only added a set of dynamic variables switching folder names, properties left to right x to y ect using partials inheritance .

Writing a single base sass or scss file is useful but very bad in some contexts if the front end developer consider abstracting scss as a good thing in reality it’s not at all, well that’s a different scope but for the sake of the story demo let’s assume it this way.

If you are familiar with Compass you probably know already that one the best part is generating sprites, that is a simple as dropping all the images in a folder and writing just few lines of code, the code for generating a sprite with compass look like this:

@import “compass/utilities/sprites”;
@import “graphics/*.png”;
@include all-ui-graphics-sprites;

The first line is the sprite library, the second is the folder name and the third is generating sprites with a beautiful prefix “ui”

By writing only this three liner, compass will automatically generate a sprite and bunch of CSS classes mapping image names with CSS class names.

This is great but still for two different languages that need two different image folders is the common images used for both languages that means if i’m going to create two folders for each language i need to manually manage both, if i add delete or replace an image i needed to replicate it in the other folder which is an overhead and a ridiculously useless effort despite the fact that i will end up for sure bloating up the repository by duplicating the files if i did it this way.

The technique i used to resolve this is quite simple, symblink anything that seems to be a duplicated image, so initially my Arabic design and English background images folders looked like this:

I created a bash script that fetched the images use for English and create a symbolic link in the folder used for Arabic to images used for English considering the English as the default interface.
The only rule here is the images are occupying the same spot in the html then they need to have the same name, otherwise they are considered variation of the design.
So after the execution of the script, i had bunch of symbolic links added to the Arabic design folder and the result looked like this

So far the scenario for creating a new sprite is:
Create two folders English and Arabic
Drop English specific images and shared images into the English folder considering English as default.
Put specific images into the Arabic folder and name them the same if they occupy the same spot.

When compass is generating a sprite from a folder of bg images it will pick up images and symbolic links in that particular folder and generate a sprite,
the only thing is if the symbolic link is pointing to non existing image compass will display a type mismatch error telling you that the file should be an image, so my shell script took care of that by deleting all symbolic links first then creating new symbolic links in every execution, quite easy isn't it?
The bash script act like a worker for me, i don’t even need to commit symbolic links to the repository.

For making everything even more beautiful, i used Grunt which is a build tool automating all the tasks necessary for me by writing a configuration file and using some Grunt-plugins.
I needed to call the bash script every time i changed an image, for that i used a plugin called grunt-exec and i added few lines on the configuration:

This task just created symbolic links, so i needed to add this before generating any sprite and any CSS, i just modified the default task pile on Gruntfile.js, so the default tasks looked like this:

I wanted to be able to do the same even when i add/delete images so i added the shell script execution task on the watch task:

So far every time i change any image on the folders that i needed for my sprites i run the exec command.

All this is perfect, now when i change any image or anything on the scss file, i had everything compiling on the fly with and i had my sprites done without worrying about which image has to go in which folder.
If i had an arabic specific image i just drop it in the arabic folder, if i had an image used for both arabic and english the shell is going to create a symbolic link and compass will pick it up and creates sprites with an ease.
The same concept apply for different pages for different countries if the pages have a significant amount of personalized bg images for that specific country.