Closet Coder

I work in my closet. I code. Yep.

Split Badges With Twitter Bootstrap and HAML

| Comments

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.

I’m using rails and twitter bootstrap, so I threw this in bootstrap_and_overrides.css.less

bootstrap_and_overrides.css.less
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

.badge-right {
  -webkit-border-top-left-radius: 0px;
  -moz-border-top-left-radius: 0px;
  border-top-left-radius: 0px;
  -webkit-border-bottom-left-radius: 0px;
  -moz-border-bottom-left-radius: 0px;
  border-bottom-left-radius: 0px;
  margin-left:0px;
  padding-left:5px;
}

.badge-left {
  -webkit-border-top-right-radius: 0px;
  -moz-border-top-right-radius: 0px;
  border-top-right-radius: 0px;
  -webkit-border-bottom-right-radius: 0px;
  -moz-border-bottom-right-radius: 0px;
  border-bottom-right-radius: 0px;
  margin-right:0px;
  padding-right:5px;
}

.badge-middle {
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  margin-right:0px;
  margin-left:0px;
  padding-right:5px;
  padding-left:5px;
}
show.html.haml
1
2
3
4
5

Vendors
 
%span.badge.badge-success.badge-left= accepted_count
%span.badge.badge-info.badge-middle= pending_count
%span.badge.badge-important.badge-right= rejected_count

Then I went to implement them and noticed the gaps.

Since I was using HAML, the spans automatically had spaces inserted around them. Hmmmm…

Apparently all it takes is a little > to tell HAML to behave.

show.html.haml
1
2
3
4
5

Vendors
 
%span.badge.badge-success.badge-left>= accepted_count
%span.badge.badge-info.badge-middle>= pending_count
%span.badge.badge-important.badge-right>= rejected_count

And we have what we want! Yay for clean badges!

Comments