Basic grid with awesome properties

The goals were to make the grid as spacious as possible, while not
compromising many-column layouts and small screen sizes. Works for an
arbitrary number of columns and adjusts horizontal spacing according to
the number of columns and the viewport size.

package.json

@@ -4,10 +4,10 @@
 	"author": "Vit Brunner",
 	"description": "Visual comparison of different translations of itemized texts; e.g. poems, bibles, etc.",
 	"devDependencies": {
-		"docpad": "6.x",
-		"docpad-plugin-coffeescript": "2.x",
-		"docpad-plugin-jade": "2.x",
-		"docpad-plugin-less": "2.x",
+		"docpad": "6.38.x",
+		"docpad-plugin-coffeescript": "2.2.x",
+		"docpad-plugin-jade": "2.3.x",
+		"docpad-plugin-sass": "2.4.x",
 		"qunitjs": "1.11.x",
 		"phantomjs": "1.9.x"
 	},

source/documents/index.html.jade

@@ -5,11 +5,30 @@ html(ng-app="sideBySide")
 		meta(charset="utf-8")
 		link(rel="stylesheet", type="text/css", href="//fonts.googleapis.com/css?family=Titillium+Web:400,700,400italic,700italic")
 		link(rel="stylesheet", type="text/css", href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.0.2/css/font-awesome.min.css")
+		link(rel="stylesheet", type="text/css", href="//yui.yahooapis.com/pure/0.2.0/pure-min.css")
 		link(rel="stylesheet", type="text/css", href="styles/style.css")
 		include _scripts.html.jade
 
 	body
-		div(class="container", ng-controller="comparisonController")
-			div(class="verse", ng-repeat="verse in verses")
-				div(class="section", ng-bind="verse.section")
-				div(class="version", ng-repeat= "version in verse.versions") {{ version }}
+		#comparison(ng-controller="comparisonController", class="cols-{{columns}}")
+			.pure-g-r(ng-repeat="verse in verses")
+				.version(ng-repeat="version in verse")
+					.version-outer
+						.version-inner
+							.section {{ version.section }}
+							.text {{ version.text }}
+
+		//// debugging cascade
+		//hr
+		//- var columnlist = []
+		//- for (var i = 1; i <= 6; i++)
+		//	- columnlist.push(i)
+		//for columns in columnlist
+		//	.pure-g-r(class="cols-#{columns}")
+		//		- var cols = new Array(columns)
+		//		for c in cols
+		//			.version
+		//				.version-outer
+		//					.version-inner
+		//						.section= columns
+		//						.text= columns

source/documents/scripts/controllers.js.coffee

@@ -1,7 +1,57 @@
 angular.module("sideBySide.controllers", [])
 .controller "comparisonController", ['$scope', ($scope) ->
+	$scope.columns = 2
 	$scope.verses = [
-		{ section: 'first',  versions: [ 'a', '1' ] }
-		{ section: 'second', versions: [ 'b', '2' ] }
+		[
+			{
+				section: 'first'
+				text: 'a'
+			}, {
+				section: 'I'
+				text: '1'
+			}
+		], [
+			{
+				section: 'second'
+				text: 'b'
+			}, {
+				section: 'II'
+				text: '2'
+			}
+		], [
+			{
+				section: 'third'
+				text: 'c'
+			}, {
+				section: 'III'
+				text: '3'
+			}
+		], [
+			{
+				section: 'fourth'
+				text: 'd'
+			}, {
+				section: 'IV'
+				text: '4'
+			}
+		]
 	]
 ]
+
+#.controller "notificationController", ['$scope', '$timeout', ($scope, $timeout) ->
+#	$scope.id = 0
+#	$scope.notifications = []
+#
+#	$scope.notify = (text, type = "info") ->
+#		$scope.notifications[$scope.id] = {
+#			text: text
+#			type: type
+#		}
+#		$timeout(() ->
+#			$scope.remove($scope.id)
+#		, 1000)
+#		$scope.id++
+#
+#	$scope.remove = (id) ->
+#		delete $scope.notifications[id]
+#]

source/documents/styles/style.css.less

@@ -1,3 +0,0 @@
-body {
-	font-family: "Titillium Web", sans-serif;
-}

source/documents/styles/style.css.sass

@@ -0,0 +1,31 @@
+body
+	font-family: "Titillium Web", sans-serif
+
+.version
+	display: inline-block
+	letter-spacing: normal
+	word-spacing: normal
+
+	.section
+		color: #FFF
+		background-color: #999
+		padding: 0px 5px
+		border-radius: 5px
+		position: absolute
+		line-height: 20px
+		left: -10px
+		top: -5px
+
+	.version-inner
+		background-color: #F6F6F6
+		position: relative
+		padding: 10px 10px 5px 10px
+
+$max_columns: 6
+@for $i from 1 through $max_columns
+	.cols-#{$i}
+		.version
+			width: percentage(1 / $i)
+
+			.version-outer
+				padding: 5px percentage(1 / (5 * $i))