CSS Sprite for button rollover image swap vs. jQuery imageSwap approach -- what's Thoughtbot's best practice?

Design
1

I’ve looked at StackOverflow in some detail and haven’t found a good fix for the broken swapImage issue. Instead, I’m finding plenty of advice that indicates I should change all my custom button rollover code to use CSS sprites and switch background-image position on hover as I do elsewhere on the site. What’s Thoughtbot’s take on that?

There appear to be several popular gems for implementing sprites from a collection of image files in a directory. Can you recommend any you’ve used or do you have your own in-house approach for handling sprites?

Thanks,

Dean

Continuing the discussion from swapImage {src: ‘image2.jpg’} problem in Rails 3.1:

2

@hikari17 I would ask why you need to use a sprite for a button. Its not something that I have done in a long time because you can duplicate most effects just using CSS now. Is the design of the button something that you couldn’t do it in CSS? If you throw in an image of your button styles here I can help you do them in CSS.

That said I used to just do the sprite by hand in photoshop which probably doesn’t help you here. I know there are a few tools out there like http://spritepad.wearekiss.com/ just go a google search for “css sprite generator” and that compass has a sprite mixin that might be more helpful.

3

Kyle:

So to sum up, thoughtbot’s best practice is to implement buttons solely with CSS rather than with images, correct?. I’m totally cool with doing it that way (I’m used to it in projects where I’ve used Bootstrap).

One concern in Genlighten’s case would be that a large percentage of our userbase comes to us via older browsers (<= IE8) and so I’m guessing I’d potentially be showing them rectangular buttons instead of rounded ones. But that’s probably not a big deal at this point.

I don’t seem to be able to upload my button normal/hover state images to this post using your image upload tool (perhaps because they are gifs?) but I’ll send a separate e-mail to you including them. Basically, from the original site design and a subsequent update we have custom rounded buttons with drop shadows and other “Web 2.0” effects that are probably looking kind of dated in the current iOS7 era. Some are just blue with white Helvetica Neue text and could easily be replaced with Bootstrap-like CSS-generated ones. Others are more brown-gold and have color icons on them in addition to text. Those I’m guessing would be tougher to implement in CSS, but still probably doable.

I’m perfectly content using an online tool or a manual approach to making an image sprite file that aggregates all our various buttons/states and then adjusting our CSS to handle the background-x-y shifts (a few of our specialized buttons use that technique already.) But it would probably be a lot easier for maintenance and updating purposes to ditch that approach in favor of the pure CSS one you’re advocating.

Thanks,

Dean

4

One concern in Genlighten’s case would be that a large percentage of our userbase comes to us via older browsers (<= IE8)

Find your answer here: http://dowebsitesneedtolookexactlythesameineverybrowser.com/ :smile:

If I remember correctly this is a good article to read about progressive enhancement / graceful degradation: Understanding Progressive Enhancement – A List Apart

Did you want help making the buttons into CSS?

5

HaHa… good one, Kyle. Guess I won’t be sweating the differences across browsers. :smiley:

Yes, I would be grateful to get your help on making the buttons into CSS.

Thanks,

–Dean

6

I created them without really looking at them. I am probably off on the color adjustments a little. If you want you can just color grab from the images. I like doing it this way because if I want to change the color of the button while I’m designing I just need to change a variable. Let me know if you have any other questions.