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
41 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. [...]
December 7th, 2009 at 12:43 pm
Hey dude, there seems to be a problem in FF3.5. The sprites seem to be off by a pixel or two and you can see the top on the icon below it. (The background-position is too low).
I reduced each position by a pixel and it solved most of the overflow, but there is still the occasional icon that’s overflowing.)
Any ideas?
December 8th, 2009 at 1:09 pm
I’ll take a look at it and see if we can make it right.
December 16th, 2009 at 9:30 am
[...] 100% Free Auto Blogs Hosted on Blogger.com/BlogSpot.com Setup Guideblueprint iron casting china automotive at blogcastingblueprint.com | Free Premium Wordpress Auto Install Themes Designer Plugin DevelopmentDiscount : Auto Blog Feeder – Wordpress Plugin | Net Best DealResearch Paper Blog » Blog Archive » Writing a Research Paper is a Matter of Proper PlanningFXPAL Blog » Blog Archive » Blueprint for information seeking evaluationNew Music Nation » Blog Archive » Review: Jay-Z The Blueprint 3 (Roc Nation)Hemmings Auto Blogs » Blog Archive » DAYS OF FERRARI 2008, Day 17: 1971 Ferrari 512MAnnouncing SilkSprite: A CSS Sprite Plugin for Blueprint » By Don Albrecht » article &ra… [...]
January 13th, 2010 at 2:16 am
Hi,
Nice blog and overall very useful blog. I am getting what I need here. Thank you for the efforts in writing all these.
January 18th, 2010 at 1:49 am
Hi,
Nice post! You have worked hard on jotting down the essential information. Keep sharing the good work in future too.
January 18th, 2010 at 1:51 am
Hi,
Thanks for the wonderful article. According to me multi-tasking will save your lot of time but on the other hand it will lose your concentration and never let you to pay attention on one work.
January 18th, 2010 at 2:22 am
Hi,
It was a very nice article! Just want to say thank you for the information you have shared. Just continue writing this kind of post. Thanks.
January 18th, 2010 at 2:33 am
Hi,
This is really a nice post, you share good piece of information.
January 25th, 2010 at 12:03 am
Hi,
This is really great work. Thank you for sharing such a useful piece of information here in the blog.
February 4th, 2010 at 5:57 pm
[...] Announcing SilkSprite: A CSS Sprite Plugin for Blueprint через Don Albrecht, Ajax Bestiary.com. [...]
February 27th, 2010 at 10:46 am
Cars and houses are quite expensive and not every person can buy it. However, credit loans are created to support different people in such cases.
May 4th, 2010 at 12:08 am
Nice plugin, thanks for sharing.
June 3rd, 2010 at 12:36 am
It is a great plugin for blueprint.
June 29th, 2010 at 11:31 pm
this is an amazing plug in thanks for the post!
July 19th, 2010 at 9:37 am
this is an amazing plug in thanks for the post!
August 24th, 2010 at 5:04 am
Your blogs has lots of information, thank you.
August 27th, 2010 at 6:21 am
Good article and post. I really thanks to the author!
August 31st, 2010 at 3:47 am
This site has lots of information, it has a step by step instruction, very clear.
September 1st, 2010 at 2:43 am
Thank you for this guide, it keeps me updated.
Leave a Reply