A Ratings UI Done Easy (Thanks to Open Table)

Good Artists Copy, Great Artists Steal

At work I was trying to figure out an easy way to do a ratings app but the icon had to be variable–it couldn’t just be stars or some other constant. I spent far too much time trying to make SVGs do the work but–maybe because I’m a novice with SVGs–that just didn’t work out.

So I did what any great programmer would do and came up with something by going through the CSS spec and figuring things out from the ground up…and if you believe that, I’ve got a bridge to sell you.

In truth, I looked at all of the sites I knew of that had ratings and saw what they were doing. Some sites used an image map (like Amazon & Yelp) but that’s just too static for my use case. Then, like a beacon of light cresting over the horizon, came the mighty OpenTable. They had a pretty easy, neat way of doing things. Additionally, it shows a percentage of the icons, as opposed to having an image of a whole, half, and quarter icon.

So I did what any great programmer would do and used it for my own needs. Don’t worry, everyone knows I wasn’t the genius who came up with it. Also, I don’t think I’m an artist, nor a great one at that (I’m just staying afloat as a programmer as it is).

The Goods

Just using the following HTML & CSS, you can see the simplicity of how these icons work. You just double the HTML markup for the icons, adding a filled class to the second set and add styling as necessary. The only catch is that the container around the two sets of icons has to have a specified width to adjust the filled set. That’s all there is!

See the Pen OpenTable-Style Ratings Icons by Matt Fehskens (@gonzofish) on CodePen.

Leave a Comment

Your email address will not be published. Required fields are marked *