added basic steps, tweaks on icons

build/minified/collections/grid.min.css

@@ -1 +1 @@
-.ui.grid{width:100%;display:block;text-align:center;font-size:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.grid:after,.ui.row:after{content:".";display:block;height:0;clear:both;visibility:hidden}.ui.grid>.column,.ui.grid>.row>.column{display:inline-block;text-align:left;font-size:1rem;padding-left:1.33%;padding-right:1.33%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;vertical-align:top}.ui.grid>.row{display:block;width:100%}.ui.grid>.row{margin-top:2%;padding-top:2%}.ui.grid>.row:first-child{padding-top:0rem;margin-top:0rem}.ui.grid>.row>img,.ui.grid>.row>.column>img{max-width:100%}.ui.grid .column>.ui.segment:only-child{margin:0}.ui.grid .column>.grid{margin-left:-1.333%;margin-right:-1.333%}.ui.page.grid{padding:0 5%}@media only screen and (max-width:1000px){.ui.responsive.grid{padding:0 5.55%}}@media only screen and (min-width:1000px){.ui.responsive.grid{padding:0 8%}}@media only screen and (min-width:1500px){.ui.responsive.grid{padding:0 13%}}@media only screen and (min-width:1750px){.ui.responsive.grid{padding:0 18%}}@media only screen and (min-width:2000px){.ui.responsive.grid{padding:0 20%}}.ui.grid .one.wide.column{width:8.3333%}.ui.grid .two.wide.column{width:16.66667%}.ui.grid .three.wide.column{width:25%}.ui.grid .four.wide.column{width:33.3333%}.ui.grid .five.wide.column{width:41.6666%}.ui.grid .six.wide.column{width:50%}.ui.grid .seven.wide.column{width:58.3333%}.ui.grid .eight.wide.column{width:66.6666%}.ui.grid .nine.wide.column{width:75%}.ui.grid .ten.wide.column{width:83.3333%}.ui.grid .eleven.wide.column{width:91.666%}.ui.grid .twelve.wide.column{width:100%}.ui.grid>.column,.ui.grid>.row>.column{width:8.3333%}.ui.grid>.column:only-child,.ui.grid>.row>.column:only-child{width:100%}.ui.two.column.grid .column{width:50%}.ui.three.column.grid .column{width:33.3333%}.ui.four.column.grid .column{width:25%}.ui.five.column.grid .column{width:20%}.ui.six.column.grid .column{width:16.66667%}.ui.seven.column.grid .column{width:14.2857%}.ui.eight.column.grid .column{width:12.5%}.ui.nine.column.grid .column{width:11.1111%}.ui.ten.column.grid .column{width:10%}.ui.eleven.column.grid .column{width:9.0909%}.ui.fitted.grid{padding:0}.ui.fitted.row{padding-top:0}.ui.fitted.grid .column,.ui.grid .fitted.column{padding-left:0;padding-right:0}.ui.grid .left.aligned.column{float:left}.ui.grid .right.aligned.column{float:right}.ui.divided.grid>.row{display:table}.ui.divided.grid>.column,.ui.divided.grid>.row>.column{display:table-cell;-webkit-box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.9);-moz-box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.9);box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.9)}.ui.divided.grid>.column:first-child,.ui.divided.grid>.row>.column:first-child{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.celled.grid{-webkit-box-shadow:0 0 0 1px #DFDFDF;-moz-box-shadow:0 0 0 1px #DFDFDF;box-shadow:0 0 0 1px #DFDFDF}.ui.celled.grid>.row{display:table;margin-top:0;padding-top:0;-webkit-box-shadow:0 -1px 0 0 #dfdfdf;-moz-box-shadow:0 -1px 0 0 #dfdfdf;box-shadow:0 -1px 0 0 #dfdfdf}.ui.celled.grid>.column,.ui.celled.grid>.row>.column{display:table-cell;-webkit-box-shadow:-1px 0 0 0 #dfdfdf;-moz-box-shadow:-1px 0 0 0 #dfdfdf;box-shadow:-1px 0 0 0 #dfdfdf}.ui.celled.grid>.column:first-child,.ui.celled.grid>.row>.column:first-child{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.top.aligned.grid .column,.ui.grid .top.aligned.column,.ui.grid>.top.aligned.row .column{vertical-align:top}.ui.middle.aligned.grid .column,.ui.grid .middle.aligned.column,.ui.grid>.middle.aligned.row .column{vertical-align:middle}.ui.bottom.aligned.grid .column,.ui.grid .bottom.aligned.column,.ui.grid>.bottom.aligned.row .column{vertical-align:bottom}.ui.grid .equal.row .column{display:table-cell}.ui.fitted.grid{margin-left:-1.333%;margin-right:-1.333%}@media only screen and (max-width:1000px){.ui.folding.grid{display:block!important}.ui.folding.grid .column{display:block!important;width:100%!important;padding:0!important}}
+.ui.grid{width:100%;display:block;text-align:center;font-size:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.grid:after,.ui.row:after{content:".";display:block;height:0;clear:both;visibility:hidden}.ui.grid>.column,.ui.grid>.row>.column{display:inline-block;text-align:left;font-size:1rem;padding-left:1.33%;padding-right:1.33%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;vertical-align:top}.ui.grid>.row{display:block;width:100%}.ui.grid>.row{margin-top:2%;padding-top:2%}.ui.grid>.row:first-child{padding-top:0rem;margin-top:0rem}.ui.grid>.row>img,.ui.grid>.row>.column>img{max-width:100%}.ui.grid .column>.ui.segment:only-child{margin:0}.ui.grid .column>.grid{margin-left:-1.333%;margin-right:-1.333%}.ui.page.grid{padding:0 5%}@media only screen and (max-width:1000px){.ui.responsive.grid{padding:0 5.55%}}@media only screen and (min-width:1000px){.ui.responsive.grid{padding:0 8%}}@media only screen and (min-width:1500px){.ui.responsive.grid{padding:0 13%}}@media only screen and (min-width:1750px){.ui.responsive.grid{padding:0 18%}}@media only screen and (min-width:2000px){.ui.responsive.grid{padding:0 20%}}.ui.grid .one.wide.column{width:8.3333%}.ui.grid .two.wide.column{width:16.66667%}.ui.grid .three.wide.column{width:25%}.ui.grid .four.wide.column{width:33.3333%}.ui.grid .five.wide.column{width:41.6666%}.ui.grid .six.wide.column{width:50%}.ui.grid .seven.wide.column{width:58.3333%}.ui.grid .eight.wide.column{width:66.6666%}.ui.grid .nine.wide.column{width:75%}.ui.grid .ten.wide.column{width:83.3333%}.ui.grid .eleven.wide.column{width:91.666%}.ui.grid .twelve.wide.column{width:100%}.ui.grid>.column,.ui.grid>.row>.column{width:8.3333%}.ui.grid>.column:only-child,.ui.grid>.row>.column:only-child{width:100%}.ui.two.column.grid .column{width:50%}.ui.three.column.grid .column{width:33.3333%}.ui.four.column.grid .column{width:25%}.ui.five.column.grid .column{width:20%}.ui.six.column.grid .column{width:16.66667%}.ui.seven.column.grid .column{width:14.2857%}.ui.eight.column.grid .column{width:12.5%}.ui.nine.column.grid .column{width:11.1111%}.ui.ten.column.grid .column{width:10%}.ui.eleven.column.grid .column{width:9.0909%}.ui.fitted.grid{padding:0}.ui.fitted.row{padding-top:0}.ui.fitted.grid .column,.ui.grid .fitted.column{padding-left:0;padding-right:0}.ui.grid .left.floated.column{float:left}.ui.grid .right.floated.column{float:right}.ui.divided.grid>.row{display:table}.ui.divided.grid>.column,.ui.divided.grid>.row>.column{display:table-cell;-webkit-box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.9);-moz-box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.9);box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.9)}.ui.divided.grid>.column:first-child,.ui.divided.grid>.row>.column:first-child{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.celled.grid{-webkit-box-shadow:0 0 0 1px #DFDFDF;-moz-box-shadow:0 0 0 1px #DFDFDF;box-shadow:0 0 0 1px #DFDFDF}.ui.celled.grid>.row{display:table;margin-top:0;padding-top:0;-webkit-box-shadow:0 -1px 0 0 #dfdfdf;-moz-box-shadow:0 -1px 0 0 #dfdfdf;box-shadow:0 -1px 0 0 #dfdfdf}.ui.celled.grid>.column,.ui.celled.grid>.row>.column{display:table-cell;-webkit-box-shadow:-1px 0 0 0 #dfdfdf;-moz-box-shadow:-1px 0 0 0 #dfdfdf;box-shadow:-1px 0 0 0 #dfdfdf}.ui.celled.grid>.column:first-child,.ui.celled.grid>.row>.column:first-child{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.left.aligned.grid .column,.ui.grid .left.aligned.column,.ui.grid>.left.aligned.row .column{text-align:left}.ui.center.aligned.grid .column,.ui.grid .center.aligned.column,.ui.grid>.center.aligned.row .column{text-align:center}.ui.right.aligned.grid .column,.ui.grid .right.aligned.column,.ui.grid>.right.aligned.row .column{text-align:right}.ui.top.aligned.grid .column,.ui.grid .top.aligned.column,.ui.grid>.top.aligned.row .column{vertical-align:top}.ui.middle.aligned.grid .column,.ui.grid .middle.aligned.column,.ui.grid>.middle.aligned.row .column{vertical-align:middle}.ui.bottom.aligned.grid .column,.ui.grid .bottom.aligned.column,.ui.grid>.bottom.aligned.row .column{vertical-align:bottom}.ui.grid .equal.row .column{display:table-cell}.ui.fitted.grid{margin-left:-1.333%;margin-right:-1.333%}@media only screen and (max-width:1000px){.ui.folding.grid{display:block!important}.ui.folding.grid .column{display:block!important;width:100%!important;padding:0!important}}

build/uncompressed/collections/grid.css

@@ -215,10 +215,10 @@
 /*----------------------
        "Floated"
 -----------------------*/
-.ui.grid .left.aligned.column {
+.ui.grid .left.floated.column {
   float: left;
 }
-.ui.grid .right.aligned.column {
+.ui.grid .right.floated.column {
   float: right;
 }
 /*----------------------
@@ -269,6 +269,25 @@
   -moz-box-shadow: none;
   box-shadow: none;
 }
+/*----------------------
+  Horizontally Centered
+-----------------------*/
+/* Vertical Centered */
+.ui.left.aligned.grid .column,
+.ui.grid .left.aligned.column,
+.ui.grid > .left.aligned.row .column {
+  text-align: left;
+}
+.ui.center.aligned.grid .column,
+.ui.grid .center.aligned.column,
+.ui.grid > .center.aligned.row .column {
+  text-align: center;
+}
+.ui.right.aligned.grid .column,
+.ui.grid .right.aligned.column,
+.ui.grid > .right.aligned.row .column {
+  text-align: right;
+}
 /*----------------------
   Vertically Centered
 -----------------------*/

build/uncompressed/elements/step.css

@@ -1,9 +1,9 @@
 .ui.steps {
   display: inline-block;
   font-size: 0px;
-  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15);
-  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15);
-  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15);
+  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
   border-radius: 4px;
@@ -11,15 +11,9 @@
 .ui.steps .step {
   display: inline-block;
   position: relative;
-  padding: 13px 23px 13px 40px;
-  background-color: #F3F3F3;
-  background: -webkit-linear-gradient(top, #ffffff 0%, #efefef 100%);
-  background: -moz-linear-gradient(top, #ffffff 0%, #efefef 100%);
-  background: -o-linear-gradient(top, #ffffff 0%, #efefef 100%);
-  background: -ms-linear-gradient(top, #ffffff 0%, #efefef 100%);
-  background: linear-gradient(top, #ffffff 0%, #efefef 100%);
-  color: #555555;
-  text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.8);
+  padding: 13px 35px 13px 45px;
+  background-color: #FFFFFF;
+  color: #888888;
 }
 .ui.steps .step:after {
   position: absolute;
@@ -28,22 +22,16 @@
   top: 7px;
   right: -16px;
   width: 32px;
-  height: 31px;
-  background-color: #F3F3F3;
-  background: -webkit-linear-gradient(left top, #ffffff 0%, #efefef 100%);
-  background: -moz-linear-gradient(left top, #ffffff 0%, #efefef 100%);
-  background: -o-linear-gradient(left top, #ffffff 0%, #efefef 100%);
-  background: -ms-linear-gradient(left top, #ffffff 0%, #efefef 100%);
-  background: linear-gradient(left top, #ffffff 0%, #efefef 100%);
-  -moz-box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.1), 1px -1px 1px rgba(255, 255, 255, 0.6);
-  -webkit-box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.1), 1px -1px 1px rgba(255, 255, 255, 0.6);
-  box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.1), 1px -1px 1px rgba(255, 255, 255, 0.6);
+  height: 32px;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  border-right: 1px solid rgba(0, 0, 0, 0.1);
+  background-color: #FFFFFF;
   -moz-transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
 }
 .ui.steps .step:first-child {
-  padding-left: 20px;
+  padding-left: 25px;
   -webkit-border-radius: 5px 0px 0px 5px;
   -moz-border-radius: 5px 0px 0px 5px;
   border-radius: 5px 0px 0px 5px;
@@ -131,8 +119,7 @@
              Sizes
 *******************************/
 .ui.steps .step {
-  font-size: 13px;
-  font-weight: bold;
+  font-size: 1rem;
 }
 /*******************************
              States
@@ -199,50 +186,22 @@
 /* Active */
 .ui.steps .active.step {
   cursor: auto;
-  background-color: #009FDA;
-  background: -webkit-linear-gradient(top, #009fda 0%, #00b3f5 100%);
-  background: -moz-linear-gradient(top, #009fda 0%, #00b3f5 100%);
-  background: -o-linear-gradient(top, #009fda 0%, #00b3f5 100%);
-  background: -ms-linear-gradient(top, #009fda 0%, #00b3f5 100%);
-  background: linear-gradient(top, #009fda 0%, #00b3f5 100%);
+  background-color: #555555;
   color: #FFFFFF;
-  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.3);
-  -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.35) inset;
-  -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.35) inset;
-  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.35) inset;
-}
-.ui.steps .active.step:before {
-  position: absolute;
-  top: 7px;
-  left: -16px;
-  content: '';
-  width: 32px;
-  height: 31px;
-  background-color: transparent;
-  background-image: none;
-  -moz-box-shadow: 2px -2px 1px rgba(0, 0, 0, 0.25);
-  -webkit-box-shadow: 2px -2px 1px rgba(0, 0, 0, 0.25);
-  box-shadow: 2px -2px 1px rgba(0, 0, 0, 0.25);
-  -moz-transform: rotate(45deg);
-  -webkit-transform: rotate(45deg);
-  transform: rotate(45deg);
+  font-weight: bold;
 }
 .ui.steps .active.step:first-child:before {
   width: 0px;
   height: 0px;
 }
 .ui.steps .active.step:after {
-  background-color: #009FDA;
-  background: -webkit-linear-gradient(left top, #009fda 0%, #00b3f5 100%);
-  background: -moz-linear-gradient(left top, #009fda 0%, #00b3f5 100%);
-  background: -o-linear-gradient(left top, #009fda 0%, #00b3f5 100%);
-  background: -ms-linear-gradient(left top, #009fda 0%, #00b3f5 100%);
-  background: linear-gradient(left top, #009fda 0%, #00b3f5 100%);
+  background-color: #555555;
+  border-color: #555555;
   -moz-box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.15) inset;
   -webkit-box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.15) inset;
   box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.15) inset;
 }
 /* Disabled */
 .ui.steps .disabled.step {
-  color: #BBBBBB;
+  color: #BFBFBF;
 }

node/src/documents/collections/grid.html

@@ -477,6 +477,41 @@ type   : 'UI Collection'
     </div>
   </div>
 
+  <div class="example">
+    <h4>Text Alignment</h4>
+    <p>A grid can specify its text alignment</p>
+    <div class="ui center aligned three column grid">
+      <div class="row">
+        <div class="column">
+          <div class="ui vertical fluid menu">
+            <div class="header item">
+              Cats
+            </div>
+          </div>
+        </div>
+        <div class="column">
+          <div class="ui vertical fluid menu">
+            <div class="header item">
+              Dogs
+            </div>
+            <div class="item">
+              Poodle
+            </div>
+            <div class="item">
+              Cockerspaniel
+            </div>
+          </div>
+        </div>
+        <div class="column">
+          <div class="ui vertical fluid menu">
+            <div class="header item">
+              Monkeys
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
   
   <div class="example">
     <h4>Vertical Alignment</h4>
@@ -613,9 +648,9 @@ type   : 'UI Collection'
   
   <div class="example">
     <h4>Row Alignment (Floating)</h4>
-    <p>A column can be aligned, or "floated", to either the left or right of its row.</p>
+    <p>A column can be"floated", to either the left or right of its row.</p>
     <div class="ui grid">
-      <div class="left aligned four wide column">
+      <div class="left floated four wide column">
         <div class="ui vertical fluid menu">
           <div class="header item">
             Dogs
@@ -628,7 +663,7 @@ type   : 'UI Collection'
           </div>
         </div>
       </div>
-      <div class="right aligned four wide column">
+      <div class="right floated four wide column">
         <div class="ui vertical fluid menu">
           <div class="header item">
             Cats

node/src/documents/elements/step.html

@@ -0,0 +1,73 @@
+---
+layout : 'default'
+css    : "steps"
+
+title  : 'Step'
+type   : 'UI Element'
+---
+
+<div class="segment">
+  <div class="container">
+    <h1>Step</h1>
+    <p>Steps can be used to give descriptions to sections of content. They can be formatted like tags, used to mark separate sections of a group of content.</p>
+  </div>
+</div>
+<div class="main container">
+  
+  <div class="peek">
+    <div class="ui vertical pointing menu">
+      <a class="active item">Standard</a>
+      <a class="item">States</a>
+      <a class="item">Variations</a>
+      <a class="item">Groups</a>
+    </div>
+  </div>
+  
+  <h2>Standard</h2>
+  <div class="example">
+    <h4>Step</h4>
+    <p>A basic set of steps</p>
+    <div class="ui steps">
+      <div class="ui step">
+        Shipping
+      </div>
+      <div class="ui active step">
+        Billing
+      </div>
+      <div class="ui step">
+        Confirm Order
+      </div>
+      <div class="ui disabled step">
+        Complete
+      </div>
+    </div>
+  </div>
+
+  <h2>States</h2>
+
+  <h2>Variations</h2>
+  <div class="example">
+    <h4>Step</h4>
+    <p>Steps can be divided evenly inside their parent</p>
+    <div class="ui four fluid steps">
+      <div class="ui active step">
+        Shipping
+      </div>
+      <div class="ui disabled step">
+        Billing
+      </div>
+      <div class="ui step">
+        Confirm Order
+      </div>
+      <div class="ui disabled step">
+        Complete
+      </div>
+    </div>
+  </div>
+
+  <h2>Groups</h2>
+
+</div>
+</body>
+
+</html>

node/src/files/components/semantic/collections/grid.css

@@ -215,10 +215,10 @@
 /*----------------------
        "Floated"
 -----------------------*/
-.ui.grid .left.aligned.column {
+.ui.grid .left.floated.column {
   float: left;
 }
-.ui.grid .right.aligned.column {
+.ui.grid .right.floated.column {
   float: right;
 }
 /*----------------------
@@ -269,6 +269,25 @@
   -moz-box-shadow: none;
   box-shadow: none;
 }
+/*----------------------
+  Horizontally Centered
+-----------------------*/
+/* Vertical Centered */
+.ui.left.aligned.grid .column,
+.ui.grid .left.aligned.column,
+.ui.grid > .left.aligned.row .column {
+  text-align: left;
+}
+.ui.center.aligned.grid .column,
+.ui.grid .center.aligned.column,
+.ui.grid > .center.aligned.row .column {
+  text-align: center;
+}
+.ui.right.aligned.grid .column,
+.ui.grid .right.aligned.column,
+.ui.grid > .right.aligned.row .column {
+  text-align: right;
+}
 /*----------------------
   Vertically Centered
 -----------------------*/

node/src/files/components/semantic/elements/step.css

@@ -1,9 +1,9 @@
 .ui.steps {
   display: inline-block;
   font-size: 0px;
-  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15);
-  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15);
-  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15);
+  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
   border-radius: 4px;
@@ -11,15 +11,9 @@
 .ui.steps .step {
   display: inline-block;
   position: relative;
-  padding: 13px 23px 13px 40px;
-  background-color: #F3F3F3;
-  background: -webkit-linear-gradient(top, #ffffff 0%, #efefef 100%);
-  background: -moz-linear-gradient(top, #ffffff 0%, #efefef 100%);
-  background: -o-linear-gradient(top, #ffffff 0%, #efefef 100%);
-  background: -ms-linear-gradient(top, #ffffff 0%, #efefef 100%);
-  background: linear-gradient(top, #ffffff 0%, #efefef 100%);
-  color: #555555;
-  text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.8);
+  padding: 13px 35px 13px 45px;
+  background-color: #FFFFFF;
+  color: #888888;
 }
 .ui.steps .step:after {
   position: absolute;
@@ -28,22 +22,16 @@
   top: 7px;
   right: -16px;
   width: 32px;
-  height: 31px;
-  background-color: #F3F3F3;
-  background: -webkit-linear-gradient(left top, #ffffff 0%, #efefef 100%);
-  background: -moz-linear-gradient(left top, #ffffff 0%, #efefef 100%);
-  background: -o-linear-gradient(left top, #ffffff 0%, #efefef 100%);
-  background: -ms-linear-gradient(left top, #ffffff 0%, #efefef 100%);
-  background: linear-gradient(left top, #ffffff 0%, #efefef 100%);
-  -moz-box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.1), 1px -1px 1px rgba(255, 255, 255, 0.6);
-  -webkit-box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.1), 1px -1px 1px rgba(255, 255, 255, 0.6);
-  box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.1), 1px -1px 1px rgba(255, 255, 255, 0.6);
+  height: 32px;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  border-right: 1px solid rgba(0, 0, 0, 0.1);
+  background-color: #FFFFFF;
   -moz-transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
 }
 .ui.steps .step:first-child {
-  padding-left: 20px;
+  padding-left: 25px;
   -webkit-border-radius: 5px 0px 0px 5px;
   -moz-border-radius: 5px 0px 0px 5px;
   border-radius: 5px 0px 0px 5px;
@@ -131,8 +119,7 @@
              Sizes
 *******************************/
 .ui.steps .step {
-  font-size: 13px;
-  font-weight: bold;
+  font-size: 1rem;
 }
 /*******************************
              States
@@ -199,50 +186,22 @@
 /* Active */
 .ui.steps .active.step {
   cursor: auto;
-  background-color: #009FDA;
-  background: -webkit-linear-gradient(top, #009fda 0%, #00b3f5 100%);
-  background: -moz-linear-gradient(top, #009fda 0%, #00b3f5 100%);
-  background: -o-linear-gradient(top, #009fda 0%, #00b3f5 100%);
-  background: -ms-linear-gradient(top, #009fda 0%, #00b3f5 100%);
-  background: linear-gradient(top, #009fda 0%, #00b3f5 100%);
+  background-color: #555555;
   color: #FFFFFF;
-  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.3);
-  -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.35) inset;
-  -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.35) inset;
-  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.35) inset;
-}
-.ui.steps .active.step:before {
-  position: absolute;
-  top: 7px;
-  left: -16px;
-  content: '';
-  width: 32px;
-  height: 31px;
-  background-color: transparent;
-  background-image: none;
-  -moz-box-shadow: 2px -2px 1px rgba(0, 0, 0, 0.25);
-  -webkit-box-shadow: 2px -2px 1px rgba(0, 0, 0, 0.25);
-  box-shadow: 2px -2px 1px rgba(0, 0, 0, 0.25);
-  -moz-transform: rotate(45deg);
-  -webkit-transform: rotate(45deg);
-  transform: rotate(45deg);
+  font-weight: bold;
 }
 .ui.steps .active.step:first-child:before {
   width: 0px;
   height: 0px;
 }
 .ui.steps .active.step:after {
-  background-color: #009FDA;
-  background: -webkit-linear-gradient(left top, #009fda 0%, #00b3f5 100%);
-  background: -moz-linear-gradient(left top, #009fda 0%, #00b3f5 100%);
-  background: -o-linear-gradient(left top, #009fda 0%, #00b3f5 100%);
-  background: -ms-linear-gradient(left top, #009fda 0%, #00b3f5 100%);
-  background: linear-gradient(left top, #009fda 0%, #00b3f5 100%);
+  background-color: #555555;
+  border-color: #555555;
   -moz-box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.15) inset;
   -webkit-box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.15) inset;
   box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.15) inset;
 }
 /* Disabled */
 .ui.steps .disabled.step {
-  color: #BBBBBB;
+  color: #BFBFBF;
 }

node/src/files/stylesheets/semantic.css

@@ -474,33 +474,36 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */
     opacity 0.3s ease-out
   ;
 }
-#example .icon.example .grid .column:hover {
-  opacity: 1;
-}
 #example .icon.example .column .icon {
   opacity: 1;
   color: #333333;
   display: block;
   margin: 0em auto 0.25em;
   font-size: 2em;
+
   -webkit-transition: 
-    color 0.2s ease-out
+    all 0.2s ease-out
   ;
   -moz-transition: 
-    color 0.2s ease-out
+    all 0.2s ease-out
   ;
   -o-transition: 
-    color 0.2s ease-out
+    all 0.2s ease-out
   ;
   -ms-transition: 
-    color 0.2s ease-out
+    all 0.2s ease-out
   ;
   transition: 
-    color 0.2s ease-out
+    all 0.2s ease-out
   ;
 }
 #example .icon.example .grid .column:hover .icon {
   color: #009FDA;
+  -webkit-transform: scale(1.5);
+  -moz-transform: scale(1.5);
+  -o-transform: scale(1.5);
+  -ms-transform: scale(1.5);
+  transform: scale(1.5);
 }
 #example .another.icon.example {
   border-top: 1px solid rgba(0, 0, 0, 0.1);

node/src/layouts/default.html.eco

@@ -28,6 +28,7 @@
   <link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/elements/button.css">
   <link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/elements/header.css">
   <link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/elements/label.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/elements/step.css">
   <link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/elements/progress.css">
   <link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/elements/divider.css">
   <link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/collections/message.css">

src/collections/grid.less

@@ -283,10 +283,10 @@
        "Floated"
 -----------------------*/
 
-.ui.grid .left.aligned.column {
+.ui.grid .left.floated.column {
   float: left;
 }
-.ui.grid .right.aligned.column {
+.ui.grid .right.floated.column {
   float: right;
 }
 
@@ -352,13 +352,33 @@
   box-shadow: none;
 }
 
+/*----------------------
+  Horizontally Centered
+-----------------------*/
+
+/* Vertical Centered */
+.ui.left.aligned.grid .column,
+.ui.grid .left.aligned.column,
+.ui.grid > .left.aligned.row .column {
+  text-align: left;
+}
+.ui.center.aligned.grid .column,
+.ui.grid .center.aligned.column,
+.ui.grid > .center.aligned.row .column {
+  text-align: center;
+}
+.ui.right.aligned.grid .column,
+.ui.grid .right.aligned.column,
+.ui.grid > .right.aligned.row .column {
+  text-align: right;
+}
+
 
 /*----------------------
   Vertically Centered
 -----------------------*/
 
 /* Vertical Centered */
-
 .ui.top.aligned.grid .column,
 .ui.grid .top.aligned.column,
 .ui.grid > .top.aligned.row .column {

src/elements/step.less

@@ -2,9 +2,9 @@
   display: inline-block;
   font-size: 0px;
 
-  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15);
-  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15);
-  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15);
+  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
 
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
@@ -14,17 +14,11 @@
 .ui.steps .step {
   display: inline-block;
   position: relative;
-  padding: 13px 23px 13px 40px;
+  padding: 13px 35px 13px 45px;
 
-  background-color: #F3F3F3;
-  background: -webkit-linear-gradient(top, #FFFFFF 0%, #EFEFEF 100%);
-  background: -moz-linear-gradient(top, #FFFFFF 0%, #EFEFEF 100%);
-  background: -o-linear-gradient(top, #FFFFFF 0%, #EFEFEF 100%);
-  background: -ms-linear-gradient(top, #FFFFFF 0%, #EFEFEF 100%);
-  background: linear-gradient(top, #FFFFFF 0%, #EFEFEF 100%);
+  background-color: #FFFFFF;
 
-  color: #555555;
-  text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.8);
+  color: #888888;
 } 
 .ui.steps .step:after {
   position: absolute;
@@ -35,27 +29,11 @@
   right: -16px;
 
   width: 32px;
-  height: 31px;
-
-  background-color: #F3F3F3;
-  background: -webkit-linear-gradient(left top, #FFFFFF 0%, #EFEFEF 100%);
-  background: -moz-linear-gradient(left top, #FFFFFF 0%, #EFEFEF 100%);
-  background: -o-linear-gradient(left top, #FFFFFF 0%, #EFEFEF 100%);
-  background: -ms-linear-gradient(left top, #FFFFFF 0%, #EFEFEF 100%);
-  background: linear-gradient(left top, #FFFFFF 0%, #EFEFEF 100%);
+  height: 32px;
 
-  -moz-box-shadow: 
-    1px -1px 1px rgba(0, 0, 0, 0.1),
-    1px -1px 1px rgba(255, 255, 255, 0.6)
-  ;
-  -webkit-box-shadow: 
-    1px -1px 1px rgba(0, 0, 0, 0.1),
-    1px -1px 1px rgba(255, 255, 255, 0.6)
-  ;
-  box-shadow: 
-    1px -1px 1px rgba(0, 0, 0, 0.1),
-    1px -1px 1px rgba(255, 255, 255, 0.6)
-  ;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  border-right: 1px solid rgba(0, 0, 0, 0.1);
+  background-color: #FFFFFF;
 
   -moz-transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
@@ -63,7 +41,7 @@
 }
 
 .ui.steps .step:first-child {
-  padding-left: 20px;
+  padding-left: 25px;
   -webkit-border-radius: 5px 0px 0px 5px;
   -moz-border-radius: 5px 0px 0px 5px;
   border-radius: 5px 0px 0px 5px;
@@ -159,8 +137,7 @@
 *******************************/
 
 .ui.steps .step {
-  font-size: 13px;
-  font-weight: bold;
+  font-size: 1rem;
 }
 
 /*******************************
@@ -238,51 +215,18 @@
 /* Active */
 .ui.steps .active.step {
   cursor: auto;
-  background-color: #009FDA;
-  background: -webkit-linear-gradient(top, #009FDA 0%, #00B3F5 100%);
-  background: -moz-linear-gradient(top, #009FDA 0%, #00B3F5 100%);
-  background: -o-linear-gradient(top, #009FDA 0%, #00B3F5 100%);
-  background: -ms-linear-gradient(top, #009FDA 0%, #00B3F5 100%);
-  background: linear-gradient(top, #009FDA 0%, #00B3F5 100%);
+  background-color: #555555;
   
   color: #FFFFFF;
-  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.3);
-
-  -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.35) inset;
-  -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.35) inset;
-  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.35) inset;
-}
-.ui.steps .active.step:before {
-  position: absolute;
-  top: 7px;
-  left: -16px;
-  content: '';
-
-  width: 32px;
-  height: 31px;
-
-  background-color: transparent;
-  background-image: none;
-
-  -moz-box-shadow: 2px -2px 1px rgba(0, 0, 0, 0.25);
-  -webkit-box-shadow: 2px -2px 1px rgba(0, 0, 0, 0.25);
-  box-shadow: 2px -2px 1px rgba(0, 0, 0, 0.25);
-
-  -moz-transform: rotate(45deg);
-  -webkit-transform: rotate(45deg);
-  transform: rotate(45deg);
+  font-weight: bold;
 }
 .ui.steps .active.step:first-child:before {
   width: 0px;
   height: 0px;
 }
 .ui.steps .active.step:after {
-  background-color: #009FDA;
-  background: -webkit-linear-gradient(left top, #009FDA 0%, #00B3F5 100%);
-  background: -moz-linear-gradient(left top, #009FDA 0%, #00B3F5 100%);
-  background: -o-linear-gradient(left top, #009FDA 0%, #00B3F5 100%);
-  background: -ms-linear-gradient(left top, #009FDA 0%, #00B3F5 100%);
-  background: linear-gradient(left top, #009FDA 0%, #00B3F5 100%);
+  background-color: #555555;
+  border-color: #555555;
 
   -moz-box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.15) inset;
   -webkit-box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.15) inset;
@@ -291,5 +235,5 @@
 
 /* Disabled */
 .ui.steps .disabled.step {
-  color: #BBBBBB;
+  color: #BFBFBF;
 }