Badges for Project Stages

dabblet.css

/**
 * Badges for Project Stages
 *
 * @see: http://result.dabblet.com/gist/a2ae67caa3863a299ba0
 * @see: http://bl.ocks.org/potherca/raw/a2ae67caa3863a299ba0
 */

@import url(https://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans+Mono);
@import url(https://pother.ca/CssBase/css/base.css);
@import url(https://pother.ca/CssBase/css/created-by-potherca.css);

body {
	font-family:'Droid Sans', Arial, sans-serif;
	max-width: 45em;
}

td[colspan="2"] {
	background: #CCD;
	color: white;
	text-indent: 2em;
}

.stage-banner .current-stage-container {
	position: relative;
	border: 0.1em solid;
	display: block;
	height: 4em;
	width: 28.40em;
	padding: 0;
	
	border: 1px solid rgb(225,225,225);
	box-shadow: 0 0 0.5em rgba(50,50,50, 0.5), 0 0 0.75em rgba(50,50,50, 0.5), 0 0 1em rgba(50,50,50, 0.5);
}

.stage-banner .current-stage-container .stage-block {
	display: block;
	float: left;
	height: 2em;
	width: 2em;
	margin: 0;
	padding: 0;
	border-right: 0.05em solid;

	border-color: rgb(250,250,250);
	color: white;
	font-size: 2em;
	line-height: 2em;
	text-align: center;
	font-family: sans, sans-serif;
	background-image: radial-gradient(
		circle closest-corner,
		rgba(0, 0, 0, 0), 
		rgba(0, 0, 0, 0.25)
	)
	;
    text-shadow: -1px -1px 1px #111, 2px 2px 1px #363636;
	
}
.stage-banner .stage-block:last-child {
	border-right: none;
} 

.stage-list {color:white; border-color: #000;}
.stage-banner .stage-1 {background-color: #e05d44;}
.stage-banner .stage-2 {background-color: #fe7d37;}
.stage-banner .stage-3 {background-color: #dfb317;}
.stage-banner .stage-4 {background-color: #a4a61d;}
.stage-banner .stage-5 {background-color: #4c1;}
.stage-banner .stage-6 {background-color: #F00;}
.stage-banner .stage-7 {background-color: #000;}

/*
  "brightgreen":    { "colorB": "#4c1" },
  "green":          { "colorB": "#97CA00" },
  "yellow":         { "colorB": "#dfb317" },
  "yellowgreen":    { "colorB": "#a4a61d" },
  "orange":         { "colorB": "#fe7d37" },
  "red":            { "colorB": "#e05d44" },
  "blue":           { "colorB": "#007ec6" },
  "grey":           { "colorB": "#555" },
  "lightgrey":      { "colorB": "#9f9f9f" },
  "lightgray":      { "colorB": "#9f9f9f" }
*/
.stage-description {
	height: 8em;
	vertical-align: top;
}

.stage-banner .stage-list {
	display: inline-block;
	text-align: center;
	position:relative;
	border-bottom: 0.1em solid;
}

.stage-banner .stage-list > * {
	font-weight: normal;
	display: block;
	border: 0.1em solid;
	border-bottom: none;
}
.stage-banner .stage-list > *:last-child {
	background-color: black;
	color: white;
}
/*EOF*/

dabblet.html

<h1>Badges for Project Stages</h1>
<article>
	<h2>Introduction</h2>
	<p>
		As any active software developer, I tend to have a lot of projects laying about. With the advent of Github all of these projects now live in the public eye.
	</p>
	<p>
		For me, as the author, it isn't dificult to keep track of which project is in which state of production. For the casual visitor of my project pages this is a different matter.
	</p>
	<p>
		To help passers-by to identify how solid a certain project is at-a-glance, I felt it would be prudent to offer them a "Badge". Some uniform way of knowing what to expect of the code in the repository without even having to look at it.
	</p>
	
	
	<h2>Project Stages</h2>
	<p>
		Before a visitor can be alerted of which stage of production a project is in, these stages need to be defined. After some general research on what are the most common terms used elsewhere I came up with the following list:
	</p>
	<div class="stage-banner">
		<ol class="current-stage-container">
			<li class="stage-block stage-1">C</li>
			<li class="stage-block stage-2">R</li>
			<li class="stage-block stage-3">E</li>
			<li class="stage-block stage-4">D</li>
			<li class="stage-block stage-5">.</li>
			<li class="stage-block stage-6">!</li>
			<li class="stage-block stage-7">?</li>
		</ol>
	
		<p class="stage-description">
			This project is in its 
			<span class="stage-list">
				<b class="stage-1">Concept</b>
				<b class="stage-2">Research</b>
				<b class="stage-3">Experiment</b>
				<b class="stage-4">Development</b>
				<b class="stage-5">Production Ready</b>
				<b class="stage-6">Deprecated</b>
				<b class="stage-7">Unknown</b>
			</span>
			stage
		</p>
	</div>
	
	<h2>The Badges</h2>
	<p>
		It would be nice to be able to display these stages in an uniform manner across projects. Preferably in a way that mirrors the look and feel of other badge providers.
	</p>
	<p>
		This can quite easily be achieved using the excellent service provided by <a href=" http://shields.io/">Shields.io</a>
	</p>
	<p>
		Below you can find the full set of badges I use and the HTML code needed to display them:
	</p>
	
	<table>
	<thead>
		<tr>
			<th>Project Stage</th>
			<th>Badge</th>
			<th>HTML Source</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Concept</td>
			<td>
				<img src="https://img.shields.io/badge/project%20stage-concept-red.svg" />
			</td>
			<td><code>&lt;img src="https://img.shields.io/badge/project%20stage-concept-red.svg" /&gt;</code></td>
		</tr>	
		<tr>
			<td>Research</td>
			<td><img src="https://img.shields.io/badge/project%20stage-research-orange.svg" /></td>
			<td><code>&lt;img src="https://img.shields.io/badge/project%20stage-research-orange.svg" /&gt;</code></td>
		</tr>
		<tr>
			<td>Experimental</td>
			<td><img src="https://img.shields.io/badge/project%20stage-experimental-yellow.svg" /></td>
			<td><code>&lt;img src="https://img.shields.io/badge/project%20stage-experimental-yellow.svg" /&gt;</code></td>
		</tr>
		<tr>
			<td>Development</td>
			<td><img src="https://img.shields.io/badge/project%20stage-development-yellowgreen.svg" /></td>
			<td><code>&lt;img src="https://img.shields.io/badge/project%20stage-development-yellowgreen.svg" /&gt;</code></td>
		</tr>
		<tr>
			<td>Production Ready</td>
			<td><img src="https://img.shields.io/badge/project%20stage-production%20ready-brightgreen.svg" /></td>
			<td><code>&lt;img src="https://img.shields.io/badge/project%20stage-production%20ready-brightgreen.svg" /&gt;</code></td>
		</tr>
		<tr>
			<td>Deprecated</td>
			<td><img src="https://img.shields.io/badge/project%20stage-%20!%20DEPRECATED%20%20%20!-ff0000.svg" /></td>
			<td><code>&lt;img src="https://img.shields.io/badge/project%20stage-%20!%20DEPRECATED%20%20%20!-ff0000.svg" /&gt;</code></td>
		</tr>
		<tr>
			<td>Unknow</td>
			<td colspan="2"><i>no image required</i></td>
		</tr>
	</tbody>
	</table>
</article>

<h2>Usage</h2>

<h3>Markdown</h3>

One-liners for badges in markdown files are less readable and less maintainable,
so use the following instead.

The link for all badges is the same, pointing to this page.


<h4>Concept</h4>
<pre class="code">
    [![Project Stage Badge: ][Project Stage Page]

    [Project Stage Badge: Concept]: https://img.shields.io/badge/Project%20Stage-Concept-red.svg
    [Project Stage Page]: https://bl.ocks.org/potherca/raw/a2ae67caa3863a299ba0/
</pre>
<h4>Research</h4>
<pre class="code">
    [![Project Stage Badge: Research][Project Stage Page]

    [Project Stage Badge: Research]: https://img.shields.io/badge/Project%20Stage-Research-orange.svg
    [Project Stage Page]: https://bl.ocks.org/potherca/raw/a2ae67caa3863a299ba0/
</pre>
<h4>Experimental</h4>
<pre class="code">
    [![Project Stage Badge: Experimental][Project Stage Page]

    [Project Stage Badge: Experimental]: https://img.shields.io/badge/Project%20Stage-Experimental-yellow.svg
    [Project Stage Page]: https://bl.ocks.org/potherca/raw/a2ae67caa3863a299ba0/
</pre>
<h4>Development</h4>
<pre class="code">
    [![Project Stage Badge: Development][Project Stage Page]

    [Project Stage Badge: Development]: https://img.shields.io/badge/Project%20Stage-Development-yellowgreen.svg
    [Project Stage Page]: https://bl.ocks.org/potherca/raw/a2ae67caa3863a299ba0/
</pre>
<h4>Production Ready</h4>
<pre class="code">
    [![Project Stage Badge: Production Ready][Project Stage Page]

    [Project Stage Badge: Production Ready]: https://img.shields.io/badge/Project%20Stage-Production%20Ready-brightgreen.svg
    [Project Stage Page]: https://bl.ocks.org/potherca/raw/a2ae67caa3863a299ba0/
</pre>
<h4>DEPRECATED</h4>
<pre class="code">
    [![Project Stage Badge: DEPRECATED][Project Stage Page]

    [Project Stage Badge: DEPRECATED]: https://img.shields.io/badge/Project%20Stage-%20!%20DEPRECATED%20%20%20!-ff0000.svg
    [Project Stage Page]: https://bl.ocks.org/potherca/raw/a2ae67caa3863a299ba0/
</pre>


<footer class="created-by">
	<p>
		Any questions or comments can be made on the page of this <a 
		href="https://gist.github.com/potherca/a2ae67caa3863a299ba0">Gist</a> 
		or just <a href="https://twitter.com/intent/tweet?screen_name=potherca" class="twitter-mention-button" data-size="large" data-related="potherca">Tweet to @potherca</a>
		<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
	</p>
	<p>
		Source of this page available as a <a href="https://gist.github.com/potherca/a2ae67caa3863a299ba0">Gist</a> under a <a rel="license" href="https://creativecommons.org/licenses/by-nc-sa/4.0/"
		>Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</a> &mdash; Created by <a href="https://pother.ca/" class="potherca">Potherca</a>
	</p>	
</footer>

dabblet.js

/* */

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Badges for Project Stages</title>
    <link href="./dabblet.css" rel="stylesheet" />
    <script src="http://dabblet.com/code/prefixfree.min.js"></script>
</head>
<body>
    <script src="https://pother.ca/JsBase/add-on/load-dabblet-on-bl.ocks.org.js" id="dabblet-html-goes-here"></script>
</body>
</html>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}