Badges for Project Stages https://github.com/potherca-blog/project-stages/

README.md

Badges for Project Stages

Introduction

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.

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.

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.

Project Stages

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:

"This project is in a ... Stage"

1. Concept
2. Rresearch
3. Experiment
4. Development
5. Production Ready
6. ! Deprecated
7. ? Unknown

The Badges

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.

This can quite easily be achieved using the excellent service provided by Shields.io:

1. 
2. 
3. 
4. 
5. 
6. 

---

Any questions or feedback can be placed in comments below this page or just Tweet to @potherca

Source of this page available as a Gist under a Creative Commons Attribution-ShareAlike 4.0 International License — Created by Potherca

---

Similar work:

• https://gist.github.com/taiki-e/ad73eaea17e2e0372efb76ef6b38f17b

dabblet.css

/**
 * Badges for Project Stages
 *
 * @see: http://result.dabblet.com/gist/a2ae67caa3863a299ba0
 * @see: https://gist.pother.ca/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://gist.pother.ca/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://gist.pother.ca/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://gist.pother.ca/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://gist.pother.ca/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://gist.pother.ca/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://gist.pother.ca/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-sa/4.0/"
		>Creative Commons Attribution-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"}