I recently needed to display a few contextual numbers near each other in a web app. I’ve taken to liking the twitter bootstrap ‘badges’ for little informational numbers, especially with the color coding that badge-important, badge-info, and badge-success provide. Easy ways to quickly communicate not only the number, but a hint at what it means.
The problem is that when you put a bunch of badges right next to each other, you get kindof a mess.
So I went looking for ‘split badges’ (or some such thing), which I’ve seen on various applications, notibly on ‘Things’:
But I couldn’t find anything that just ‘told’ me how to do it, or put it in a plugin… or anything. So I set out to just make it happen.