Fixes anchor links in code samples, some doc styles

server/documents/collections/grid.html.eco

@@ -117,6 +117,9 @@ themes      : ['Default']
       <h4 class="ui header">Specifying Alignment</h4>
       <p>You can specify alignment using alignment variations on a grid, row, or column level.</p>
       <div class="ui ignored warning message">
+        <p>When multiple floats are used in consecutive rows, you may under some circumstances need to include <code>row</code> wrappers to ensure proper content float</p>
+      </div>
+      <div class="ui ignored info message">
         <div class="header">Word Order Requirements</div>
         <p>Keep in mind multi-word variations like <code>right floated</code> <b>require you to specify both class names side-by-side</b>, this helps preserve syntax when stacking variations like a <code>right floated left aligned column</code></p>
       </div>
@@ -124,12 +127,12 @@ themes      : ['Default']
       <div class="ui right aligned grid">
         <div class="right floated left aligned six wide column">
           <div class="ui segment">
-            Right floated left aligned
+            Right floated left aligned column
           </div>
         </div>
         <div class="left floated right aligned six wide column">
           <div class="ui segment">
-            Left floated right aligned
+            Left floated right aligned column
           </div>
         </div>
         <div class="center aligned two column row">
@@ -252,7 +255,7 @@ themes      : ['Default']
     <div class="highlighted example">
       <h4 class="ui header">Responsive Patterns</h4>
       <p>Semantic includes two common patterns for adjusting grids on different devices.</p>
-      <p><b>Doubling</b> grids automatically double their specified column width on each device jump. So a 4 column grid, will jump to two on tablet, and one on mobile.</p>
+      <p>A <b>Doubling</b> grid automatically doubles its column width on each device jump. For example, four column computer grid, will jump to a two column grid on tablet, and one column on mobile.</p>
 
       <div class="ui grid">
         <div class="doubling eight column row">

server/documents/views/item.html.eco

@@ -26,7 +26,7 @@ themes      : ['Default']
     <div class="ui items">
       <div class="item">
         <div class="image">
-          <img src="/images/movies/12years.jpg">
+          <img src="/images/movies/12years-horizontal.jpg">
         </div>
         <div class="content">
           <a class="header">12 Years a Slave</a>
@@ -40,16 +40,12 @@ themes      : ['Default']
             <div class="ui right floated disabled red button">Sold Out</div>
             <div class="ui horizontal label">IMAX</div>
             <div class="ui horizontal label"><i class="globe icon"></i> Additional Languages</div>
-            <span class="available">
-              <i class="red remove icon"></i>
-              Tickets Unavailable
-            </span>
           </div>
         </div>
       </div>
       <div class="item">
         <div class="image">
-          <img src="/images/movies/totoro.jpg">
+          <img src="/images/movies/totoro-horizontal.jpg">
         </div>
         <div class="content">
           <a class="header">My Neighbor Totoro</a>
@@ -65,16 +61,12 @@ themes      : ['Default']
               <i class="right chevron icon"></i>
             </div>
             <div class="ui horizontal label">Limited</div>
-            <span class="available">
-              <i class="green check icon"></i>
-              10 Seats Avaiable
-            </span>
           </div>
         </div>
       </div>
       <div class="item">
         <div class="image">
-          <img src="/images/movies/watchmen.jpg">
+          <img src="/images/movies/watchmen-horizontal.jpg">
         </div>
         <div class="content">
           <a class="header">Watchmen</a>
@@ -89,10 +81,6 @@ themes      : ['Default']
               Buy tickets
               <i class="right chevron icon"></i>
             </div>
-            <span class="available">
-              <i class="green check icon"></i>
-              40 Seats Avaiable
-            </span>
           </div>
         </div>
       </div>
@@ -308,11 +296,8 @@ themes      : ['Default']
       <i class="info icon"></i>
       The following example uses <a href="/elements/segment.html">ui</a> for legibility only. This is not necessary for using <code>ui items</code>
     </div>
-    <div class="ui items">
+    <div class="ui divided items">
       <div class="item">
-        <div class="image">
-          <img src="/images/logos/arrowhead.png">
-        </div>
         <div class="middle aligned content">
           <a class="header">Arrowhead Valley Camp</a>
           <div class="meta">
@@ -327,17 +312,10 @@ themes      : ['Default']
               <i class="child icon"></i>
               Child Friendly
             </span>
-            <span class="available">
-              <i class="red check icon"></i>
-              0 Spots Available
-            </span>
           </div>
         </div>
       </div>
       <div class="item">
-        <div class="image">
-          <img src="/images/logos/big-buck.png">
-        </div>
         <div class="middle aligned content">
           <a class="header">Buck's Homebrew Stayaway</a>
           <div class="meta">
@@ -352,17 +330,10 @@ themes      : ['Default']
               <i class="male icon"></i>
               Adults-Only
             </span>
-            <span class="available">
-              <i class="green check icon"></i>
-              2 Spots Available
-            </span>
           </div>
         </div>
       </div>
       <div class="item">
-        <div class="image">
-          <img src="/images/logos/sunset.png">
-        </div>
         <div class="middle aligned content">
           <a class="header">Greek Astrology Camp</a>
           <div class="meta">
@@ -377,10 +348,6 @@ themes      : ['Default']
               <i class="child icon"></i>
               Child Friendly
             </span>
-            <span class="available">
-              <i class="green check icon"></i>
-              25 Spots Available
-            </span>
           </div>
         </div>
       </div>

server/files/javascript/semantic.js

@@ -547,7 +547,7 @@ semantic.ready = function() {
         $annotation = $example.find('.annotation'),
         $code       = $annotation.find('.code'),
         $header     = $example.not('.another').children('.ui.header:first-of-type').eq(0).add('p:first-of-type'),
-        $ignored    = $('i.code:last-child, .code, .existing, .pointing.below.label, .instructive, .language.label, .annotation, br, .ignore, .ignored'),
+        $ignored    = $('i.code:last-child, .anchor, .code, .existing, .pointing.below.label, .instructive, .language.label, .annotation, br, .ignore, .ignored'),
         $demo       = $example.children().not($header).not($ignored),
         code        = ''
       ;
@@ -576,7 +576,7 @@ semantic.ready = function() {
         $header         = $example.children('.ui.header:first-of-type').eq(0).add('p:first-of-type'),
         $annotation     = $example.find('.annotation'),
         $code           = $annotation.find('.code'),
-        $ignoredContent = $('.ui.popup, i.code:last-child, .code, .existing.segment, .instructive, .language.label, .annotation, br, .ignore, .ignored'),
+        $ignoredContent = $('.ui.popup, i.code:last-child, .anchor, .code, .existing.segment, .instructive, .language.label, .annotation, br, .ignore, .ignored'),
         $demo           = $example.children().not($header).not($ignoredContent),
         code            = $example.data('code') || $.proxy(handler.generateCode, this)()
       ;