read

Some time ago I bought CodeKit to speed up the progress of building smaller websites. While I was skeptical at first if I really need such a program, I don’t want to miss it again. However, in my opinion, there would have been one killer feature that is not included yet: Creating CSS Sprites through a GUI.

Since CodeKit has its own Compass compiler on board, we can use that powerful system to create our sprites with just a little extra effort. Due to the fact, that LESS doesn’t support sprites, we have to switch to Sass (if not already done). The syntax is quite similar, so it shouldn’t be a big deal. The only reason I used LESS in the past was to modify Twitter Bootstrap as fast as possible, but with CodeKit, you can compile LESS and Sass files next to each other. So in my current projects, I include a compiled Bootstrap LESS file and a compiled Sass file for my own styles or use a Gem for that.

1. Use Compass for your project

Follow their instructions on how to setup Compass on your system. Right click on your project, select “Compass” and afterwards “Use compass for this project”. A config file will be generated into the root dir. You can modify the asset paths in there. The file content should look like this:

[...]
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"
fonts_dir = "fonts"
output_style = :compressed
[...]

2. Implement images

Now that you have Compass running on your project, you have to include the images. I placed all the icons that I want to use in images/icon, so I import them into the SCSS file of my choice via

@import "icon/*.png";
@include all-icon-sprites;

The compiled CSS will now include classes for each of the images. They are ready to be implemented into your HTML code.

<i class="icon-facebook"></i>

You will realize, that the icon will not appear yet. We have to set up some styles first:

[class^="icon-"],
[class*=" icon-"] {
    display: inline-block;
    width: 32px;
    height: 32px;
    *margin-right: .3em; /* ie7-restore-right-whitespace */
    vertical-align: text-top;
    background-repeat: no-repeat;
}

That’s it. CodeKit now creates CSS sprites with the help of Compass.


Update 08/01/2014

Be aware of a Compass bug regarding retina sprites!

Update 03/01/2014

I’m not using CodeKit any longer and went back to Grunt/Gulp.

Marco Raddatz

Marco Raddatz

Published

Image
Marco Raddatz #TechnicalProjectManagement #SoftwareDevelopment #Berlin Back to Overview