Replacing a badge generator with plain HTML and CSS

Submitted by olaf on 2014-06-02
Tags: html css

Yesterday, I stumbled upon Badge Poser and its associated Github repository badge-poser. It extracts information for a package from Packagist and creates various badges from this data.

Although I like the idea of having such badges in a README or web page, I fail to see the need for a full web application. That is why I tried a simple HTML and CSS only solution. You can create such badges with only two spans

<span class="badge tag">license</span><span class="badge value license">MIT</span>
<span class="badge tag">stable</span><span class="badge value stable-version">v2.0</span>

and the corresponding CSS

.badge {
    font-family: DejaVu Sans, Verdana, Geneva, sans-serif;
    font-size: 11px;
    color: white;
}

.badge.tag {
    background-color: #4c4c4c;
    padding: 2px 4px 3px 7px;
    border-radius: 4px 0 0 4px;
}

.badge.value {
    padding: 2px 7px 3px 4px;
    border-radius: 0 4px 4px 0;
}

.badge.license {
    background-color: #487;
}

.badge.stable-version {
    background-color: #29c;
}

which gives

licenseMIT stablev2.0

This already looks pretty good, but still lacks the nice button look, which could be done with some linear gradient. Another drawback is the need for a manual update if values change, of course.

To get a full set of badges, look at this Gist. You can view it live at JSFiddle or JSBin.

Post a comment

All comments are held for moderation; Markdown and basic HTML formatting accepted. If you want to stay anonymous, leave name, e-mail and website empty.