Speed up your Front End Development – Part 1by Roy Barber, 3rd February 2013
I gave a talk recently at a local meet up and showed a bunch of front end developers and designers how to save a boat load of time when coding up those beautiful photoshop designs. I will be splitting this topic into a series of three posts, where i’ll be showing you ways to save masses of your precious time, hopefully allowing you to squeeze extra profit out of your projects.
Automating CSS Sprites in Photoshop with Sass/Compass
Ok so that lovely design is finished and now it’s time to start slicing up that PSD, extracting all the elements you need for your css, like icons, background images and logos. Then if like me, a performance nut, you need to create a sprite out of all those images, writing classes and working out the pesky x/y co-ordinates. Maybe you use a great online tool like SpritePad, but we all know its a ball ache when you need to add extra images into the sprite.
What if all of the above was done for you, like the saving of all the images, the generation of the sprite and the output of the css? it would save you heaps of time right?
Well with the combination of a couple of tools, it can all be automated, let me show you how.
We need to start by making a couple of tweaks to your PSD, simple tweaks! You need to name your layers with the filename and extension you wish to save as thats it! if its a combination of layers then stick them in a folder and give the folder a filename, save your PSD.
Like anywhere theres a middleman, but this middle man is not going to promise you the moon and cost you the earth. the middle man is a simple tool called slicy, you can download a free demo here, or buy the full version for $29(£19) worth every penny. Don’t worry if you use windows, you can use an alternative like pngExpress, again the same price.
Open up slicy and drag and drop the psd into the app, it will say extracting then come up with thumbnails of the layers you changed. At the top it will tell you the number of images it’s going to export. Now click save and choose the images folder where your going to keep the code for the new website. Slicy will now ask if you want to automatically repeat this every time the psd changes, off course you do!
Ok so now we have a PSD linked to Slicy, if you edit the psd and save it, Slicy will automatically dump out those images to the folder you choose, cool right!
Slicy has a whole host of features, including the ability to automatically generate HDPI images, have a look at the website for more information, download and play around with the sample PSD’s.
Ok now for the even cooler stuff! For this to work we are going to be using SASS/Compass to compile CSS, a detailed introduction and installation instructions can be found on the official website here. Compass on its own can save a lot of time writing your css.
Now we will tell compass to automatically generate our sprite and css from a folder of images, and when that folders contents change to automatically regenerate the new sprite/css.
Once you have your project setup and ready to churn out the CSS we need to copy the below into our SCSS file. I have included the files in a zip at the end of this for you to play around with, so don’t worry if it’s not that clear as it would be quite lengthy to explain in detail.
This code tells compass to watch the folder and generate a single image using the filenames as the css classes, then above is a sample of the css it generates.
Now you simply add the class into the html to use the background image.
The best way to learn how truly powerful this combination can be is to play with the below files, I’ve included a PSD and a html project for you to play with. Link the PSD to slicy then start playing around with it, making changes to see everything automatically update.
You can also find some really good in-depth tutorials on SASS and Compass by Level Up Tuts.
In Part 2, we will take a look at ways to speed up writing your css and html including time saving tools and techniques.