Announcing SilkSprite: A CSS Sprite Plugin for Blueprint
November 8th, 2007Today, I’m proud to announce the release of SilkSprite a CSS Sprite plugin for Blueprint based on the widely used Silk Icons.
Benefits
- 1000 icons compressed into 1 file
- Entire Plugin is only 3 files
- Easy to use
Usage
- Place this directory inside blueprint/plugins
- Add this line to “blueprint/screen.css”,
- @import ‘plugins/silksprite/sprite.css’;
- Use the sprites by attaching classes ss_sprite & ss_(name of sprite) to an a, span or div element. You can use test.htm as a key to the names of sprites.
- example:
<span class="ss_sprite ss_add"> </span><br />
Credit
- Silk Sprite is Based on the Silk Icon Set by Mark James [famfamfam.com]
- Compiled & Adapted for Blueprint by Don Albrecht [ajaxbestiary.com]
Check it out online here:
http://www.ajaxbestiary.com/Labs/SilkSprite/
Previous Post 
Next Post 
Latest Posts
23 Comments
November 8th, 2007 at 11:44 am
This is great, Do you need to use Blueprint to use the sprites?
November 8th, 2007 at 11:50 am
Yeah, I have a similar request. How hard would it be to adopt this without blueprint? Nice job.
November 8th, 2007 at 11:54 am
It works fine without Blueprint. I’ve designed it to play nice with blueprint & follow the blueprint baseline but it can display without it. You may need to tweak .ss_sprite in sprite.css so that it plays nice with your stylesheets.
November 10th, 2007 at 2:23 pm
[...] well. Ajax Bestiary.com has a good rundown of some of the current Blueprint plugins, as well as a recent plugin that makes the full Silk Icons set available in a compact way. We’ve recently been talking [...]
November 20th, 2007 at 4:37 am
[...] Announcing SilkSprite: A CSS Sprite Plugin for Blueprint. if you use blueprint and need icons for webapps. [...]
December 1st, 2007 at 4:22 am
This is a great idea ! Thanks for your work !
Here’s a way it might be made even better: writing a tool to let people select which icons they want to go into the image file and then output the css for just these icons.
December 1st, 2007 at 5:35 pm
I’ve been looking into ways to improve it. I agree that there needs to be a way for users to more closely self select the icons they need. Unfortunately, given the number of permutations, that makes it a bit difficult. Also, the rendering time for the library can be significant when a majority of the 1000 is needed.
A few ideas I have:
1) reduce the library using layering. If we separate modifier badges from underlying graphics it might be possible to reduce the library size by as much as 70%.
2) I will also be releasing a bash script that automates the process for all files in a directory.
January 26th, 2008 at 9:37 pm
Doesnt seem to work at all in IE6
January 28th, 2008 at 11:01 am
Are you using the transparent png fix?
April 1st, 2008 at 10:18 pm
If you save the sprites.png file in Photoshop “save for web” as PNG-8 adaptive, the file shrinks from 243kb to 72kb with no loss in quality.
April 1st, 2008 at 11:31 pm
Ok never mind my previous comment, there is reduction in quality. Didn’t notice it as the icons I use look the same.
May 25th, 2008 at 4:03 am
Hi there,
Just wanted to say thanks for such a good addition to Blueprint. I was just wondering one small thing though. I am guessing that you can only use these sprites on small spanned text, right?
What I mean is if I was to apply this to say 2em text then I am going to see the rest of the surrounding sprites aren’t I?
Is there any y way around this?
Best wishes,
Mark
May 25th, 2008 at 4:08 am
Actually just thinking about this some more after trying making the text bigger in a browser and seeing the result could the sprites.png file not just be turned so that it is horizontal instead of vertical? This would get rid of the problems then wouldn’t it?
I know that the sprites.css file would need to be changed all over but I think that would get rid of the sizing problems, no?
Also I think on your page where it says how to install this there is an error?
At the moment it says :
Add this line to “blueprint/screen.css”,
@import ‘plugins/silksprite/sprite.css’;
but shouldn’t it be -
@import ‘plugins/sprites/sprite.css’;
as when you unzip the download file it comes in a folder called sprites?
Just thought you might not have noticed on that one though.
Thanks again for such a great addition though, much appreciated.
Best wishes,
Mark
May 25th, 2008 at 5:27 am
I’m working on a tool to automatically generate the file at a certain size. The best solution is to give the sprite its own span but that isn’t optimal as it requires extra markup.
Good catch regarding the difference in naming. The files used to be packaged as silksprite.zip instead of sprites.zip. I accidently changed it with the last update.
I will get a renamed & increased whitespace version together sometime soon.
May 25th, 2008 at 5:31 am
Hi Don,
So would it not work to just change the PNG file so that instead of being a vertical image you just make it horizontal instead and just change the CSS styles so that you move along the image to the required sprite instead of moving up and down?
If then the text is enlarged then it won’t matter if the image expands will it as it will be enlarging in effect in the vertical plane and so nothing left or right of the icon you want should show should it?
Thanks again for this great resource. Just thought it might work horizontally instead of vertically so then you don’t have to make the automatic generator.
Just a thought though.
Best wishes,
Mark
May 25th, 2008 at 6:13 am
I’m not sure it would work horizontally unless there was excessive white space. I think you would run into the same issue and require additional markup unless you could guarantee that the sprites had sufficient white space.
The generator is already in development and really isn’t a hardship. I’m just having a hard time getting one of the steps in the process automated (gimp isn’t cooperating).
-Don
May 25th, 2008 at 6:38 am
Hi Don,
Yep just had another thought about it and you are absolutely right it would still suffer the same problems. Shame really!
Will wait for the auto generator then
Will this be a download-able generator then or something you are going to host on your site and then people can create whatever they need?
Best wishes,
Mark
June 2nd, 2008 at 12:48 am
I’m looking forward to the new version, since I can see the image below in the version that I am currently using.
I’m actually doing a hackjob right now of using the same classnames as you, but referencing the images inside a silk_images folder.
A fixed whitespace version would be a godsend!
June 8th, 2008 at 3:01 am
looking forward to seeing the generator happen!
September 14th, 2008 at 6:31 am
Hi,
Just figured out that the icons does not show on Internet Explorer 7. To fix it, this shoud be put on a conditional comment:
.ss_sprite { display: inline-block; }
Best regards,
November 16th, 2008 at 7:22 pm
[...] work in progress. He also has a cool name. The Don (yes, I had to) has also created a plugin called SilkSprite, which lets you use a vast number of icons out of the box in your [...]
March 25th, 2009 at 3:11 am
[...] Announcing SilkSprite: A CSS Sprite Plugin for Blueprint от Don Albrecht, Ajax Bestiary.com.Автоматическое создание CSS Sprites для CSS-фреймворка Blueprint. [...]
June 26th, 2009 at 11:16 am
Very good….i like this article.
See on my web
Leave a Reply