From 64543560ffa84ba1d0f61eaa38a44b14c9d95481 Mon Sep 17 00:00:00 2001
From: Jack Lukic <jack@quirky.com>
Date: Tue, 21 May 2013 14:40:44 -0400
Subject: [PATCH] swaps all docs to use ui headers instead of h1-h6

Former-commit-id: 96f03b01e7021bfb4fceaa5f8c1ed43664784ecb
Former-commit-id: b6671dc030fad7060a1cc6f12e210764fe39b09c
---
 node/src/documents/collections/form.html    | 56 ++++++-------
 node/src/documents/collections/grid.html    | 38 ++++-----
 node/src/documents/collections/menu.html    | 93 +++++++++++----------
 node/src/documents/collections/message.html | 36 ++++----
 node/src/documents/collections/table.html   | 34 ++++----
 5 files changed, 131 insertions(+), 126 deletions(-)

diff --git a/node/src/documents/collections/form.html b/node/src/documents/collections/form.html
index f54cee582..1d3f13c88 100755
--- a/node/src/documents/collections/form.html
+++ b/node/src/documents/collections/form.html
@@ -7,7 +7,7 @@ type   : 'UI Collection'
 ---
 <div class="segment">
   <div class="container">
-    <h1>Form</h1>
+    <h1 class="ui dividing header">Form</h1>
     <p>Forms are a grouping of elements requiring user input.</p>
     <p> 
       Forms always include fields, and fields always contain form elements. Fields themselves may also include:
@@ -28,10 +28,10 @@ type   : 'UI Collection'
       <a class="item">Variations</a>
     </div>
   </div>
-  <h2>Collection</h2>
+  <h2 class="ui dividing header">Collection</h2>
     
   <div class="example">
-    <h4>Form:</h4>
+    <h4 class="ui header">Form:</h4>
     <p>A form is a collection of user input elements, and has no stylings of its own.</p>
     <div class="ui info message">
       <p>This example uses a ui segment to add the padding and background color. This is not required.</p>
@@ -67,10 +67,10 @@ type   : 'UI Collection'
     </div>
   </div>
 
-  <h2>Elements</h2>
+  <h2 class="ui dividing header">Elements</h2>
 
   <div class="example">
-    <h4>Field</h4>
+    <h4 class="ui header">Field</h4>
     <p>A field is a form element containing a label and an input</p>
     <div class="ui form">
       <div class="field">
@@ -81,7 +81,7 @@ type   : 'UI Collection'
   </div>
   
   <div class="example">
-    <h4>Text Area</h4>
+    <h4 class="ui header">Text Area</h4>
     <p>A textarea uses the default form element</p>
     <div class="ui form">
       <div class="field">
@@ -92,7 +92,7 @@ type   : 'UI Collection'
   </div>
   
   <div class="example">
-    <h4>Checkbox</h4>
+    <h4 class="ui header">Checkbox</h4>
     <p>Checkboxes are styled forms of standard form checkboxes.</p>
     <div class="ui form">
       <div class="field">
@@ -113,7 +113,7 @@ type   : 'UI Collection'
   </div>
   
   <div class="example">
-    <h4>Radio Box</h4>
+    <h4 class="ui header">Radio Box</h4>
     <p>Radio boxes are styled forms of standard form radio controls.</p>
     <div class="ui form">
       <div class="inline field">
@@ -155,7 +155,7 @@ type   : 'UI Collection'
   </div>
   
   <div class="example">
-    <h4>Text Block</h4>
+    <h4 class="ui header">Text Block</h4>
     <p>Text blocks have special meaning inside a form tag. All message blocks are hidden by default.</p>
     <div class="ui form">
       <div class="ui message">
@@ -168,12 +168,12 @@ type   : 'UI Collection'
     </div>
   </div>
 
-  <h2>States</h2>
+  <h2 class="ui dividing header">States</h2>
 
-  <h3>Form</h3>
+  <h3 class="ui header">Form</h3>
   
   <div class="example">
-    <h4>Loading</h4>
+    <h4 class="ui header">Loading</h4>
     <p>If a form is in loading state, it will automatically show a loading indicator:</p>
     
     <div class="ui loading form segment">
@@ -207,7 +207,7 @@ type   : 'UI Collection'
   </div>
   
   <div class="example">
-    <h4>Error</h4>
+    <h4 class="ui header">Error</h4>
     <p>If a form is in an error state, it will automatically show any error message blocks:</p>
     <div class="ui error form segment">
       <div class="ui error message">
@@ -244,7 +244,7 @@ type   : 'UI Collection'
   </div>
     
   <div class="example">
-    <h4>Warning</h4>
+    <h4 class="ui header">Warning</h4>
     <p>If a form is in warning state, it will automatically show any warning message block:</p>
     
     <div class="ui warning form segment">
@@ -284,10 +284,10 @@ type   : 'UI Collection'
     </div>
   </div>
   
-  <h3>Form Fields</h3>
+  <h3 class="ui header">Form Fields</h3>
   
   <div class="example">
-    <h4>Error</h4>
+    <h4 class="ui header">Error</h4>
     <p>Individual fields may contain an error state</p>
     
     <div class="ui form segment">
@@ -305,7 +305,7 @@ type   : 'UI Collection'
   </div>
   
   <div class="example">
-    <h4>Disabled</h4>
+    <h4 class="ui header">Disabled</h4>
     <p>Individual fields may be disabled or read only</p>
     
     <div class="ui form segment">
@@ -322,12 +322,12 @@ type   : 'UI Collection'
     </div>
   </div>
 
-  <h2>Variations</h2>
+  <h2 class="ui dividing header">Variations</h2>
   
-  <h3>Forms</h3>
+  <h3 class="ui header">Forms</h3>
 
   <div class="example">
-    <h4>Fluid</h4>
+    <h4 class="ui header">Fluid</h4>
     <p>A form can take the width of its container</p>
     <div class="ui fluid form segment">
       <div class="two fields">
@@ -345,7 +345,7 @@ type   : 'UI Collection'
   </div>
   
   <div class="example">
-    <h4>Size</h4>
+    <h4 class="ui header">Size</h4>
     <p>A form can also be small or large</p>
     <div class="ui small form segment">
       <div class="two fields">
@@ -377,7 +377,7 @@ type   : 'UI Collection'
   </div>
   
   <div class="example">
-    <h4>Inverted</h4>
+    <h4 class="ui header">Inverted</h4>
     <p>A form on a dark background may have to invert its color scheme</p>
     
     <div style="background-color: #333333; padding: 15px;">
@@ -405,10 +405,10 @@ type   : 'UI Collection'
   </div>
   
   
-  <h3>Fields</h3>
+  <h3 class="ui header">Fields</h3>
   
   <div class="example">
-    <h4>Inline</h4>
+    <h4 class="ui header">Inline</h4>
     <p>A field can have its label next to instead of above it.</p>
     <div class="ui form">
       <div class="ui inline fields">
@@ -421,7 +421,7 @@ type   : 'UI Collection'
   </div>
   
   <div class="example">
-    <h4>Date</h4>
+    <h4 class="ui header">Date</h4>
     <p>A field can let users know they are for dates</p>
     <div class="ui form">
       <div class="date field">
@@ -432,10 +432,10 @@ type   : 'UI Collection'
   </div>
   
   
-  <h2>Groups</h2>
+  <h2 class="ui dividing header">Groups</h2>
   
   <div class="example">
-    <h4>Field Groups</h4>
+    <h4 class="ui header">Field Groups</h4>
     <p>Fields can exist side by side to show relation</p>
     <div class="ui form">
       <div class="ui three fields">
@@ -456,7 +456,7 @@ type   : 'UI Collection'
   </div>
 
   <div class="example">
-    <h4>Inline</h4>
+    <h4 class="ui header">Inline</h4>
     <p>Multiple fields may be inline in a row</p>
     <div class="ui form">
       <div class="ui two inline fields">
diff --git a/node/src/documents/collections/grid.html b/node/src/documents/collections/grid.html
index 257c9111b..185b1a05e 100755
--- a/node/src/documents/collections/grid.html
+++ b/node/src/documents/collections/grid.html
@@ -9,7 +9,7 @@ type   : 'UI Collection'
 <div class="segment">
   <div class="ui main responsive grid">
     <div class="column">
-      <h1>Grid</h1>
+      <h1 class="ui dividing header">Grid</h1>
       <p>A grid is a set of elements without a visual definition, that creates a structure to harmonize negative space in a layout.</p>
     </div>
   </div>
@@ -17,10 +17,10 @@ type   : 'UI Collection'
 <div class="main responsive ui grid">
 <div class="column">
   
-  <h2>Collection</h2>
+  <h2 class="ui dividing header">Collection</h2>
   
   <div class="highlighted example">
-    <h4>Grid</h4>
+    <h4 class="ui header">Grid</h4>
     <p>A grid is made up of columns of content. By default a grid must assume a certain number of columns.</p>
     <p>Each set of columns matching up to the number of columns in a grid create a row.</p>
     
@@ -93,7 +93,7 @@ type   : 'UI Collection'
   
 
   <div class="highlighted example">
-    <h4>Page Grid</h4>
+    <h4 class="ui header">Page Grid</h4>
     <p>A page grid is a grid that exists on the top level of a website and includes gutters to the left and right.</p>
     
     <div class="ui two column page grid">
@@ -123,7 +123,7 @@ type   : 'UI Collection'
   </div>
   
   <div class="highlighted example">
-    <h4>Rows</h4>
+    <h4 class="ui header">Rows</h4>
     <p>A row is used to create vertical padding between groups of columns on a page. If no rows are specified columns will sit vertically flushed against the edge of a grid, but will still have vertical and horizontal gutters on the first and last column.</p>
     <p>
     <div class="ui grid">
@@ -254,7 +254,7 @@ type   : 'UI Collection'
     </div>
   </div>
   <div class="highlighted example">
-    <h4>Columns</h4>
+    <h4 class="ui header">Columns</h4>
     <p>Columns each contain gutters giving them equal vertical spacing from other columns. Columns by default do not take up their entire row height.</p>
     <p>A grid will automatically center any columns that do not match a full row width.</p>
     <div class="ui three column grid">
@@ -281,12 +281,12 @@ type   : 'UI Collection'
     </div>
   </div>
 
-  <h2>Variations</h2>
+  <h2 class="ui dividing header">Variations</h2>
   
-  <h3>Grid</h3>
+  <h3 class="ui header">Grid</h3>
   
   <div class="example">
-    <h4>Responsive Grid</h4>
+    <h4 class="ui header">Responsive Grid</h4>
     <p>A grid can be responsive to a browsers width. This means the gutters to left and right of grid columns will alter in size as a browser's resolution increases.</p>
 
     <div class="ui text message info ignore">
@@ -321,7 +321,7 @@ type   : 'UI Collection'
   </div>
   
   <div class="example">
-    <h4>Changing grid column count</h4>
+    <h4 class="ui header">Changing grid column count</h4>
     <p>A grid can have a different number of columns per row</p>
     <div class="ui three column grid">
       <div class="column">
@@ -395,7 +395,7 @@ type   : 'UI Collection'
   </div>
   
   <div class="example">
-    <h4>Divided</h4>
+    <h4 class="ui header">Divided</h4>
     <p>A grid can show a division between its columns</p>
     <div class="ui six divided column grid">
       <div class="row">
@@ -445,7 +445,7 @@ type   : 'UI Collection'
     </div>
   </div>
   <div class="example">
-    <h4>Celled</h4>
+    <h4 class="ui header">Celled</h4>
     <p>A grid can have rows divided into cells</p>
     <div class="ui celled grid">
       <div class="row">
@@ -480,7 +480,7 @@ type   : 'UI Collection'
   </div>
 
   <div class="example">
-    <h4>Text Alignment</h4>
+    <h4 class="ui header">Text Alignment</h4>
     <p>A grid can specify its text alignment</p>
     <div class="ui center aligned three column grid">
       <div class="row">
@@ -516,7 +516,7 @@ type   : 'UI Collection'
   </div>
   
   <div class="example">
-    <h4>Vertical Alignment</h4>
+    <h4 class="ui header">Vertical Alignment</h4>
     <p>A grid can specify its vertical alignment to have all its columns vertically centered.</p>
     <div class="ui middle aligned three column grid">
       <div class="row">
@@ -551,9 +551,9 @@ type   : 'UI Collection'
     </div>
   </div>
   
-  <h3>Rows</h3>
+  <h3 class="ui header">Rows</h3>
   <div class="example">
-    <h4>Vertical Alignment</h4>
+    <h4 class="ui header">Vertical Alignment</h4>
     <p>A row can also specify its vertical alignment to have its columns vertically centered.</p>
     <div class="ui three column grid">
       <div class="top aligned row">
@@ -646,10 +646,10 @@ type   : 'UI Collection'
     </div>
   </div>
   
-  <h3>Columns</h3>
+  <h3 class="ui header">Columns</h3>
   
   <div class="example">
-    <h4>Row Alignment (Floating)</h4>
+    <h4 class="ui header">Row Alignment (Floating)</h4>
     <p>A column can be"floated", to either the left or right of its row.</p>
     <div class="ui grid">
       <div class="left floated four wide column">
@@ -681,7 +681,7 @@ type   : 'UI Collection'
     </div>
   
   <div class="example">
-    <h4>Column Width</h4>
+    <h4 class="ui header">Column Width</h4>
     <p>A column can span across multiple grid columns.</p>
     <div class="ui grid">
       <div class="three wide column">
diff --git a/node/src/documents/collections/menu.html b/node/src/documents/collections/menu.html
index fd60fbe46..513787ef3 100755
--- a/node/src/documents/collections/menu.html
+++ b/node/src/documents/collections/menu.html
@@ -7,7 +7,7 @@ type   : 'UI Collection'
 ---
 <div class="segment">
   <div class="container">
-    <h1>Menu</h1>
+    <h1 class="ui dividing header">Menu</h1>
     <p>A menu is a collection of interface elements usually showing several actions which a user can take</p>
   </div>
 </div>
@@ -22,9 +22,9 @@ type   : 'UI Collection'
     </div>
   </div>
 
-  <h2>Collection</h2>
+  <h2 class="ui dividing header">Collection</h2>
   <div class="example">
-    <h4>Menu</h4>
+    <h4 class="ui header">Menu</h4>
 
     <p>This example uses several menu elements to display the versatility of a menu collection.</p>
     <div class="ui menu">
@@ -34,7 +34,7 @@ type   : 'UI Collection'
       </a>
       <a class="item">
         <i class="icon mail"></i> Messages
-        <div class="left ui label">22</div>
+        <div class="ui label">22</div>
       </a>
       <div class="right menu">
         <div class="fitted borderless item">
@@ -54,13 +54,13 @@ type   : 'UI Collection'
   
 
   <div class="example">
-    <h4>Vertical Menu</h4>
+    <h4 class="ui header">Vertical Menu</h4>
     <p>A vertical menu can have its own sub menus. This example uses three levels of menu depth.</p>
     <div class="ui ignore warning message"><i class="icon heart"></i> A vertical menu's width defaults to an arbitrary size. To have it fit your content more precisely use the fluid variation in conjunction with <a href="grid.html">ui grid</a>.</div>
     <div class="ui vertical menu">
       <div class="item">
         <i class="icon user"></i>
-        <b>Username</b>
+        <b>Zombo_213</b>
       </div>
       <div class="item">
         <p>Welcome to your profile. You can do anything you want on your profile.</p>
@@ -68,23 +68,28 @@ type   : 'UI Collection'
       <div class="item">
         <b>My Profile</b>
         <div class="menu">
-          <a class="active item"><i class="icon mail"></i>Messages 
-            <div class="ui teal label">2 new
-            </div>
+          <a class="active item">
+            Messages 
+            <div class="ui teal label">2 new</div>
           </a>
           <div class="item">
-            <i class="icon users"></i>Friends 
+            Friends 
+            <i class="icon users"></i>
             <div class="menu">
               <a class="item">Close Friends</a>
               <a class="item">School</a>
               <a class="item">Work</a>
             </div>
           </div>
-          <a class="item"><i class="icon bookmark"></i>Followers</a>
+          <a class="item">
+            Followers
+            <i class="icon bookmark"></i>
+          </a>
         </div>
       </div>
       <div class="dropdown item">
-        Actions <i class="icon right triangle"></i>
+        Actions 
+        <i class="icon right triangle"></i>
         <div class="menu">
           <div class="item">Search</div>
           <div class="item">Add</div>
@@ -95,7 +100,7 @@ type   : 'UI Collection'
   </div>
   
   <div class="example">
-    <h4>Tiered Menu</h4>
+    <h4 class="ui header">Tiered Menu</h4>
 
     <p>This example uses several menu elements to display the versatility of a menu collection.</p>
     <div class="ui tiered menu">
@@ -130,10 +135,10 @@ type   : 'UI Collection'
     </div>
   </div>
 
-  <h2>Elements</h2>
+  <h2 class="ui dividing header">Elements</h2>
 
   <div class="example">
-    <h4>Header Item</h4>
+    <h4 class="ui header">Header Item</h4>
     <p>A menu may have a header to help label sections of a menu. This can also be a <a href="/elements/header.html">ui header</a>.</p>
     <div class="ui vertical menu">
       <div class="header item">
@@ -159,7 +164,7 @@ type   : 'UI Collection'
   </div>
 
   <div class="example">
-    <h4>Text Item</h4>
+    <h4 class="ui header">Text Item</h4>
     <p>A menu may have a simple text item.</p>
     <div class="ui ignore info message">
       <p><i class="icon heart"></i> Single paragraphs are automatically formatted as text. You can also specify an item as textual by adding the classname <b>text</b></p>
@@ -176,7 +181,7 @@ type   : 'UI Collection'
   
   
   <div class="example">
-    <h4>Link Item</h4>
+    <h4 class="ui header">Link Item</h4>
     <p>A menu may contain a link item, or an item formatted as if it is a link.</p>
     
     <div class="ui ignore info message">
@@ -193,7 +198,7 @@ type   : 'UI Collection'
   </div>
 
   <div class="example">
-    <h4>Dropdown Item</h4>
+    <h4 class="ui header">Dropdown Item</h4>
     <p>An item may contain a nested menu in a dropdown.</p>
     <div class="ui ignore warning message">
       <p><i class="icon heart"></i>  A dropdown menu will, by default, automatically show when the parent element is hovered.</p>
@@ -211,7 +216,7 @@ type   : 'UI Collection'
     </div>
   </div>
   <div class="example">
-    <h4>Menu</h4>
+    <h4 class="ui header">Menu</h4>
     <p>A menu may contain another menu group in the same level as menu items.</p>
     <div class="ui menu">
       <a class="item">Browse</a>
@@ -224,7 +229,7 @@ type   : 'UI Collection'
   </div>
 
   <div class="example">
-    <h4>Nested Menu</h4>
+    <h4 class="ui header">Nested Menu</h4>
     <p>A menu item may contain another menu nested inside that acts as a grouped sub-menu.</p>
     <div class="ui vertical menu">
       <a class="item"><b>Friends</b></a>
@@ -240,10 +245,10 @@ type   : 'UI Collection'
   </div>
 
 
-  <h2>States</h2>
+  <h2 class="ui dividing header">States</h2>
 
   <div class="example">
-    <h4>Hover</h4>
+    <h4 class="ui header">Hover</h4>
     <p>A menu item can be hovered</p>
     <div class="ui ignore warning message"><i class="icon heart"></i> Menu items are only hoverable if they are links, defined with the variant "link", or are given the class name hover programmatically.</div>
     <div class="ui compact menu">
@@ -255,7 +260,7 @@ type   : 'UI Collection'
 
 
   <div class="example">
-    <h4>Down</h4>
+    <h4 class="ui header">Down</h4>
     <p>A menu item can be pressed in</p>
     <div class="ui compact menu">
       <div class="down item">
@@ -265,7 +270,7 @@ type   : 'UI Collection'
   </div>
 
   <div class="example">
-    <h4>Active</h4>
+    <h4 class="ui header">Active</h4>
     <p>A menu item can be active</p>
     <div class="ui compact menu">
       <div class="active item">
@@ -275,11 +280,11 @@ type   : 'UI Collection'
   </div>
 
 
-  <h2>Variations</h2>
+  <h2 class="ui dividing header">Variations</h2>
 
-  <h3>Menu</h3>
+  <h3 class="ui header">Menu</h3>
   <div class="example">
-    <h4>Inverted</h4>
+    <h4 class="ui header">Inverted</h4>
     <p>A menu may have its colors inverted to show greater contrast</p>
     <div class="ui inverted menu">
       <div class="item">
@@ -301,7 +306,7 @@ type   : 'UI Collection'
     </div>
   </div>
   <div class="example">
-    <h4>Colors</h4>
+    <h4 class="ui header">Colors</h4>
     <p>Additional colors can be specified.</p>
     <div class="ui green menu">
       <a class="active item">
@@ -421,7 +426,7 @@ type   : 'UI Collection'
   </div>
   
   <div class="example">
-    <h4>Basic</h4>
+    <h4 class="ui header">Basic</h4>
     <p>A menu may reduce its complexity to blend in with a page</p>
     <div class="ui segment">
       <div class="ui basic menu">
@@ -452,7 +457,7 @@ type   : 'UI Collection'
     </div>
   </div>
   <div class="example">
-    <h4>Text</h4>
+    <h4 class="ui header">Text</h4>
     <p>A menu can display simple text links</p>
     <div class="ui segment">
       <div class="ui text menu">
@@ -487,7 +492,7 @@ type   : 'UI Collection'
   </div>
 
   <div class="example">
-    <h4>Colors</h4>
+    <h4 class="ui header">Colors</h4>
     <p>Additional colors can be specified</p>
     <div class="ui grey compact menu">
       <a class="item">
@@ -549,7 +554,7 @@ type   : 'UI Collection'
   </div>
 
   <div class="example">
-    <h4>Icons</h4>
+    <h4 class="ui header">Icons</h4>
     <p>A menu may have just icons</p>
     <div class="ui icon menu">
       <a class="item">
@@ -577,7 +582,7 @@ type   : 'UI Collection'
   </div>
 
   <div class="example">
-    <h4>Icons</h4>
+    <h4 class="ui header">Icons</h4>
     <p>A menu may have labeled icons</p>
     <div class="ui labeled icon menu">
       <a class="item">
@@ -612,7 +617,7 @@ type   : 'UI Collection'
 
 
   <div class="example">
-    <h4>Fluid</h4>
+    <h4 class="ui header">Fluid</h4>
     <p>A vertical menu may take the size of its container. (A horizontal menu does this by default) </p>
     <div class="ui fluid vertical menu">
       <a class="item">Run</a>
@@ -622,7 +627,7 @@ type   : 'UI Collection'
   </div>
   
   <div class="example">
-    <h4>Evenly sized items</h4>
+    <h4 class="ui header">Evenly sized items</h4>
     <p>A menu may divide its items evenly</p>
     <div class="ui fluid three item menu">
       <a class="item">Buy</a>
@@ -632,7 +637,7 @@ type   : 'UI Collection'
   </div>
 
   <div class="example">
-    <h4>Pointing</h4>
+    <h4 class="ui header">Pointing</h4>
     <p>A menu can point to content below itself to show ownership</p>
     <div class="ui pointing menu">
       <div class="item">
@@ -683,7 +688,7 @@ type   : 'UI Collection'
 
 
   <div class="example">
-    <h4>Attached</h4>
+    <h4 class="ui header">Attached</h4>
     <p>A menu may be attached to other content segments</p>
     <div class="ui top attached pointing menu">
       <div class="item">
@@ -709,7 +714,7 @@ type   : 'UI Collection'
   </div>
 
   <div class="example">
-    <h4>Horizontal Sizes</h4>
+    <h4 class="ui header">Horizontal Sizes</h4>
     <p>A horizontal menu can vary in size</p>
     <div class="ui large menu">
       <div class="item">
@@ -741,7 +746,7 @@ type   : 'UI Collection'
     </div>
   </div>
   <div class="example">
-    <h4>Vertical Sizes</h4>
+    <h4 class="ui header">Vertical Sizes</h4>
     <p>A vertical menu can vary in size</p>
     <div class="ui large vertical menu">
       <div class="item">
@@ -794,10 +799,10 @@ type   : 'UI Collection'
     </div>
   </div>
 
-  <h3>Items</h3>
+  <h3 class="ui header">Items</h3>
 
   <div class="example">
-    <h4>Fitted</h4>
+    <h4 class="ui header">Fitted</h4>
     <p>A menu item or menu might be fitted to remove element padding</p>
     <div class="ui menu">
       <div class="fitted item">
@@ -811,11 +816,11 @@ type   : 'UI Collection'
 
 
   <div class="example">
-    <h4>Borderless</h4>
+    <h4 class="ui header">Borderless</h4>
     <p>A menu item or menu might might have no dividers</p>
     <div class="ui borderless menu">
       <div class="item">
-        <i class="icon left-open"></i> Previous
+        <i class="icon left arrow"></i> Previous
       </div>
       <div class="item">1</div>
       <div class="item">2</div>
@@ -824,7 +829,7 @@ type   : 'UI Collection'
       <div class="item">5</div>
       <div class="item">6</div>
       <div class="item">
-        <i class="icon right-open"></i> Next
+        Next <i class="icon right arrow"></i>
       </div>
     </div>
   </div>
diff --git a/node/src/documents/collections/message.html b/node/src/documents/collections/message.html
index 5817ee99a..b622bfd89 100755
--- a/node/src/documents/collections/message.html
+++ b/node/src/documents/collections/message.html
@@ -8,7 +8,7 @@ type   : 'UI Collection'
 
 <div class="segment">
   <div class="container">
-    <h1>Message</h1>
+    <h1 class="ui dividing header">Message</h1>
     <p>Messages can alert a user to something they must immediately consider before proceeding on to the normal content of the page.</p>
   </div>
 </div>
@@ -23,10 +23,10 @@ type   : 'UI Collection'
     </div>
   </div>
   
-  <h2>Standard</h2>
+  <h2 class="ui dividing header">Standard</h2>
   
   <div class="example">
-    <h4>Text Block</h4>
+    <h4 class="ui header">Text Block</h4>
     <p>A basic text block</p>
     <div class="ui message">
       <div class="header">
@@ -42,7 +42,7 @@ type   : 'UI Collection'
   </div>
   
   <div class="example">
-    <h4>List Block</h4>
+    <h4 class="ui header">List Block</h4>
     <p>A text block with a list</p>
     <div class="ui message">
       <div class="header">
@@ -57,7 +57,7 @@ type   : 'UI Collection'
   
   
   <div class="example">
-    <h4>Dismissable Block</h4>
+    <h4 class="ui header">Dismissable Block</h4>
     <p>A text block that the user can choose to hide</p>
     <div class="ui message">
       <i class="icon close"></i>
@@ -72,26 +72,26 @@ type   : 'UI Collection'
   </div>
   
 
-  <h2>States</h2>
+  <h2 class="ui dividing header">States</h2>
   
-  <h4>Hidden</h4>
+  <h4 class="ui header">Hidden</h4>
   <p>Text Blocks can be hidden</p>
   <div class="ui hidden message">
     <p>You can't see me</p>
   </div>
   
   <div class="example">
-    <h4>Visible</h4>
+    <h4 class="ui header">Visible</h4>
     <p>Text Blocks can be set to visible if they need to force themselves to be shown.</p>
     <div class="ui visible message">
       <p>You can always see me</p>
     </div>
   </div>
   
-  <h2>Variations</h2>
+  <h2 class="ui dividing header">Variations</h2>
   
   <div class="example">
-    <h4>Icon Block</h4>
+    <h4 class="ui header">Icon Block</h4>
     <p>A text block can contain an icon.</p>
     <div class="ui icon message">
       <i class="icon cloud"></i>
@@ -105,7 +105,7 @@ type   : 'UI Collection'
   </div>
   
   <div class="example">
-    <h4>Compact Block</h4>
+    <h4 class="ui header">Compact Block</h4>
     <p>A text block that only takes up the width of its content.</p>
     <div class="ui compact message">
       Get all the best inventions in your e-mail every day. Sign up now!
@@ -113,7 +113,7 @@ type   : 'UI Collection'
   </div>
   
   <div class="example">
-    <h4>Attached Block</h4>
+    <h4 class="ui header">Attached Block</h4>
     <p>A text block can be formatted to attach itself to content</p>
     <div class="ui attached message">
       <div class="header">
@@ -157,14 +157,14 @@ type   : 'UI Collection'
     </div>
   </div>
   <div class="example">
-    <h4>Colored Block</h4>
+    <h4 class="ui header">Colored Block</h4>
     <p>A text block can be formatted to be different colors</p>
     
   </div>
   
   
   <div class="example">
-    <h4>Warning Block</h4>
+    <h4 class="ui header">Warning Block</h4>
     <p>A text block may be formatted to display warning messages.</p>
     <div class="ui warning message">
       <i class="icon close"></i>
@@ -176,7 +176,7 @@ type   : 'UI Collection'
   </div>
   
   <div class="example">
-    <h4>Info Block</h4>
+    <h4 class="ui header">Info Block</h4>
     <p>A text block may be formatted to display information.</p>
     <div class="ui info message">
       <i class="icon close"></i>
@@ -191,7 +191,7 @@ type   : 'UI Collection'
   </div>
   
   <div class="example">
-    <h4>Success Block</h4>
+    <h4 class="ui header">Success Block</h4>
     <p>A text block may be formatted to display a success message.</p>
     <div class="ui success message">
       <i class="icon close"></i>
@@ -202,7 +202,7 @@ type   : 'UI Collection'
   </div>
   
   <div class="example">
-    <h4>Error Block</h4>
+    <h4 class="ui header">Error Block</h4>
     <p>A text block may be formatted to display errors.</p>
     <div class="ui error message">
       <i class="icon close"></i>
@@ -217,7 +217,7 @@ type   : 'UI Collection'
   </div>
   
   <div class="example">
-    <h4>Sizes</h4>
+    <h4 class="ui header">Sizes</h4>
     <p>A text block can have different sizes</p>
     <div class="ui small message">
       This is a very small message.
diff --git a/node/src/documents/collections/table.html b/node/src/documents/collections/table.html
index b0831af65..35f3ff428 100755
--- a/node/src/documents/collections/table.html
+++ b/node/src/documents/collections/table.html
@@ -8,7 +8,7 @@ type   : 'UI Collection'
 
 <div class="segment">
   <div class="container">
-    <h1>Tables</h1>
+    <h1 class="ui dividing header">Tables</h1>
     <p>Tables are useful for displaying collections of tuples.</p>
     <p> 
       Tables consist of an optional table header, content, and table footer. They may be formatted to show numeric content or for rows of text.
@@ -26,9 +26,9 @@ type   : 'UI Collection'
     </div>
   </div>
   
-  <h2>Standard</h2>
+  <h2 class="ui dividing header">Standard</h2>
   <div class="example">
-    <h4>Table</h4>
+    <h4 class="ui header">Table</h4>
     <p>A standard table</p>
     <table class="ui table">
       <thead>
@@ -62,10 +62,10 @@ type   : 'UI Collection'
   </div>
   
 
-  <h2>States</h2>
+  <h2 class="ui dividing header">States</h2>
   
   <div class="example">
-    <h4>Positive / Negative</h4>
+    <h4 class="ui header">Positive / Negative</h4>
     <p>A cell may let a user know whether a value is good or bad:</p>
     <table class="ui table">
       <thead>
@@ -98,9 +98,9 @@ type   : 'UI Collection'
     </table>
   </div>
   
-  <h3>Cells</h3>
+  <h3 class="ui header">Cells</h3>
   <div class="example">
-    <h4>Error</h4>
+    <h4 class="ui header">Error</h4>
     <p>A cell or row may alert the user to an error or a negative value:</p>
     <table class="ui table">
       <thead>
@@ -134,7 +134,7 @@ type   : 'UI Collection'
   </div>
   
   <div class="example">
-    <h4>Warning</h4>
+    <h4 class="ui header">Warning</h4>
     <p>A cell or row may warn a user:</p>
     <table class="ui table">
       <thead>
@@ -168,7 +168,7 @@ type   : 'UI Collection'
   </div>
   
   <div class="example">
-    <h4>Active</h4>
+    <h4 class="ui header">Active</h4>
     <p>A cell or row can be active:</p>
     <table class="ui table">
       <thead>
@@ -200,7 +200,7 @@ type   : 'UI Collection'
       </tbody>
     </table>
   <div class="example">
-    <h4>Disabled</h4>
+    <h4 class="ui header">Disabled</h4>
     <p>A cell can be disabled:</p>
     <table class="ui table">
       <thead>
@@ -234,10 +234,10 @@ type   : 'UI Collection'
     
   </div>
 
-  <h2>Variations</h2>
+  <h2 class="ui dividing header">Variations</h2>
   
   <div class="example">
-    <h4>Collapsing</h4>
+    <h4 class="ui header">Collapsing</h4>
     <p>By default tables take the size of their container. A collapsing takes up only as much space as its rows.</p>
     <table class="ui table collapsing">
       <thead>
@@ -271,7 +271,7 @@ type   : 'UI Collection'
   </div>
   
   <div class="example">
-    <h4>Cells</h4>
+    <h4 class="ui header">Cells</h4>
     <p>A table may be divided each row into separate cells</p>
     <table class="ui celled table">
       <thead>
@@ -305,7 +305,7 @@ type   : 'UI Collection'
   </div>
   
   <div class="example">
-    <h4>Sortable</h4>
+    <h4 class="ui header">Sortable</h4>
     <p>A table may allow a user to sort contents by clicking on a table header.</p>
     
     <p>Adding a classname of ascending or descending, will show the user the direction of sort. This example uses a modified version of the kylefox's <a href="library/tablesort.js">tablesort plugin</a> to provide the proper class names.</p>
@@ -341,7 +341,7 @@ type   : 'UI Collection'
     </table>
   </div>
   <div class="example">
-    <h4>Padded</h4>
+    <h4 class="ui header">Padded</h4>
     <p>A table may sometimes need to be more padded for legibility</p>
     <table class="ui padded table">
       <thead>
@@ -364,7 +364,7 @@ type   : 'UI Collection'
     </table>
   </div>
   <div class="example">
-    <h4>Compact</h4>
+    <h4 class="ui header">Compact</h4>
     <p>A table may sometimes need to be more compact to make more rows visible at a time</p>
     <table class="ui compact table">
       <thead>
@@ -418,7 +418,7 @@ type   : 'UI Collection'
   </div>
   
   <div class="example">
-    <h4>Size</h4>
+    <h4 class="ui header">Size</h4>
     <p>A table can also be small or large</p>
     <table class="ui small table">
       <thead>