created a working webpage layout

app.js

@@ -2,10 +2,13 @@
     'use strict';
 
     var app = angular.module('grimoire', [
-        'ngRoute',
+        //'ngRoute',
+        'ui.bootstrap',
+        'ui.slimscroll',
         'grimoire.controller',
         ]);
 
+/*
     app.config(['$routeProvider', function($routeProvider) {
         $routeProvider.when('/grimoire', {
             templateUrl: 'grimoire.html',
@@ -14,6 +17,10 @@
         }).otherwise({
             redirectTo: '/grimoire'
         });
+    }]).config(['$httpProvider', function($httpProvider) {
+        $httpProvider.defaults.useXDomain = true;
+        delete $httpProvider.defaults.headers.common['X-Requested-With'];
     }]);
+*/
 
 }(window.angular));

bower.json

@@ -23,6 +23,8 @@
     "angular-bootstrap": "~0.12.0",
     "bootstrap": "~3.3.2",
     "lodash": "~3.0.0",
-    "angular-route": "~1.3.10"
+    "angular-route": "~1.3.10",
+    "slimscroll": "~1.3.3",
+    "angular-slimscroll": "~1.1.2"
   }
 }

grimoire-controller.js

@@ -6,7 +6,67 @@
     function GrimoireController() {
         /*jshint validthis: true */
         this.welcome = 'Welcome to the Grimoire App!';
-        console.log("LOADED CONTROLLER");
+        this.sources = [
+        {
+            'name': 'Core Rule Book',
+            'sources': ['Armor', 'Weapons', 'Wondrous Items'],
+        },
+        {
+            'name': 'Advanced Player\'s Guide',
+            'sources': ['Armor', 'Weapons', 'Wondrous Items'],
+        },
+        {
+            'name': 'Core Rule Book',
+            'sources': ['Armor', 'Weapons', 'Wondrous Items'],
+        },
+        {
+            'name': 'Advanced Player\'s Guide',
+            'sources': ['Armor', 'Weapons', 'Wondrous Items'],
+        },
+        {
+            'name': 'Core Rule Book',
+            'sources': ['Armor', 'Weapons', 'Wondrous Items'],
+        },
+        {
+            'name': 'Advanced Player\'s Guide',
+            'sources': ['Armor', 'Weapons', 'Wondrous Items'],
+        },
+        ];
+        this.itemLists = [
+        {
+            'timestamp': new Date() - 100000,
+            'items': [
+            {
+                'name': '+2 super cool sword',
+                'worth': 5000,
+                'url': 'http://www.google.com'
+            },
+            {
+                'name': 'nifty hat',
+                'worth': 2000,
+                'url': ''
+            }
+            ],
+        },
+        {
+            'timestamp': new Date(),
+            'items': [
+            {
+                'name': '+3 super cool sword',
+                'worth': 5000,
+                'url': 'http://www.google.com'
+            },
+            {
+                'name': 'nifty boots',
+                'worth': 2000,
+                'url': ''
+            }
+            ],
+        }];
+
+        this.copyToClipboard = function(list) {
+            console.log(list);
+        }
     }
 
     angular

grimoire.css

@@ -1,3 +1,22 @@
-.body {
+.menu {
-    ;
+    border: 2px solid;
-};
+}
+
+.super {
+    vertical-align: super;
+    font-size: smaller;
+}
+
+.item-list {
+    border: 1px dotted;
+    padding: 1em;
+    margin: 1em;
+}
+
+.copy {
+    font-size: smaller;
+}
+
+.big {
+    font-size: 200%;
+}

index.html

@@ -10,9 +10,37 @@
 <link href="bower_components/bootstrap/dist/css/bootstrap-theme.css" rel="stylesheet" />
 
 </head>
-<body>
+<body ng-controller="GrimoireController as grimoire">
-<div class="view-container" ng-cloak>
+
-    <div ng-view class="view-frame"></div>
+<div class="col-md-12 menu">{{grimoire.welcome}}</div>
+<div class="col-md-12">
+<div class="col-md-3 menu">
+<div slimscroll="{height: '200px', alwaysVisible:true, railVisible:true}">
+    <ul>
+        <li ng-repeat="source in grimoire.sources"><input type="checkbox" value={{source}}>{{source.name}}
+            <ul>
+            <li ng-repeat="item in source.sources"><input type="radio" name="source" value={{item}}>{{item}}</li>
+            </ul>
+        </li>
+    </ul>
+    </div>
+</div>
+<div class="col-md-9 menu">
+    <div slimscroll="{height: '500px', alwaysVisible:true, railVisible:true}">
+    <div class="item-list" ng-repeat="list in grimoire.itemLists">
+        <span><strong>~~{{list.timestamp|date:'medium'}}~~</strong> <input class="copy" type="button" ng-click="grimoire.copyToClipboard(list)" value="Copy to clipboard"></span>
+        <ul>
+        <li ng-repeat="item in list.items">{{item.name}} {{item.worth}}gp <a class="super" ng-if="item.url && item.url != ''" href={{item.url}}>link</a></li>
+        </ul>
+    </div>
+    </div>
+</div>
+</div>
+<div class="col-md-12 big">
+<div class="col-md-3 menu">Minor Item <input type="number" class="form-control"></div>
+<div class="col-md-3 menu">Medium Item <input type="number" class="form-control"></div>
+<div class="col-md-3 menu">Major Item <input type="number" class="form-control"></div>
+<div class="col-md-3 menu"><input type="button" value="GO"></div>
 </div>
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
@@ -37,6 +65,8 @@
 <script type="application/javascript" src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
 <script type="application/javascript" src="bower_components/angular-bootstrap/ui-bootstrap.js"></script>
 <script type="application/javascript" src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
+<script type="application/javascript" src="bower_components/slimscroll/jquery.slimscroll.js"></script>
+<script type="application/javascript" src="bower_components/angular-slimscroll/angular-slimscroll.js"></script>
 
 <script type="application/javascript" src="app.js"></script>
 <script type="application/javascript" src="grimoire-controller.js"></script>