From e33aa49febc05058e0ada14c1bcfe6cf8c00143d Mon Sep 17 00:00:00 2001
From: Jack Lukic <jack@quirky.com>
Date: Wed, 1 May 2013 18:59:00 -0400
Subject: [PATCH] Fixes top level categories some

---
 docs/collection.html               |  22 ++--
 docs/collections/block.html        |   2 +-
 docs/collections/form.html         |   2 +-
 docs/collections/menu.html         |   2 +-
 docs/collections/table.html        |   2 +-
 docs/download.html                 |  24 ++--
 docs/element.html                  | 176 +++++++++++++++++++++++++++++
 docs/elements/button.html          |   2 +-
 docs/elements/header.html          |   2 +-
 docs/elements/label.html           |   2 +-
 docs/index.html                    |  32 ++++--
 docs/module.html                   | 176 +++++++++++++++++++++++++++++
 docs/modules/shape.html            |   2 +-
 docs/sink.html                     |   2 +-
 node/src/documents/collection.html |   2 +-
 node/src/documents/download.html   |   2 +-
 node/src/documents/element.html    |  32 ++++++
 node/src/documents/index.html      |   3 +-
 node/src/documents/module.html     |  32 ++++++
 node/src/layouts/default.html.eco  |   2 +-
 20 files changed, 481 insertions(+), 40 deletions(-)
 create mode 100644 docs/element.html
 create mode 100644 docs/module.html
 create mode 100755 node/src/documents/element.html
 create mode 100755 node/src/documents/module.html

diff --git a/docs/collection.html b/docs/collection.html
index ec34d4974..c19be5efd 100644
--- a/docs/collection.html
+++ b/docs/collection.html
@@ -78,7 +78,7 @@
       </div>
     </div>
     <div class="item">
-      <a href="module.html"><b>UI Modules</b></a>
+      <a href="/module.html"><b>UI Modules</b></a>
       <div class="menu">
         
           <div class="item"><a href="/modules/shape.html">Shape</a></div>
@@ -90,7 +90,7 @@
   <div class="ui fixed transparent contrasting main menu">
     <div class="container">
       <div class="title item">
-        <b>Semantic:</b> Semantic
+        <b>Semantic:</b> Library
       </div>
       <div class="icon previous link item">
         
@@ -98,26 +98,34 @@
         
       </div>
       <div class="section dropdown item">
-        2 of 3
+        3 of 5
         <div class="menu">
           
             <div class="item">
-              <a href="/download.html">1. Download</a>
+              <a href="/index.html">1. About</a>
+            </div>
+          
+            <div class="item">
+              <a href="/download.html">2. Download</a>
             </div>
           
             <div class="active item">
-              <a href="/collection.html">2. UI Collections</a>
+              <a href="/collection.html">3. UI Collections</a>
+            </div>
+          
+            <div class="item">
+              <a href="/element.html">4. UI Elements</a>
             </div>
           
             <div class="item">
-              <a href="/index.html">3. </a>
+              <a href="/module.html">5. UI Modules</a>
             </div>
           
         </div>
       </div>
       <div class="icon next link item">
         
-        <a href="/index.html"><i class="icon right-open"></i></a>
+        <a href="/element.html"><i class="icon right-open"></i></a>
         
       </div>
       <div class="right menu">
diff --git a/docs/collections/block.html b/docs/collections/block.html
index 0c674cc02..7e52db41b 100644
--- a/docs/collections/block.html
+++ b/docs/collections/block.html
@@ -78,7 +78,7 @@
       </div>
     </div>
     <div class="item">
-      <a href="module.html"><b>UI Modules</b></a>
+      <a href="/module.html"><b>UI Modules</b></a>
       <div class="menu">
         
           <div class="item"><a href="/modules/shape.html">Shape</a></div>
diff --git a/docs/collections/form.html b/docs/collections/form.html
index 410d2e4d3..9e388a260 100644
--- a/docs/collections/form.html
+++ b/docs/collections/form.html
@@ -78,7 +78,7 @@
       </div>
     </div>
     <div class="item">
-      <a href="module.html"><b>UI Modules</b></a>
+      <a href="/module.html"><b>UI Modules</b></a>
       <div class="menu">
         
           <div class="item"><a href="/modules/shape.html">Shape</a></div>
diff --git a/docs/collections/menu.html b/docs/collections/menu.html
index c53c57618..ea04c9f02 100644
--- a/docs/collections/menu.html
+++ b/docs/collections/menu.html
@@ -78,7 +78,7 @@
       </div>
     </div>
     <div class="item">
-      <a href="module.html"><b>UI Modules</b></a>
+      <a href="/module.html"><b>UI Modules</b></a>
       <div class="menu">
         
           <div class="item"><a href="/modules/shape.html">Shape</a></div>
diff --git a/docs/collections/table.html b/docs/collections/table.html
index 3a717709b..0f436355c 100644
--- a/docs/collections/table.html
+++ b/docs/collections/table.html
@@ -78,7 +78,7 @@
       </div>
     </div>
     <div class="item">
-      <a href="module.html"><b>UI Modules</b></a>
+      <a href="/module.html"><b>UI Modules</b></a>
       <div class="menu">
         
           <div class="item"><a href="/modules/shape.html">Shape</a></div>
diff --git a/docs/download.html b/docs/download.html
index dbcf9c9bc..c6da3ca13 100644
--- a/docs/download.html
+++ b/docs/download.html
@@ -78,7 +78,7 @@
       </div>
     </div>
     <div class="item">
-      <a href="module.html"><b>UI Modules</b></a>
+      <a href="/module.html"><b>UI Modules</b></a>
       <div class="menu">
         
           <div class="item"><a href="/modules/shape.html">Shape</a></div>
@@ -90,27 +90,35 @@
   <div class="ui fixed transparent contrasting main menu">
     <div class="container">
       <div class="title item">
-        <b>Semantic:</b> Semantic
+        <b>Semantic:</b> Library
       </div>
-      <div class="icon previous link disabled item">
+      <div class="icon previous link item">
         
-        <i class="icon left-open"></i>
+        <a href="/index.html"><i class="icon left-open"></i></a>
         
       </div>
       <div class="section dropdown item">
-        1 of 3
+        2 of 5
         <div class="menu">
           
+            <div class="item">
+              <a href="/index.html">1. About</a>
+            </div>
+          
             <div class="active item">
-              <a href="/download.html">1. Download</a>
+              <a href="/download.html">2. Download</a>
+            </div>
+          
+            <div class="item">
+              <a href="/collection.html">3. UI Collections</a>
             </div>
           
             <div class="item">
-              <a href="/collection.html">2. UI Collections</a>
+              <a href="/element.html">4. UI Elements</a>
             </div>
           
             <div class="item">
-              <a href="/index.html">3. </a>
+              <a href="/module.html">5. UI Modules</a>
             </div>
           
         </div>
diff --git a/docs/element.html b/docs/element.html
new file mode 100644
index 000000000..d3dff6aa9
--- /dev/null
+++ b/docs/element.html
@@ -0,0 +1,176 @@
+<!DOCTYPE html>
+<head>
+
+  <!-- Standard Meta -->
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <meta name="viewport" content="width=device-width" />
+
+  <!-- Site Properities -->
+  <meta http-equiv="X-Powered-By" content="DocPad v6.31.6"/>
+  <title>UI Elements | Semantic UI</title>
+
+  <meta name="description" content="Semantic empowers designers and developers by creating a shared vocabulary for UI." />
+  <meta name="keywords" content="html5, ui, library, framework, javascript" />
+
+  <link rel="stylesheet" type="text/css" href="/stylesheets/reset.css">
+
+  <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/elements/icons.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/elements/button.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/elements/checkbox.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/elements/header.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/elements/label.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/elements/divider.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/elements/block.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/elements/segment.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/collections/grid.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/collections/table.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/collections/form.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/collections/menu.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/modules/shape.css">
+
+  <link rel="stylesheet" type="text/css" href="/stylesheets/semantic.css">
+  <link rel="stylesheet" type="text/css" href="/stylesheets/library/sidr.css">
+
+  <script src="/javascript/library/jquery.js"></script>
+  <script src="/javascript/library/ace/ace.js"></script>
+  <script src="/javascript/library/sidr.js"></script>
+  <script src="/javascript/library/waypoints.js"></script>
+  <script src="/modules/behavior/state.js"></script>
+  <script src="/modules/ui/shape.js"></script>
+  <script src="/javascript/semantic.js"></script>
+</head>
+
+
+
+
+
+
+
+<body id="example">
+  <div class="ui large vertical menu" id="menu">
+    <div class="item"><a href="/index.html"><b>Introduction</b></a></div>
+    <div class="item"><a href="/download.html"><b>Download</b></a></div>
+    <div class="item">
+      <a href="element.html"><b>UI Elements</b></a>
+      <div class="menu">
+        
+          <div class="item"><a href="/elements/button.html">Button</a></div>
+        
+          <div class="item"><a href="/elements/label.html">Label</a></div>
+        
+      </div>
+    </div>
+    <div class="item">
+      <a href="/collection.html"><b>UI Collections</b></a>
+      <div class="menu">
+        
+          <div class="item"><a href="/collections/form.html">Form</a></div>
+        
+          <div class="item"><a href="/elements/header.html">Header</a></div>
+        
+          <div class="item"><a href="/collections/menu.html">Menu</a></div>
+        
+          <div class="item"><a href="/collections/table.html">Table</a></div>
+        
+          <div class="item"><a href="/collections/block.html">Text Block</a></div>
+        
+      </div>
+    </div>
+    <div class="item">
+      <a href="/module.html"><b>UI Modules</b></a>
+      <div class="menu">
+        
+          <div class="item"><a href="/modules/shape.html">Shape</a></div>
+        
+      </div>
+    </div>
+  </div>
+
+  <div class="ui fixed transparent contrasting main menu">
+    <div class="container">
+      <div class="title item">
+        <b>Semantic:</b> Library
+      </div>
+      <div class="icon previous link item">
+        
+        <a href="/collection.html"><i class="icon left-open"></i></a>
+        
+      </div>
+      <div class="section dropdown item">
+        4 of 5
+        <div class="menu">
+          
+            <div class="item">
+              <a href="/index.html">1. About</a>
+            </div>
+          
+            <div class="item">
+              <a href="/download.html">2. Download</a>
+            </div>
+          
+            <div class="item">
+              <a href="/collection.html">3. UI Collections</a>
+            </div>
+          
+            <div class="active item">
+              <a href="/element.html">4. UI Elements</a>
+            </div>
+          
+            <div class="item">
+              <a href="/module.html">5. UI Modules</a>
+            </div>
+          
+        </div>
+      </div>
+      <div class="icon next link item">
+        
+        <a href="/module.html"><i class="icon right-open"></i></a>
+        
+      </div>
+      <div class="right menu">
+        <a class="item" href="https://github.com/quirkyinc/semantic">
+          <i class="icon github"></i>
+        </a>
+        <div class="dropdown item">
+          <i class="icon tint"></i> Theme
+          <div class="theme menu">
+            <div class="active item" data-theme="flat">Flat</div>
+            <div class="item" data-theme="shaded">Shaded</div>
+            <div class="item" data-theme="classic">Classic</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="ui huge left attached vertical side buttons">
+    <div class="ui large blue sidebar button"><i class="icon th-list"></i></div>
+  </div>
+  <div class="segment">
+  <div class="container">
+    <h1>UI Element</h1>
+    <p>UI elements are distinct interface elements, that can be explained both as single elements and as plural groups.</p>
+  </div>
+</div>
+<div class="main container">
+    
+  <div class="peek">
+    <div class="ui vertical pointing link menu">
+      <div class="active item">Definition</div>
+      <div class="item">Distinction</div>
+    </div>
+  </div>
+  <h2>Definition</h2>
+  
+  <p>zzzz</p>
+  
+  <h2>Distinction</h2>
+  
+</div>
+</body>
+
+</html>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/docs/elements/button.html b/docs/elements/button.html
index 41ec3835b..860909b5e 100644
--- a/docs/elements/button.html
+++ b/docs/elements/button.html
@@ -78,7 +78,7 @@
       </div>
     </div>
     <div class="item">
-      <a href="module.html"><b>UI Modules</b></a>
+      <a href="/module.html"><b>UI Modules</b></a>
       <div class="menu">
         
           <div class="item"><a href="/modules/shape.html">Shape</a></div>
diff --git a/docs/elements/header.html b/docs/elements/header.html
index 663466e65..16f2daaaa 100644
--- a/docs/elements/header.html
+++ b/docs/elements/header.html
@@ -78,7 +78,7 @@
       </div>
     </div>
     <div class="item">
-      <a href="module.html"><b>UI Modules</b></a>
+      <a href="/module.html"><b>UI Modules</b></a>
       <div class="menu">
         
           <div class="item"><a href="/modules/shape.html">Shape</a></div>
diff --git a/docs/elements/label.html b/docs/elements/label.html
index d3f49c149..6a88650bf 100644
--- a/docs/elements/label.html
+++ b/docs/elements/label.html
@@ -78,7 +78,7 @@
       </div>
     </div>
     <div class="item">
-      <a href="module.html"><b>UI Modules</b></a>
+      <a href="/module.html"><b>UI Modules</b></a>
       <div class="menu">
         
           <div class="item"><a href="/modules/shape.html">Shape</a></div>
diff --git a/docs/index.html b/docs/index.html
index 7e304e151..f547701df 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -8,7 +8,7 @@
 
   <!-- Site Properities -->
   <meta http-equiv="X-Powered-By" content="DocPad v6.31.6"/>
-  <title>Semantic UI</title>
+  <title>About | Semantic UI</title>
 
   <meta name="description" content="Semantic empowers designers and developers by creating a shared vocabulary for UI." />
   <meta name="keywords" content="html5, ui, library, framework, javascript" />
@@ -78,7 +78,7 @@
       </div>
     </div>
     <div class="item">
-      <a href="module.html"><b>UI Modules</b></a>
+      <a href="/module.html"><b>UI Modules</b></a>
       <div class="menu">
         
           <div class="item"><a href="/modules/shape.html">Shape</a></div>
@@ -90,34 +90,42 @@
   <div class="ui fixed transparent contrasting main menu">
     <div class="container">
       <div class="title item">
-        <b>Semantic:</b> Semantic
+        <b>Semantic:</b> Library
       </div>
-      <div class="icon previous link item">
+      <div class="icon previous link disabled item">
         
-        <a href="/collection.html"><i class="icon left-open"></i></a>
+        <i class="icon left-open"></i>
         
       </div>
       <div class="section dropdown item">
-        3 of 3
+        1 of 5
         <div class="menu">
           
+            <div class="active item">
+              <a href="/index.html">1. About</a>
+            </div>
+          
             <div class="item">
-              <a href="/download.html">1. Download</a>
+              <a href="/download.html">2. Download</a>
             </div>
           
             <div class="item">
-              <a href="/collection.html">2. UI Collections</a>
+              <a href="/collection.html">3. UI Collections</a>
             </div>
           
-            <div class="active item">
-              <a href="/index.html">3. </a>
+            <div class="item">
+              <a href="/element.html">4. UI Elements</a>
+            </div>
+          
+            <div class="item">
+              <a href="/module.html">5. UI Modules</a>
             </div>
           
         </div>
       </div>
-      <div class="icon next disabled link item">
+      <div class="icon next link item">
         
-        <i class="icon right-open"></i>
+        <a href="/download.html"><i class="icon right-open"></i></a>
         
       </div>
       <div class="right menu">
diff --git a/docs/module.html b/docs/module.html
new file mode 100644
index 000000000..6f4faec98
--- /dev/null
+++ b/docs/module.html
@@ -0,0 +1,176 @@
+<!DOCTYPE html>
+<head>
+
+  <!-- Standard Meta -->
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <meta name="viewport" content="width=device-width" />
+
+  <!-- Site Properities -->
+  <meta http-equiv="X-Powered-By" content="DocPad v6.31.6"/>
+  <title>UI Modules | Semantic UI</title>
+
+  <meta name="description" content="Semantic empowers designers and developers by creating a shared vocabulary for UI." />
+  <meta name="keywords" content="html5, ui, library, framework, javascript" />
+
+  <link rel="stylesheet" type="text/css" href="/stylesheets/reset.css">
+
+  <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/elements/icons.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/elements/button.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/elements/checkbox.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/elements/header.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/elements/label.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/elements/divider.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/elements/block.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/elements/segment.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/collections/grid.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/collections/table.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/collections/form.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/collections/menu.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/modules/shape.css">
+
+  <link rel="stylesheet" type="text/css" href="/stylesheets/semantic.css">
+  <link rel="stylesheet" type="text/css" href="/stylesheets/library/sidr.css">
+
+  <script src="/javascript/library/jquery.js"></script>
+  <script src="/javascript/library/ace/ace.js"></script>
+  <script src="/javascript/library/sidr.js"></script>
+  <script src="/javascript/library/waypoints.js"></script>
+  <script src="/modules/behavior/state.js"></script>
+  <script src="/modules/ui/shape.js"></script>
+  <script src="/javascript/semantic.js"></script>
+</head>
+
+
+
+
+
+
+
+<body id="example">
+  <div class="ui large vertical menu" id="menu">
+    <div class="item"><a href="/index.html"><b>Introduction</b></a></div>
+    <div class="item"><a href="/download.html"><b>Download</b></a></div>
+    <div class="item">
+      <a href="element.html"><b>UI Elements</b></a>
+      <div class="menu">
+        
+          <div class="item"><a href="/elements/button.html">Button</a></div>
+        
+          <div class="item"><a href="/elements/label.html">Label</a></div>
+        
+      </div>
+    </div>
+    <div class="item">
+      <a href="/collection.html"><b>UI Collections</b></a>
+      <div class="menu">
+        
+          <div class="item"><a href="/collections/form.html">Form</a></div>
+        
+          <div class="item"><a href="/elements/header.html">Header</a></div>
+        
+          <div class="item"><a href="/collections/menu.html">Menu</a></div>
+        
+          <div class="item"><a href="/collections/table.html">Table</a></div>
+        
+          <div class="item"><a href="/collections/block.html">Text Block</a></div>
+        
+      </div>
+    </div>
+    <div class="item">
+      <a href="/module.html"><b>UI Modules</b></a>
+      <div class="menu">
+        
+          <div class="item"><a href="/modules/shape.html">Shape</a></div>
+        
+      </div>
+    </div>
+  </div>
+
+  <div class="ui fixed transparent contrasting main menu">
+    <div class="container">
+      <div class="title item">
+        <b>Semantic:</b> Library
+      </div>
+      <div class="icon previous link item">
+        
+        <a href="/element.html"><i class="icon left-open"></i></a>
+        
+      </div>
+      <div class="section dropdown item">
+        5 of 5
+        <div class="menu">
+          
+            <div class="item">
+              <a href="/index.html">1. About</a>
+            </div>
+          
+            <div class="item">
+              <a href="/download.html">2. Download</a>
+            </div>
+          
+            <div class="item">
+              <a href="/collection.html">3. UI Collections</a>
+            </div>
+          
+            <div class="item">
+              <a href="/element.html">4. UI Elements</a>
+            </div>
+          
+            <div class="active item">
+              <a href="/module.html">5. UI Modules</a>
+            </div>
+          
+        </div>
+      </div>
+      <div class="icon next disabled link item">
+        
+        <i class="icon right-open"></i>
+        
+      </div>
+      <div class="right menu">
+        <a class="item" href="https://github.com/quirkyinc/semantic">
+          <i class="icon github"></i>
+        </a>
+        <div class="dropdown item">
+          <i class="icon tint"></i> Theme
+          <div class="theme menu">
+            <div class="active item" data-theme="flat">Flat</div>
+            <div class="item" data-theme="shaded">Shaded</div>
+            <div class="item" data-theme="classic">Classic</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="ui huge left attached vertical side buttons">
+    <div class="ui large blue sidebar button"><i class="icon th-list"></i></div>
+  </div>
+  <div class="segment">
+  <div class="container">
+    <h1>UI Modules</h1>
+    <p>UI modules are interface elements which require a definition of their behavior.</p>
+  </div>
+</div>
+<div class="main container">
+    
+  <div class="peek">
+    <div class="ui vertical pointing link menu">
+      <div class="active item">Definition</div>
+      <div class="item">Distinction</div>
+    </div>
+  </div>
+  <h2>Definition</h2>
+  
+  <p>zzzz</p>
+  
+  <h2>Distinction</h2>
+  
+</div>
+</body>
+
+</html>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/docs/modules/shape.html b/docs/modules/shape.html
index 7583295ff..025abdadb 100644
--- a/docs/modules/shape.html
+++ b/docs/modules/shape.html
@@ -78,7 +78,7 @@
       </div>
     </div>
     <div class="item">
-      <a href="module.html"><b>UI Modules</b></a>
+      <a href="/module.html"><b>UI Modules</b></a>
       <div class="menu">
         
           <div class="active item"><a href="/modules/shape.html">Shape</a></div>
diff --git a/docs/sink.html b/docs/sink.html
index ed8d6e199..f4581ca0c 100644
--- a/docs/sink.html
+++ b/docs/sink.html
@@ -78,7 +78,7 @@
       </div>
     </div>
     <div class="item">
-      <a href="module.html"><b>UI Modules</b></a>
+      <a href="/module.html"><b>UI Modules</b></a>
       <div class="menu">
         
           <div class="item"><a href="/modules/shape.html">Shape</a></div>
diff --git a/node/src/documents/collection.html b/node/src/documents/collection.html
index aa27f5901..7ddce3bbc 100755
--- a/node/src/documents/collection.html
+++ b/node/src/documents/collection.html
@@ -3,7 +3,7 @@ layout : 'default'
 css    : 'index'
 
 title  : 'UI Collections'
-type   : 'Semantic'
+type   : 'Library'
 ---
 
 <div class="segment">
diff --git a/node/src/documents/download.html b/node/src/documents/download.html
index 12fe0f797..43525f6a1 100755
--- a/node/src/documents/download.html
+++ b/node/src/documents/download.html
@@ -3,7 +3,7 @@ layout : 'default'
 css    : 'download'
 
 title  : 'Download'
-type   : 'Semantic'
+type   : 'Library'
 ---
 <div class="segment">
   <div class="container">
diff --git a/node/src/documents/element.html b/node/src/documents/element.html
new file mode 100755
index 000000000..0b5ace5e5
--- /dev/null
+++ b/node/src/documents/element.html
@@ -0,0 +1,32 @@
+---
+layout : 'default'
+css    : 'index'
+
+title  : 'UI Elements'
+type   : 'Library'
+---
+
+<div class="segment">
+  <div class="container">
+    <h1>UI Element</h1>
+    <p>UI elements are distinct interface elements, that can be explained both as single elements and as plural groups.</p>
+  </div>
+</div>
+<div class="main container">
+    
+  <div class="peek">
+    <div class="ui vertical pointing link menu">
+      <div class="active item">Definition</div>
+      <div class="item">Distinction</div>
+    </div>
+  </div>
+  <h2>Definition</h2>
+  
+  <p>zzzz</p>
+  
+  <h2>Distinction</h2>
+  
+</div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/node/src/documents/index.html b/node/src/documents/index.html
index d6d1afcfb..071fb2027 100755
--- a/node/src/documents/index.html
+++ b/node/src/documents/index.html
@@ -1,7 +1,8 @@
 ---
 layout : 'default'
 css    : 'index'
-type   : 'Semantic'
+title  : 'About'
+type   : 'Library'
 ---
 
 <div class="segment">
diff --git a/node/src/documents/module.html b/node/src/documents/module.html
new file mode 100755
index 000000000..227861476
--- /dev/null
+++ b/node/src/documents/module.html
@@ -0,0 +1,32 @@
+---
+layout : 'default'
+css    : 'index'
+
+title  : 'UI Modules'
+type   : 'Library'
+---
+
+<div class="segment">
+  <div class="container">
+    <h1>UI Modules</h1>
+    <p>UI modules are interface elements which require a definition of their behavior.</p>
+  </div>
+</div>
+<div class="main container">
+    
+  <div class="peek">
+    <div class="ui vertical pointing link menu">
+      <div class="active item">Definition</div>
+      <div class="item">Distinction</div>
+    </div>
+  </div>
+  <h2>Definition</h2>
+  
+  <p>zzzz</p>
+  
+  <h2>Distinction</h2>
+  
+</div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/node/src/layouts/default.html.eco b/node/src/layouts/default.html.eco
index 27fc0b943..a570ac4a9 100755
--- a/node/src/layouts/default.html.eco
+++ b/node/src/layouts/default.html.eco
@@ -68,7 +68,7 @@
       </div>
     </div>
     <div class="item">
-      <a href="module.html"><b>UI Modules</b></a>
+      <a href="/module.html"><b>UI Modules</b></a>
       <div class="menu">
         <% for element in uiModules: %>
           <div class="<%= if element.id is @document.id then 'active ' %>item"><a href="<%= element.url %>"><%= element.title %></a></div>