new Documentation page

app/styles/docs/components.sass

@@ -1,2 +1,30 @@
 #docs-components-view
-  color: saddlebrown
+  color: saddlebrown
+
+.main
+  position : relative
+
+  .left
+    bottom: 10em
+    left: 10em
+    overflow-y: scroll
+    overflow-x: hidden
+    position: fixed
+    top: 5em
+    white-space: nowrap
+    width: 20%
+    -webkit-overflow-scrolling: touch
+
+  .right
+    left: 28em
+    bottom: 10em
+    position: fixed
+    overflow-y: scroll
+    overflow-x: hidden
+    right: 10em
+    top: 5em
+    //width: 80%
+    -webkit-overflow-scrolling: touch
+
+    .specialList
+      list-style-type: none

app/templates/docs/components.jade

@@ -1,6 +1,23 @@
 extends /templates/base
 
+
 block content
-  ul
-    for component in components
-      li= component.get('name')
+    div.main
+        div.left
+            ul
+                for component in components
+                    li= component.get('name')
+                    ul
+                        each doc in component.attributes.propertyDocumentation
+                            a(href="##{component.get('name')}#{doc.name}")
+                                li
+                                    | #{doc.name}
+
+        div.right
+            ul
+                for component in components
+                    each doc in component.attributes.propertyDocumentation
+                        li(id="#{component.get('name')}#{doc.name}")
+                            | #{doc.name}
+                            ul.specialList
+                                li=doc.description

app/views/docs/components_view.coffee

@@ -18,6 +18,7 @@ module.exports = class UnnamedView extends RootView
     
   onLoaded: ->
     console.log 'we have the components...', (c.get('name') for c in @componentDocs.models)
+    console.log 'we have the attributes...', (c.attributes for c in @componentDocs.models)
     super()
 
   getRenderData: ->