Add OS version matrix widget.

WIDGETS.md

@@ -0,0 +1,25 @@
+# CircleCI Docs: Widgets
+
+Many documentation pages will have widgets. These are discrete page elements that provide advanced functionality within Markdown.
+
+The widgets available in CircleCI.com/docs/. are:
+
+## OS Version Matrix
+
+![OS Version Matrix Widget Screenshot](img/widget-os-matrix.png)
+
+Use this widget to display which version (if any) of some software is available on a given operating system (OS) supported by CircleCI. This only applies to CircleCI 1.0.
+
+Version numbers can be passed as either strings or from Jekyll datafiles.
+
+```
+{% include os-matrix.html trusty=site.data.trusty.versions.summary.docker precise="v1.7.1" macos="n/a" %}
+```
+
+If an OS doesn’t support some software, there’s no need to pass any variable at all.
+
+For example, if we had software that was only compatible with Ubuntu 14.04 “Trusty”, we would write:
+
+```
+{% include os-matrix.html trusty=site.data.trusty.versions.summary.docker %}
+```

jekyll/_includes/os-matrix.html

@@ -0,0 +1,20 @@
+{% if include.trusty %}
+	{% assign trusty = include.trusty %}
+{% else %}
+	{% assign trusty = "n/a" %}
+{% endif %}
+{% if include.precise %}
+	{% assign precise = include.precise %}
+{% else %}
+	{% assign precise = "n/a" %}
+{% endif %}
+{% if include.macos %}
+	{% assign macos = include.macos %}
+{% else %}
+	{% assign macos = "n/a" %}
+{% endif %}
+<div class="os-matrix">
+	<p><span>Ubuntu 14.04:</span>{{ trusty }}</p>
+	<p><span>Ubuntu 12.04:</span>{{ precise }}</p>
+	<p><span>OS X:</span>{{ macos }}</p>
+</div>

jekyll/assets/css/main.scss

@@ -193,3 +193,32 @@ code {
   padding: 2px;
   font-size: 75%;
 }
+
+/***** Widgets ****************************************************************/
+//
+//*****************************************************************************/
+.os-matrix{
+	display: inline-block;
+	margin: 10px 0;
+	border: 1px solid #DEDEDE;
+	box-shadow: 0 1px 3px 0 rgba(0,0,0,0.15);
+	background-color: white;
+	width: auto;
+}
+	.os-matrix p{
+		display: inline-block;
+		margin: 0;
+		border-left: 1px solid #DEDEDE;
+		padding: 5px 15px;
+	}
+		.os-matrix p:first-child{
+			border-left: none;
+		}
+
+		.os-matrix p span{
+			margin-right: 5px;
+			font-weight: bold;
+		}
+/***** End - Widgets **********************************************************/
+//
+//*****************************************************************************/

jekyll/assets/css/mobile.scss

@@ -65,3 +65,12 @@ div.article-container{
 		width: 100%;
 	}
 }
+
+@media (max-width: 600px) {
+	.os-matrix p{
+		display: block;
+		border-left: none;
+		padding-top: 0;
+		padding-bottom: 0;
+	}
+}