Redoes icon docs, adds internal grid example, adds social circular icon example

server/documents/collections/grid.html.eco

@@ -537,16 +537,42 @@ themes      : ['Default']
           <div class="three wide column">
             <img src="/images/leaves/2.png" class="ui fluid image">
           </div>
+          <div class="thirteen wide column">
+            <h3 class="ui green header">What are Leaves?</h3>
+            <p>A leaf is an above-ground plant organ. Its main functions are photosynthesis and gas exchange. A leaf is often flat, so it absorbs the most light, and thin, so that the sunlight can get to the chloroplasts in the cells.</p>
+          </div>
+        </div>
+        <div class="row">
           <div class="three wide column">
-            <img src="/images/leaves/5.png" class="ui fluid image">
+            <img src="/images/leaves/4.png" class="ui fluid image">
           </div>
+          <div class="ten wide column">
+            <h3 class="ui green header">Types of Leaves</h3>
+            <p>Leaves come in many shapes and sizes. The biggest undivided leaf is that of a giant edible aroid. This lives in marshy parts of the tropical rain forest of Borneo.</p>
+            <p> One of its leaves can be ten feet across and have a surface area of over 30 square feet.
+          </p>
+        </div>
           <div class="three wide column">
-            <img src="/images/leaves/6.png" class="ui fluid image">
+            <img src="/images/leaves/7.png" class="ui fluid image">
           </div>
-          <div class="seven wide column">
+        </div>
+      </div>
+    </div>
+    <div class="another example">
+      <h4 class="ui header">Internally Celled Grid</h4>
+      <p>A grid can have rows divisions only between internal rows</p>
+      <div class="ui internally celled grid">
+        <div class="row">
+          <div class="three wide column">
+            <img src="/images/leaves/2.png" class="ui fluid image">
+          </div>
+          <div class="ten wide column">
             <h3 class="ui green header">What are Leaves?</h3>
             <p>A leaf is an above-ground plant organ. Its main functions are photosynthesis and gas exchange. A leaf is often flat, so it absorbs the most light, and thin, so that the sunlight can get to the chloroplasts in the cells.</p>
           </div>
+          <div class="three wide column">
+            <img src="/images/leaves/6.png" class="ui fluid image">
+          </div>
         </div>
         <div class="row">
           <div class="three wide column">

server/documents/elements/button.html.eco

@@ -343,6 +343,20 @@ themes      : ['Default', 'Classic', 'Basic', 'Raised', 'Chubby', 'Round', 'Amaz
       <i class="icon settings"></i>
     </div>
   </div>
+  <div class="another example">
+    <div class="ui circular facebook icon button">
+      <i class="facebook icon"></i>
+    </div>
+    <div class="ui circular twitter icon button">
+      <i class="twitter icon"></i>
+    </div>
+    <div class="ui circular linkedin icon button">
+      <i class="linkedin icon"></i>
+    </div>
+    <div class="ui circular google plus icon button">
+      <i class="google plus icon"></i>
+    </div>
+  </div>
 
   <div class="example">
     <h4 class="ui header">Vertically Attached</h4>
@@ -407,6 +421,24 @@ themes      : ['Default', 'Classic', 'Basic', 'Raised', 'Chubby', 'Round', 'Amaz
       </div>
     </div>
   </div>
+  <div class="example">
+    <h4 class="ui header">Mixed Group</h4>
+    <p>Groups can be formatted to use multiple button types together</p>
+    <div class="ui buttons">
+      <div class="ui labeled icon button">
+        <i class="left chevron icon"></i>
+        Back
+      </div>
+      <div class="ui button">
+        <i class="stop icon"></i>
+        Stop
+      </div>
+      <div class="ui right labeled icon button">
+        Forward
+        <i class="right chevron icon"></i>
+      </div>
+    </div>
+  </div>
 
 
   <div class="example">

server/files/javascript/icon.js

@@ -5,19 +5,40 @@ semantic.icon.ready = function() {
 
   // selector cache
   var
-    $tab = $('.tabular.menu .item'),
+    $grid         = $('.ui.six.column.doubling.grid'),
+    // alias
     handler
   ;
 
   // event handlers
   handler = {
-
+    createTable: function() {
+      var
+        $grid = $(this),
+        columnCount = 6
+      ;
+      $grid
+        .find('.column:nth-child('+columnCount+'n+1)')
+          .each(function() {
+            var
+              $group = $(this)
+                .nextAll(':lt('+ (columnCount - 1) +')')
+                .andSelf()
+              ;
+              $group.wrapAll('<div class="row"></div>');
+              $group.filter('[data-content]').popup({
+                position: 'top center',
+                variation: 'large inverted',
+                delay: 300
+              });
+          })
+          .end()
+        .addClass('middle aligned internally celled')
+      ;
+    }
   };
 
-
-  $tab
-    .tab()
-  ;
+  $grid.each(handler.createTable);
 
 };
 

server/files/stylesheets/semantic.css

@@ -960,13 +960,13 @@ body.progress.animated .ui.progress .bar {
 ---------------*/
 
 #example .icon.example .grid {
-  margin-top: 1.5rem;
   text-align: left;
 }
 #example .icon.example .grid .code {
   position: static;
 }
-#example .icon.example .grid .column {
+#example .icon.example .grid > .row > .column {
+  height: 6em;
   opacity: 0.8;
   text-align: center;
   color: #888888;
@@ -1016,7 +1016,7 @@ body.progress.animated .ui.progress .bar {
     all 0.2s ease-out
   ;
 }
-#example .icon.example .grid .column:hover .icon {
+#example .icon.example .grid > .row > .column:hover .icon {
   color: #009FDA;
   -webkit-transform: scale(1.5);
   -moz-transform: scale(1.5);
@@ -1483,13 +1483,6 @@ body.progress.animated .ui.progress .bar {
   }
 }
 
-@media only screen and (max-width : 600px) {
-  #example .icon.example .grid .column {
-    width: 33.33%;
-  }
-}
-
-
 @media only screen and (max-width : 600px) {
   #example .main.menu .borderless.item {
     display: none;