Initial work on statistic doc

server/documents/elements/segment.html.eco

@@ -35,7 +35,7 @@ themes      : ['default', 'GitHub']
     <h4 class="ui header">Piled</h4>
     <p>A segment can be formatted to look like a pile of pages</p>
     <div class="ui piled segment">
-      <h2>A header</h2>
+      <h4 class="ui header">A header</h4>
       <p>Te eum doming eirmod, nominati pertinacia argumentum ad his. Ex eam alia facete scriptorem, est autem aliquip detraxit at. Usu ocurreret referrentur at, cu epicurei appellantur vix. Cum ea laoreet recteque electram, eos choro alterum definiebas in. Vim dolorum definiebas an. Mei ex natum rebum iisque.</p>
 
       <p>Audiam quaerendum eu sea, pro omittam definiebas ex. Te est latine definitiones. Quot wisi nulla ex duo. Vis sint solet expetenda ne, his te phaedrum referrentur consectetuer. Id vix fabulas oporteat, ei quo vide phaedrum, vim vivendum maiestatis in.</p>

server/documents/index.html.eco

@@ -52,7 +52,7 @@ type   : 'Semantic'
       <div class="ui message">
         Semantic is tag agnostic meaning you can use <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/HTML5_element_list" target="_blank">any html tags</a> with UI elements.
       </div>
-      <div class="ui stackable two column grid">
+      <div class="ui stackable two column fitted grid">
         <div class="column">
           <a class="ui teal label" href="/collections/grid.html">Semantic</a>
           <div class="code" data-type="html">
@@ -215,8 +215,8 @@ type   : 'Semantic'
           <div class="column">
             <div class="ui stacked segment">
               <div class="ui statistic">
-                <div class="number"><%= uiElements.length %></div>
-                <div class="description">UI Elements</div>
+                <div class="value"><%= uiElements.length %></div>
+                <div class="label">UI Elements</div>
               </div>
               <div class="ui divided selection list">
                 <% for element in uiElements: %>
@@ -228,8 +228,8 @@ type   : 'Semantic'
           <div class="column">
             <div class="ui stacked segment">
               <div class="ui statistic">
-                <div class="number"><%= uiCollections.length %></div>
-                <div class="description">UI Collections</div>
+                <div class="value"><%= uiCollections.length %></div>
+                <div class="label">UI Collections</div>
               </div>
               <div class="ui divided selection list">
                 <% for element in uiCollections: %>
@@ -241,8 +241,8 @@ type   : 'Semantic'
           <div class="column">
             <div class="ui stacked segment">
               <div class="ui statistic">
-                <div class="number"><%= uiViews.length %></div>
-                <div class="description">UI Views</div>
+                <div class="value"><%= uiViews.length %></div>
+                <div class="label">UI Views</div>
               </div>
               <div class="ui divided selection list">
                 <% for element in uiViews: %>
@@ -254,8 +254,8 @@ type   : 'Semantic'
           <div class="column">
             <div class="ui stacked segment">
               <div class="ui statistic">
-                <div class="number"><%= uiModules.length %></div>
-                <div class="description">UI Modules</div>
+                <div class="value"><%= uiModules.length %></div>
+                <div class="label">UI Modules</div>
               </div>
               <div class="ui divided selection list">
                 <% for element in uiModules: %>

server/documents/views/statistic.html.eco

@@ -0,0 +1,203 @@
+---
+layout      : 'default'
+css         : 'stat'
+
+title       : 'Statistic'
+description : 'A statistic is used to present a single value measurement of an attribute'
+type        : 'UI View'
+
+element     : 'statistic'
+elementType : 'view'
+
+themes      : ['Default']
+---
+
+<%- @partial('header') %>
+
+<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/views/statistic.less" />
+<script src="/javascript/card.js"></script>
+
+<div class="main container">
+
+  <div class="peek">
+    <div class="ui vertical pointing secondary menu">
+      <a class="active item">Types</a>
+      <a class="item">Content</a>
+      <a class="card">Variations</a>
+    </div>
+  </div>
+
+  <h2 class="ui dividing header">Types</h2>
+
+  <div class="example">
+    <h4 class="ui header">Statistic</h4>
+    <p>A statistic</p>
+    <div class="ui statistic">
+      <div class="value">
+        22
+      </div>
+      <div class="label">
+        Breeds of Dog
+      </div>
+    </div>
+  </div>
+
+  <div class="example">
+    <h4 class="ui header">Statistic</h4>
+    <p>A group of statistics</p>
+    <div class="ui 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>
+
+  <h2 class="ui dividing header">Content</h2>
+
+  <div class="example">
+    <h4 class="ui header">Value</h4>
+    <p>A statistic can contain a numeric, icon, image, or text value</p>
+    <div class="ui statistics">
+      <div class="statistic">
+        <div class="value">
+          22
+        </div>
+        <div class="label">
+          Breeds of Dog
+        </div>
+      </div>
+      <div class="statistic">
+        <div class="text value">
+          Two Hundred
+        </div>
+        <div class="label">
+          Dogs I've Owned
+        </div>
+      </div>
+      <div class="statistic">
+        <div class="value">
+          <i class="smile icon"></i>
+        </div>
+        <div class="label">
+          Current Mood
+        </div>
+      </div>
+      <div class="statistic">
+        <div class="value">
+          <img src="/images/demo/transparent-dog.png">
+          11
+        </div>
+        <div class="label">
+          Puppies
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="example">
+    <h4 class="ui header">Label</h4>
+    <p>A statistic can contain a label to help provide context for the presented value</p>
+    <div class="ui statistic">
+      <div class="value">
+        22
+      </div>
+      <div class="label">
+        Breeds of Dog
+      </div>
+    </div>
+  </div>
+
+
+  <h2 class="ui dividing header">Variations</h2>
+
+  <div class="example">
+    <h4 class="ui header">Horizontal Statistic</h4>
+    <p>A statistic can present its measurement horizontally</p>
+    <div class="ui horizontal statistic">
+      <div class="value">
+        22
+      </div>
+      <div class="label">
+        Breeds of Dog
+      </div>
+    </div>
+  </div>
+  <div class="another example">
+    <div class="ui 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">Inverted</h4>
+    <p>A statistic can be formatted to fit on a dark background</p>
+    <div class="ui inverted segment">
+      <div class="ui inverted statistic">
+        <div class="value">
+          22
+        </div>
+        <div class="label">
+          Breeds of Dog
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="example">
+    <h4 class="ui header">Floated</h4>
+    <p>An statistic can sit to the left or right of other content</p>
+    <div class="ui statistic">
+      <div class="value">
+        22
+      </div>
+      <div class="label">
+        Breeds of Dog
+      </div>
+    </div>
+  </div>
+
+</div>

src/definitions/views/statistic.less

@@ -21,30 +21,176 @@
 /*******************************
            Statistic
 *******************************/
+
 .ui.statistic {
-  margin: 1em 0em;
-  text-align: center;
+  display: @display;
+  margin: @margin;
 }
 
-.ui.statistic:first-child {
-  margin-top: 0em;
+/*******************************
+            Group
+*******************************/
+
+.ui.statistics {
+  display: @groupDisplay;
+  margin: @groupMargin;
+}
+
+/* Clearing */
+.ui.statistics:after {
+  display: block;
+  content: ' ';
+  height: 0px;
+  clear: both;
+  overflow: hidden;
+  visibility: hidden;
 }
 
-.ui.statistic:last-child {
+.ui.statistics:first-child {
+  margin-top: 0em;
+}
+.ui.statistics:last-child {
   margin-bottom: 0em;
 }
 
+/* Each */
+.ui.statistics > .statistic {
+  display: @elementDisplay;
+  float: @elementFloat;
+  margin: @elementMargin;
+}
+
+
 /*******************************
             Content
 *******************************/
 
-.ui.statistic > .number {
-  font-size: 4em;
-  font-weight: 300;
-  color: rgba(0, 0, 0, 0.7);
+
+/*--------------
+      Value
+---------------*/
+
+.ui.statistics .statistic > .value,
+.ui.statistic > .value {
+  font-family: @valueFont;
+  font-size: @valueSize;
+  font-weight: @valueFontWeight;
+  line-height: @valueLineHeight;
+  color: @valueColor;
+  text-transform: @valueTextTransform;
+  text-align: @textAlign;
+}
+
+/*--------------
+      Label
+---------------*/
+
+.ui.statistics .statistic > .label,
+.ui.statistic > .label {
+  margin-top: @labelDistance;
+  font-family: @labelFont;
+  font-size: @labelSize;
+  font-weight: @labelFontWeight;
+  color: @labelColor;
+  text-transform: @labelTextTransform;
+  text-align: @textAlign;
+}
+
+
+/*******************************
+             Types
+*******************************/
+
+/*--------------
+   Icon Value
+---------------*/
+
+.ui.statistics .statistic > .value .icon,
+.ui.statistic > .value .icon {
+  opacity: 1;
+}
+
+/*--------------
+   Text Value
+---------------*/
+
+.ui.statistics .statistic > .text.value,
+.ui.statistic > .text.value {
+  font-size: 2em;
+  line-height: 1em;
+  min-height: 4rem;
+  text-align: left;
+}
+.ui.statistics .statistic > .text.value + .label,
+.ui.statistic > .text.value + .label {
+  text-align: left;
+}
+
+/*--------------
+   Image Value
+---------------*/
+
+.ui.statistics .statistic > .value img,
+.ui.statistic > .value img {
+  max-height: 4rem;
+  vertical-align: top;
+}
+
+
+
+/*******************************
+            Variations
+*******************************/
+
+/*--------------
+   Horizontal
+---------------*/
+
+.ui.horizontal.statistics,
+.ui.horizontal.statistic {
+  display: block;
+  margin: 0em;
+}
+.ui.horizontal.statistics .statistic {
+  float: none;
+  margin: @horizontalGroupElementMargin;
+}
+
+.ui.horizontal.statistics .statistic > .value,
+.ui.horizontal.statistic > .value {
+  display: inline-block;
+  vertical-align: middle;
+  font-size: @horizontalValueSize;
+}
+.ui.horizontal.statistics .statistic > .label,
+.ui.horizontal.statistic > .label {
+  display: inline-block;
+  vertical-align: middle;
+  margin: 0em 0em 0em @horizontalLabelDistance;
+}
+
+
+
+/*--------------
+    Floated
+---------------*/
+
+.ui.left.floated.statistic {
+  float: left;
+}
+.ui.right.floated.statistic {
+  float: right;
+}
+
+/*--------------
+    Inverted
+---------------*/
+
+.ui.inverted.statistic .value {
+  color: @invertedValueColor;
 }
-.ui.statistic > .description {
-  opacity: 0.8;
+.ui.inverted.statistic .label {
+  color: @invertedLabelColor;
 }
 
 .loadUIOverrides();

src/themes/packages/default/views/statistic.variables

@@ -2,17 +2,60 @@
            Statistic
 *******************************/
 
-
 /*-------------------
          View
 --------------------*/
 
+@display: inline-block;
+@margin: 1em 0em;
+@textAlign: center;
+
+/* Group */
+@groupDisplay: block;
+@groupMargin: 1em -@horizontalSpacing;
+@horizontalSpacing: 1.5em;
+@rowSpacing: 2em;
+@elementFloat: left;
+@elementDisplay: block;
+@elementMargin: 0em @horizontalSpacing @rowSpacing;
+
 /*-------------------
       Elements
 --------------------*/
 
+/* Value */
+@valueFont: @pageFont;
+@valueFontWeight: normal;
+@valueLineHeight: 1em;
+@valueSize: 4em;
+@valueColor: @black;
+@valueTextTransform: uppercase;
 
+/* Label */
+@labelDistance: 0.25em;
+@labelFont: @headerFont;
+@labelFontWeight: normal;
+@labelSize: 1em;
+@labelColor: @unselectedTextColor;
+@labelLineHeight: 1.33em;
+@labelTextTransform: none;
+
+/*-------------------
+      Types
+--------------------*/
+
+@horizontalGroupElementMargin: 1em 0em;
+@horizontalValueSize: 3em;
+@horizontalLabelDistance: 0.75em;
 
 /*-------------------
       Variations
---------------------*/
+--------------------*/
+
+/* Floated */
+
+/* Inverted */
+@invertedValueColor: @invertedTextColor;
+@invertedLabelColor: @invertedLightTextColor;
+
+/* Size */