adapted styling

css/main.css

@@ -1,4 +1,37 @@
 body {
     padding-top: 60px;
     padding-bottom: 40px;
+    overflow-y: scroll;
+}
+
+#content ul {
+    margin: 0;
+}
+
+#content li {
+    list-style: none;
+    border-bottom: 1px solid #EEE;
+    padding: 10px 0;
+}
+
+#content li span {
+    padding-left: 10px;
+    font-size: 1.2em;
+}
+
+#content a.imgwrapper,
+#content a.imgwrapper img {
+    display: inline-block;
+}
+
+.icon-heart {
+    padding-right: 4px;
+}
+
+.mini {
+    width: 100px;
+}
+
+.maxi {
+    margin: 4px 0 10px;
 }

index.html

@@ -25,7 +25,7 @@
                 <div class="nav-collapse">
                     <ul class="nav">
                         <li><a href="/">Home</a></li>
-                        <li><a href="/cheese">Cheese List</a></li>
+                        <li><a href="/cheese"><i class="icon-heart"></i>Cheese List</a></li>
                     </ul>
                 </div><!--/.nav-collapse -->
             </div>
@@ -34,29 +34,12 @@
 
     <div class="container">
         <div class="page-header">
-            <h1>Cheese App - Cheesy can be a good thing</h1>
+            <h1>Cheese App <small>We love it cheesy</small></h1>
         </div>
-        <h2 id="subheading"></h2>
-        <div id="content"></div>
+        <div id="content">homecontent</div>
     </div> <!-- /container -->
 
-    <!-- Le javascript
-    ================================================== -->
-    <!-- Placed at the end of the document so the pages load faster -->
-    <!--<script src="../assets/js/jquery.js"></script>-->
-    <!--<script src="../assets/js/bootstrap-transition.js"></script>-->
-    <!--<script src="../assets/js/bootstrap-alert.js"></script>-->
-    <!--<script src="../assets/js/bootstrap-modal.js"></script>-->
-    <!--<script src="../assets/js/bootstrap-dropdown.js"></script>-->
-    <!--<script src="../assets/js/bootstrap-scrollspy.js"></script>-->
-    <!--<script src="../assets/js/bootstrap-tab.js"></script>-->
-    <!--<script src="../assets/js/bootstrap-tooltip.js"></script>-->
-    <!--<script src="../assets/js/bootstrap-popover.js"></script>-->
-    <!--<script src="../assets/js/bootstrap-button.js"></script>-->
-    <!--<script src="../assets/js/bootstrap-collapse.js"></script>-->
-    <!--<script src="../assets/js/bootstrap-carousel.js"></script>-->
-    <!--<script src="../assets/js/bootstrap-typeahead.js"></script>-->
-
+    <!--Le javascript-->
     <script src="vendors/yui-3.5.1/build/yui/yui-min.js"></script>
     <script src="js/main.js" type="text/javascript"></script>
 

js/main.js

@@ -1,4 +1,3 @@
-/*global YUI */
 YUI({
     modules: {
         'cheese-model': {
@@ -50,7 +49,6 @@ YUI({
                 this.showView('cheeseList', {
                     model: myCheeseList
                 });
-                Y.one('#subheading').set('text', 'Mmmmmmh, cheese');
             }
         }, {
             path: '/cheese/:id',
@@ -61,7 +59,6 @@ YUI({
                     this.showView('cheese', {
                         model: cheeseModel
                     });
-                    Y.one('#subheading').set('text', cheeseModel.get('type'));
                 } else {
                     this.fire('error', {
                         type : 'cheese not found',
@@ -73,6 +70,6 @@ YUI({
     });
 
     app.render();
-    //app.navigate('/cheese');
+//    app.navigate('/cheese');
 
 });

js/model/CheeseList.js

@@ -1,4 +1,3 @@
-/*global YUI */
 YUI.add('cheese-list', function (Y) {
 
     'use strict';

js/model/CheeseModel.js

@@ -1,4 +1,3 @@
-/*global YUI */
 YUI.add('cheese-model', function (Y) {
 
     'use strict';

js/view/CheeseListView.js

@@ -1,12 +1,11 @@
-/*global YUI */
 YUI.add('cheese-list-view', function (Y) {
 
     'use strict';
 
     Y.CheeseListView = Y.Base.create('cheeseListView', Y.View, [], {
 
-        _template: '<p>There are ({pieces} pieces remaining)</p><ul>{itemList}</ul>',
-        _itemTemplate: '<li>Delicious <a href="/cheese/{type}">{type}</a> ({pieces} pieces remaining)</li>',
+        _template: '<h2>Mmmmmmh, cheese</h2><p>There are <b>{pieces} pieces</b> remaining in total</p><ul>{itemList}</ul>',
+        _itemTemplate: '<li><a href="/cheese/{type}" class="thumbnail mini imgwrapper"><img src="/img/{image}" alt="{type} image"></a><span>Delicious <a href="/cheese/{type}">{type}</a> ({pieces} piece(s) remaining)</span></li>',
 
         render: function () {
             var container = this.get('container'),

js/view/CheeseView.js

@@ -1,11 +1,10 @@
-/*global YUI */
 YUI.add('cheese-view', function (Y) {
 
     'use strict';
 
     Y.CheeseView = Y.Base.create('cheeseView', Y.View, [], {
 
-        _template: '{pieces} piece(s) of delicious {type} remaining.<button class="btn btn-large btn-primary eat">Eat a Piece!</button>',
+        _template: '<h2>{type}</h2><img src="/img/{image}" alt="{type} image" class="thumbnail maxi"><p>There are <b>{pieces} piece(s)</b> of delicious {type} remaining.</p><button class="btn btn-large btn-primary eat">Eat a Piece!</button>',
 
         events: {
             '.eat': {click: 'eatPiece'}