Enhances grid docs, fixes some consistency issues, adds grid fixed width variables

server/documents/collections/grid.html.eco

@@ -18,9 +18,8 @@ themes      : ['default']
 
   <div class="peek">
     <div class="ui vertical pointing secondary menu">
-      <a class="active item">Standard</a>
+      <a class="active item">Types</a>
       <a class="item">Elements</a>
-      <!--<a class="item">Types</a>-->
       <a class="item">Variations</a>
     </div>
   </div>
@@ -28,11 +27,12 @@ themes      : ['default']
   <h2 class="ui dividing header">Standard</h2>
 
   <div class="highlighted example">
-    <h4 class="ui header">Grid</h4>
+    <h4 class="ui header">Basic Grid</h4>
     <p>A grid is made up of columns of content with gutters to provide negative space between columns.</p>
 
-    <div class="ui ignore info message"><i class="icon heart"></i>All grid systems must assume an arbitrary amount of column rows. Semantic by default assumes <b>16 columns</b></div>
-    <div class="ui grid">
+    <div class="ui ignore info message"><i class="icon heart"></i>All grid systems must assume an arbitrary amount of column rows. Semantic's default theme assumes <b>16 columns</b></div>
+
+     <div class="ui grid">
       <div class="four wide column">
         <div class="ui segment">
         </div>
@@ -51,43 +51,56 @@ themes      : ['default']
       </div>
     </div>
   </div>
+  <div class="highlighted example">
+    <h4 class="ui header">Enhanced Grid</h4>
+    <p>A grid can include additional nesting for rows. This allows variations like <code>equal height</code> and <code>vertically divided</div> to function correctly and ensures the bottom grid row will always sit flush with content below.</p>
 
-  <div class="example">
-    <h4 class="ui header">Page Grid</h4>
-    <p>A page grid is used to layout page contents into a grid system. Page grids exists on the top level of a web site. A page grid has gutters to the left and right of its columns to center content on a page.</p>
-
-    <h4>Standard Page Grid</h4>
-    <p>A page grid will automatically resize its gutters as a browser's width changes. This will preserve a <b>percentage of width</b> as a gutter.</p>
 
-    <div class="ui page grid">
-      <div class="eight wide column">
-        <div class="ui labeled vertical fluid inverted icon menu">
-          <a class="item">
-            <i class="icon mail"></i>
-            Mail
-          </a>
-          <a class="item">
-            <i class="icon lab"></i>
-            Lab
-          </a>
-          <a class="item">
-            <i class="icon star"></i>
-            Favorites
-          </a>
+    <div class="ui grid">
+      <div class="ui four column row">
+        <div class="column">
+          <div class="ui segment">
+          </div>
+        </div>
+        <div class="column">
+          <div class="ui segment">
+          </div>
+        </div>
+        <div class="column">
+          <div class="ui segment">
+          </div>
+        </div>
+        <div class="column">
+          <div class="ui segment">
+          </div>
         </div>
       </div>
-      <div class="eight wide column">
-        <div class="ui segment">
-          <b>Inbox</b>
-          <p>Welcome to your inbox. Would you like to see more information?</p>
+      <div class="ui row">
+        <div class="three wide column">
+          <div class="ui segment">
+          </div>
+        </div>
+        <div class="eight wide column">
+          <div class="ui segment">
+          </div>
+        </div>
+        <div class="five wide column">
+          <div class="ui segment">
+          </div>
         </div>
       </div>
     </div>
+  </div>
 
-    <h4>Fixed Page Grid</h4>
-    <p>A fixed page grid only changes its gutter sizes once per breakpoint, this will preserve a <b>fixed grid size</b> for each screen type</p>
 
-    <div class="ui fixed page grid">
+  <div class="example">
+    <h4 class="ui header">Page Grid</h4>
+    <p>A page grid is used to layout page contents into a grid system. Page grids exists on the top level of a web site. A page grid has gutters to the left and right of its columns to center content on a page.</p>
+
+  <h4>Page Grid</h4>
+    <p>A page grid will automatically resize its gutters as a browser's width changes. This will preserve a <b>percentage of width</b> as a gutter.</p>
+
+    <div class="ui page grid">
       <div class="eight wide column">
         <div class="ui labeled vertical fluid inverted icon menu">
           <a class="item">
@@ -209,7 +222,7 @@ themes      : ['default']
 
   <div class="highlighted example">
     <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 flush vertically.</p>
+    <p>A row is used to create vertical padding between groups of columns on a page.</p>
     <div class="ui grid">
       <div class="row">
         <div class="column">
@@ -379,7 +392,7 @@ themes      : ['default']
   </div>
   <div class="highlighted example">
     <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>Columns each contain gutters giving them equal spacing from other columns.</p>
     <div class="ui three column grid">
       <div class="column">
         <div class="ui segment">

server/documents/views/statistic.html.eco

@@ -291,4 +291,85 @@ themes      : ['Default']
     </div>
   </div>
 
+  <div class="example">
+    <h4 class="ui header">Sizes</h4>
+    <p>A statistic can vary in size</p>
+    <div class="ui small statistic">
+      <div class="value">
+        22
+      </div>
+      <div class="label">
+        Breeds of Dog
+      </div>
+    </div>
+  </div>
+  <div class="another example">
+    <div class="ui small horizontal statistics">
+      <div class="statistic">
+        <div class="value">
+          22
+        </div>
+        <div class="label">
+          Breeds of Dog
+        </div>
+      </div>
+      <div class="statistic">
+        <div class="value">
+          31
+        </div>
+        <div class="label">
+          Famous Dogs in Films
+        </div>
+      </div>
+      <div class="statistic">
+        <div class="value">
+          22
+        </div>
+        <div class="label">
+          US Presidents Owned Dogs
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="example">
+    <h4 class="ui header">Sizes</h4>
+    <p>A statistic can vary in size</p>
+    <div class="ui large statistic">
+      <div class="value">
+        22
+      </div>
+      <div class="label">
+        Breeds of Dog
+      </div>
+    </div>
+  </div>
+  <div class="another example">
+    <div class="ui large horizontal statistics">
+      <div class="statistic">
+        <div class="value">
+          22
+        </div>
+        <div class="label">
+          Breeds of Dog
+        </div>
+      </div>
+      <div class="statistic">
+        <div class="value">
+          31
+        </div>
+        <div class="label">
+          Famous Dogs in Films
+        </div>
+      </div>
+      <div class="statistic">
+        <div class="value">
+          22
+        </div>
+        <div class="label">
+          US Presidents Owned Dogs
+        </div>
+      </div>
+    </div>
+  </div>
+
 </div>

server/files/stylesheets/semantic.css

@@ -1107,7 +1107,7 @@ body.guide .main.container > * {
 }
 
 #example .highlighted.example {
-  min-height: 390px;
+  min-height: 205px;
 }
 #example .highlighted.example .grid,
 #example .ui.type.items .image .grid {
@@ -1115,30 +1115,36 @@ body.guide .main.container > * {
   -moz-animation: grid 15s ease infinite;
   background-color: #F6F6F6;
   margin: 0em auto;
+  box-shadow:
+    0px 0px 0px 1px rgba(0, 0, 0, 0.1),
+    0px 1px 2px 0px rgba(0, 0, 0, 0.1)
+  ;
 }
 #example .highlighted.example .grid .row,
 #example .ui.type.items .image .grid .row {
   border-top: 1px solid #DDDDDD;
 }
+#example .highlighted.example .grid .row:first-child,
+#example .ui.type.items .image .grid .row:first-child {
+  border-top: none;
+}
+#example .highlighted.example .grid .column:first-child,
+#example .ui.type.items .image .grid .column:first-child {
+  box-shadow: none;
+}
 #example .highlighted.example .grid .column,
 #example .ui.type.items .image .grid .column {
-  background-color: #F4F4F4;
   min-height: 50px;
-  -webkit-box-shadow: 0px 0px 0px 1px #E2E2E2;
-  -moz-box-shadow: 0px 0px 0px 1px #E2E2E2;
-  box-shadow: 0px 0px 0px 1px #E2E2E2;
+  -webkit-box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1);
+  box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1);
 }
 #example .highlighted.example .grid .segment,
 #example .ui.type.items .image .grid .segment {
-  min-height: 50px;
+  min-height: 60px;
   text-align: center;
   padding-left: 0em;
   padding-right: 0em;
-  -webkit-box-shadow: 0px 0px 0px 1px #DDDDDD;
-  -moz-box-shadow: 0px 0px 0px 1px #DDDDDD;
-  box-shadow: 0px 0px 0px 1px #DDDDDD;
-  -webkit-border-radius: 0px;
-  -moz-border-radius: 0px;
   border-radius: 0px;
 }
 

src/definitions/collections/grid.less

@@ -134,36 +134,42 @@ body > .ui.grid:not(.page) {
   min-width: @minWidth;
   padding-left: 0%;
   padding-right: 0%;
+  width: @computerWidth;
   margin-left: @computerGutter;
   margin-right: @computerGutter;
 }
 
 @media only screen and (max-width : (@tabletBreakpoint - 1)) {
   .ui.page.grid {
+    width: @mobileWidth;
     margin-left: @mobileGutter;
     margin-right: @mobileGutter;
   }
 }
 @media only screen and (min-width : @tabletBreakpoint) {
   .ui.page.grid {
+    width: @tabletWidth;
     margin-left: @tabletGutter;
     margin-right: @tabletGutter;
   }
 }
 @media only screen and (min-width : @computerBreakpoint) {
   .ui.page.grid {
+    width: @computerWidth;
     margin-left: @computerGutter;
     margin-right: @computerGutter;
   }
 }
 @media only screen and (min-width : @largeMonitorBreakpoint) {
   .ui.page.grid {
+    width: @largeMonitorWidth;
     margin-left: @largeMonitorGutter;
     margin-right: @largeMonitorGutter;
   }
 }
 @media only screen and (min-width : @widescreenMonitorBreakpoint) {
   .ui.page.grid {
+    width: @widescreenMonitorWidth;
     margin-left: @widescreenMonitorGutter;
     margin-right: @widescreenMonitorGutter;
   }

src/themes/packages/default/collections/grid.variables

@@ -30,11 +30,20 @@
      Page
 ---------------*/
 
-/* Standard */
+/* Column Gutters */
+@mobileWidth: auto;
 @mobileGutter: 1em;
+
+@tabletWidth: auto;
 @tabletGutter: 8%;
+
+@computerWidth: auto;
 @computerGutter: 13%;
+
+@largeMonitorWidth: auto;
 @largeMonitorGutter: 18%;
+
+@widescreenMonitorWidth: auto;
 @widescreenMonitorGutter: 23%;