iteration on icons

RELEASE NOTES.md

@@ -8,4 +8,9 @@
 * Renamed UI Item Grid variation to standard item prototype to avoid conflict with ui grid (may 12, 2013)
 * Renamed "grid" variation of table to "celled"  to fix conflict with ui grid (may 10, 2013)
 * Buttons are now grey by default
-* Header styles have changed significantly
+* Header styles have changed significantly
+
+* Icon changes
+basket is now "cart"
+th-list, th-alt, th-large is now, layout list, layout grid, layout block
+hyphenated icons have become spaced classes

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.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.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}@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>.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.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/minified/elements/header.min.css

@@ -1 +1 @@
-.ui.header{line-height:1.33;font-size:1.33em;font-weight:700;padding:0;border:0}.ui.header:first-child{margin-top:0}.ui.header+p{margin-top:0}h1.ui.header{min-height:1rem;margin:2rem 0rem 1.5rem;line-height:1.33rem;font-size:2rem}h2.ui.header{margin:1.5rem 0rem 1rem;line-height:1.33rem;font-size:1.5rem}h3.ui.header{margin:1.3rem 0rem 1rem;line-height:1.33rem;font-size:1.33rem}h4.ui.header{margin:.75rem 0rem .3rem;line-height:1.33rem;font-size:1.1rem}h5.ui.header{margin:0rem 0rem .2rem;line-height:1.2rem;font-size:1rem}.huge.ui.header{min-height:1em;line-height:1.33em;font-size:2em}.large.ui.header{line-height:1.33em;font-size:1.5em}.medium.ui.header{margin-bottom:.25em;line-height:1.33em;font-size:1.25em}.small.ui.header{margin-bottom:.25em;line-height:1.33em;font-size:1.1em}.tiny.ui.header{margin-bottom:0;line-height:1.2em;font-size:1em}.ui.disabled.header{opacity:.5}.ui.inverted.header{background-color:#222;padding:.7em 1em;color:#FFF}.ui.blue.header{color:#6ECFF5!important}.ui.black.header{color:#5C6166!important}.ui.green.header{color:#A1CF64!important}.ui.red.header{color:#EF4D6D!important}.ui.purple.header{color:#564F8A!important}.ui.teal.header{color:#00B5AD!important}.ui.inverted.black.header{background-color:#5C6166!important;color:#FFF!important}.ui.inverted.blue.header{background-color:#6ECFF5!important;color:#FFF!important}.ui.inverted.green.header{background-color:#A1CF64!important;color:#FFF!important}.ui.inverted.red.header{background-color:#EF4D6D!important;color:#FFF!important}.ui.inverted.purple.header{background-color:#564F8A!important;color:#FFF!important}.ui.inverted.teal.header{background-color:#00B5AD!important;color:#FFF!important}.ui.left.aligned.header{text-align:left}.ui.right.aligned.header{text-align:right}.ui.center.aligned.header{text-align:center}.ui.floated.header,.ui.left.floated.header{float:left}.ui.right.floated.header{float:right}.ui.attached.header{padding:.7em 1rem;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1)}.ui.top.attached.header{margin-bottom:0;-webkit-border-radius:.3125em .3125em 0 0;-moz-border-radius:.3125em .3125em 0 0;border-radius:.3125em .3125em 0 0}.ui.bottom.attached.header{margin-top:0;-webkit-border-radius:0 0 .3125em .3125em;-moz-border-radius:0 0 .3125em .3125em;border-radius:0 0 .3125em .3125em}.ui.header.icon{display:inline-block;text-align:center}.ui.header.icon .icon{display:block;font-size:4em;width:auto;margin:0rem auto 2rem;padding:0}
+.ui.header{line-height:1.33;font-size:1.33em;font-weight:700;padding:0;border:0}.ui.header:first-child{margin-top:0}.ui.header+p{margin-top:0}h1.ui.header{min-height:1rem;margin:2rem 0rem 1.5rem;line-height:1.33;font-size:2rem}h2.ui.header{margin:1.5rem 0rem 1rem;line-height:1.33;font-size:1.5rem}h3.ui.header{margin:1.3rem 0rem 1rem;line-height:1.33;font-size:1.33rem}h4.ui.header{margin:.75rem 0rem .3rem;line-height:1.33;font-size:1.1rem}h5.ui.header{margin:0rem 0rem .2rem;line-height:1.2;font-size:1rem}.huge.ui.header{min-height:1em;line-height:1.33em;font-size:2em}.large.ui.header{line-height:1.33em;font-size:1.5em}.medium.ui.header{margin-bottom:.25em;line-height:1.33em;font-size:1.25em}.small.ui.header{margin-bottom:.25em;line-height:1.33em;font-size:1.1em}.tiny.ui.header{margin-bottom:0;line-height:1.2em;font-size:1em}.ui.disabled.header{opacity:.5}.ui.inverted.header{background-color:#222;padding:.7em 1em;color:#FFF}.ui.blue.header{color:#6ECFF5!important}.ui.black.header{color:#5C6166!important}.ui.green.header{color:#A1CF64!important}.ui.red.header{color:#EF4D6D!important}.ui.purple.header{color:#564F8A!important}.ui.teal.header{color:#00B5AD!important}.ui.inverted.black.header{background-color:#5C6166!important;color:#FFF!important}.ui.inverted.blue.header{background-color:#6ECFF5!important;color:#FFF!important}.ui.inverted.green.header{background-color:#A1CF64!important;color:#FFF!important}.ui.inverted.red.header{background-color:#EF4D6D!important;color:#FFF!important}.ui.inverted.purple.header{background-color:#564F8A!important;color:#FFF!important}.ui.inverted.teal.header{background-color:#00B5AD!important;color:#FFF!important}.ui.left.aligned.header{text-align:left}.ui.right.aligned.header{text-align:right}.ui.center.aligned.header{text-align:center}.ui.floated.header,.ui.left.floated.header{float:left}.ui.right.floated.header{float:right}.ui.attached.header{padding:.7em 1rem;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1)}.ui.top.attached.header{margin-bottom:0;-webkit-border-radius:.3125em .3125em 0 0;-moz-border-radius:.3125em .3125em 0 0;border-radius:.3125em .3125em 0 0}.ui.bottom.attached.header{margin-top:0;-webkit-border-radius:0 0 .3125em .3125em;-moz-border-radius:0 0 .3125em .3125em;border-radius:0 0 .3125em .3125em}.ui.header.icon{display:inline-block;text-align:center}.ui.header.icon .icon{display:block;font-size:4em;width:auto;margin:0rem auto 2rem;padding:0}

build/uncompressed/collections/grid.css

@@ -47,7 +47,7 @@
   vertical-align: top;
 }
 /*-------------------
-         Rows
+        Rows
 --------------------*/
 .ui.grid > .row {
   display: block;
@@ -68,6 +68,13 @@
 .ui.grid > .row > .column > img {
   max-width: 100%;
 }
+/*-------------------
+    Grids in Grids
+--------------------*/
+.ui.grid .column > .grid {
+  margin-left: -1.333%;
+  margin-right: -1.333%;
+}
 /*******************************
            Variations
 *******************************/
@@ -236,6 +243,13 @@
 .ui.grid .equal.row .column {
   display: table-cell;
 }
+/*----------------------
+       Fitted
+-----------------------*/
+.ui.fitted.grid {
+  margin-left: -1.333%;
+  margin-right: -1.333%;
+}
 /*-------------------
        Folding
 --------------------*/

build/uncompressed/elements/header.css

@@ -33,27 +33,27 @@
 h1.ui.header {
   min-height: 1rem;
   margin: 2rem 0rem 1.5rem;
-  line-height: 1.33rem;
+  line-height: 1.33;
   font-size: 2rem;
 }
 h2.ui.header {
   margin: 1.5rem 0rem 1rem;
-  line-height: 1.33rem;
+  line-height: 1.33;
   font-size: 1.5rem;
 }
 h3.ui.header {
   margin: 1.3rem 0rem 1rem;
-  line-height: 1.33rem;
+  line-height: 1.33;
   font-size: 1.33rem;
 }
 h4.ui.header {
   margin: 0.75rem 0rem 0.3rem;
-  line-height: 1.33rem;
+  line-height: 1.33;
   font-size: 1.1rem;
 }
 h5.ui.header {
   margin: 0rem 0rem 0.2rem;
-  line-height: 1.2rem;
+  line-height: 1.2;
   font-size: 1rem;
 }
 /*--------------

build/uncompressed/elements/icons.css

@@ -1,5 +1,16 @@
+/*
+ * # Semantic Icons - Flat
+ * http://github.com/quirkyinc/semantic
+ *
+ *
+ * Copyright 2013 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ * Released: May 17 2013
+ */
 /*******************************
-           UI Icon
+             Icon
 *******************************/
 @font-face {
   font-family: 'Icons';
@@ -9,6 +20,7 @@
   font-style: normal;
 }
 i.icon {
+  font-family: 'Icons';
   display: inline-block;
   width: 1em;
   height: 1em;
@@ -19,64 +31,157 @@ i.icon {
   text-decoration: inherit;
   text-align: center;
   vertical-align: baseline;
+  opacity: 0.75;
+  speak: none;
   -webkit-font-smoothing: antialiased;
   -moz-font-smoothing: antialiased;
   font-smoothing: antialiased;
 }
-i.icon:before {
-  font-family: 'Icons';
-  speak: none;
-  opacity: 0.75;
-}
-/* manual corrections */
-i.icon.cloud,
-i.icon.code,
-i.icon.terminal,
-i.icon.twitter-bird,
-i.icon.dollar {
-  margin-left: 0em;
-  padding-right: 0.2em;
-}
-i.icon.left,
-i.icon.left-open,
-i.icon.left-dir {
-  width: 1em;
-  margin: 0em 0.5em 0em 0em;
-}
-i.icon.up,
-i.icon.up-open,
-i.icon.up-dir,
-i.icon.down,
-i.icon.down-open,
-i.icon.down-dir,
-i.icon.right,
-i.icon.right-open,
-i.icon.right-dir {
-  width: 1em;
-  margin: 0em 0em 0em 0.1em;
-}
-/* circular icon easier to notice misaligned */
-i.icon.clock {
-  margin-top: -0.05em;
+/* icons available */
+i.icon.circle.attention:before {
+  content: '\2757';
 }
-/* aliases for convenience */
-i.icon.close:before {
-  content: '\e80d';
+/* '❗' */
+i.icon.circle.cancel:before {
+  content: '\2716';
 }
-/* '' */
-i.icon.help:before {
+/* '✖' */
+i.icon.circle.help:before {
   content: '\e704';
 }
 /* '' */
-i.icon.info:before {
+i.icon.circle.info:before {
   content: '\e705';
 }
 /* '' */
-i.icon.error:before {
-  content: '\e80d';
+i.icon.circle.plus:before {
+  content: '\2795';
 }
-/* '' */
-/* icons available */
+/* '➕' */
+i.icon.chart:before {
+  content: '📈';
+}
+/* '\1f4c8' */
+i.icon.chart.bar:before {
+  content: '📊';
+}
+/* '\1f4ca' */
+i.icon.chart.pie:before {
+  content: '\e7a2';
+}
+/* '' */
+i.icon.resize.full:before {
+  content: '\e744';
+}
+/* '' */
+i.icon.resize.horizontal:before {
+  content: '\2b0d';
+}
+/* '⬍' */
+i.icon.resize.small:before {
+  content: '\e746';
+}
+/* '' */
+i.icon.resize.vertical:before {
+  content: '\2b0c';
+}
+/* '⬌' */
+i.icon.down:before {
+  content: '\2193';
+}
+/* '↓' */
+i.icon.down.triangle:before {
+  content: '\25be';
+}
+/* '▾' */
+i.icon.down.arrow:before {
+  content: '\e75c';
+}
+/* '' */
+i.icon.left:before {
+  content: '\2190';
+}
+/* '←' */
+i.icon.left.triangle:before {
+  content: '\25c2';
+}
+/* '◂' */
+i.icon.left.arrow:before {
+  content: '\e75d';
+}
+/* '' */
+i.icon.right:before {
+  content: '\2192';
+}
+/* '→' */
+i.icon.right.triangle:before {
+  content: '\25b8';
+}
+/* '▸' */
+i.icon.right.arrow:before {
+  content: '\e75e';
+}
+/* '' */
+i.icon.up:before {
+  content: '\2191';
+}
+/* '↑' */
+i.icon.up.triangle:before {
+  content: '\25b4';
+}
+/* '▴' */
+i.icon.up.arrow:before {
+  content: '\e75f';
+}
+/* '' */
+i.icon.folder:before {
+  content: '\e810';
+}
+/* '' */
+i.icon.open.folder:before {
+  content: '📂';
+}
+/* '\1f4c2' */
+i.icon.globe:before {
+  content: '𝌍';
+}
+/* '\1d30d' */
+i.icon.desk.globe:before {
+  content: '🌐';
+}
+/* '\1f310' */
+i.icon.star:before {
+  content: '\e801';
+}
+/* '' */
+i.icon.star.empty:before {
+  content: '\e800';
+}
+/* '' */
+i.icon.star.half:before {
+  content: '\e701';
+}
+/* '' */
+i.icon.lock:before {
+  content: '🔒';
+}
+/* '\1f512' */
+i.icon.lock.open:before {
+  content: '🔓';
+}
+/* '\1f513' */
+i.icon.layout.grid:before {
+  content: '\e80c';
+}
+/* '' */
+i.icon.layout.block:before {
+  content: '\e708';
+}
+/* '' */
+i.icon.layout.list:before {
+  content: '\e80b';
+}
+/* '' */
 i.icon.asterisk:before {
   content: '\2731';
 }
@@ -89,10 +194,6 @@ i.icon.attach:before {
   content: '📎';
 }
 /* '\1f4ce' */
-i.icon.attention-circle:before {
-  content: '\2757';
-}
-/* '❗' */
 i.icon.attention:before {
   content: '\26a0';
 }
@@ -117,7 +218,7 @@ i.icon.block:before {
   content: '🚫';
 }
 /* '\1f6ab' */
-i.icon.book-open:before {
+i.icon.book:before {
   content: '📖';
 }
 /* '\1f4d6' */
@@ -129,34 +230,18 @@ i.icon.calendar:before {
   content: '📅';
 }
 /* '\1f4c5' */
-i.icon.cancel-alt:before {
+i.icon.cancel:before {
   content: '\e80d';
 }
 /* '' */
-i.icon.cancel-circle:before {
-  content: '\2716';
-}
-/* '✖' */
 i.icon.cancel:before {
   content: '\2715';
 }
 /* '✕' */
-i.icon.ccw:before {
+i.icon.rewind:before {
   content: '\27f2';
 }
 /* '⟲' */
-i.icon.chart-bar:before {
-  content: '📊';
-}
-/* '\1f4ca' */
-i.icon.chart-pie:before {
-  content: '\e7a2';
-}
-/* '' */
-i.icon.chart:before {
-  content: '📈';
-}
-/* '\1f4c8' */
 i.icon.chat:before {
   content: '\e720';
 }
@@ -177,23 +262,19 @@ i.icon.code:before {
   content: '\e714';
 }
 /* '' */
-i.icon.cog-alt:before {
+i.icon.setting:before {
   content: '\26ef';
 }
 /* '⛯' */
-i.icon.cog:before {
+i.icon.settings:before {
   content: '\2699';
 }
 /* '⚙' */
-i.icon.comment-alt:before {
+i.icon.comment:before {
   content: '\e802';
 }
 /* '' */
-i.icon.comment:before {
-  content: '\e718';
-}
-/* '' */
-i.icon.cw:before {
+i.icon.clockwise:before {
   content: '\27f3';
 }
 /* '⟳' */
@@ -213,18 +294,6 @@ i.icon.dollar:before {
   content: '💵';
 }
 /* '\1f4b5' */
-i.icon.down-dir:before {
-  content: '\25be';
-}
-/* '▾' */
-i.icon.down-open:before {
-  content: '\e75c';
-}
-/* '' */
-i.icon.down:before {
-  content: '\2193';
-}
-/* '↓' */
 i.icon.easel:before {
   content: '\e7b5';
 }
@@ -245,15 +314,15 @@ i.icon.eye:before {
   content: '\e80f';
 }
 /* '' */
-i.icon.eye-off:before {
+i.icon.hidden.eye:before {
   content: '\e70b';
 }
 /* '' */
-i.icon.facebook-rect:before {
+i.icon.facebook:before {
   content: '\f301';
 }
 /* '' */
-i.icon.fast-fw:before {
+i.icon.fast-forward:before {
   content: '\e804';
 }
 /* '' */
@@ -269,11 +338,7 @@ i.icon.flash:before {
   content: '\26a1';
 }
 /* '⚡' */
-i.icon.flash-alt:before {
-  content: '\e815';
-}
-/* '' */
-i.icon.flask:before {
+i.icon.lab:before {
   content: '\68';
 }
 /* 'h' */
@@ -281,14 +346,6 @@ i.icon.flight:before {
   content: '\2708';
 }
 /* '✈' */
-i.icon.folder-open:before {
-  content: '📂';
-}
-/* '\1f4c2' */
-i.icon.folder:before {
-  content: '\e810';
-}
-/* '' */
 i.icon.forward:before {
   content: '\27a6';
 }
@@ -305,14 +362,6 @@ i.icon.globe:before {
   content: '\e817';
 }
 /* '' */
-i.icon.globe-alt:before {
-  content: '🌐';
-}
-/* '\1f310' */
-i.icon.globe:before {
-  content: '𝌍';
-}
-/* '\1d30d' */
 i.icon.headphones:before {
   content: '🎧';
 }
@@ -325,10 +374,6 @@ i.icon.heart:before {
   content: '\2665';
 }
 /* '♥' */
-i.icon.help-circle:before {
-  content: '\e704';
-}
-/* '' */
 i.icon.question:before {
   content: '\2753';
 }
@@ -341,10 +386,6 @@ i.icon.home:before {
   content: '\2302';
 }
 /* '⌂' */
-i.icon.info-circle:before {
-  content: '\e705';
-}
-/* '' */
 i.icon.i-letter:before {
   content: '\2139';
 }
@@ -353,18 +394,6 @@ i.icon.lamp:before {
   content: '💡';
 }
 /* '\1f4a1' */
-i.icon.left-dir:before {
-  content: '\25c2';
-}
-/* '◂' */
-i.icon.left-open:before {
-  content: '\e75d';
-}
-/* '' */
-i.icon.left:before {
-  content: '\2190';
-}
-/* '←' */
 i.icon.link:before {
   content: '🔗';
 }
@@ -373,22 +402,10 @@ i.icon.list:before {
   content: '\e782';
 }
 /* '' */
-i.icon.location-alt:before {
-  content: '\e811';
-}
-/* '' */
 i.icon.location:before {
   content: '\e724';
 }
 /* '' */
-i.icon.lock-open:before {
-  content: '🔓';
-}
-/* '\1f513' */
-i.icon.lock:before {
-  content: '🔒';
-}
-/* '\1f512' */
 i.icon.mail:before {
   content: '\2709';
 }
@@ -413,7 +430,7 @@ i.icon.pause:before {
   content: '\e808';
 }
 /* '' */
-i.icon.picture-alt:before {
+i.icon.pictures:before {
   content: '\e812';
 }
 /* '' */
@@ -429,10 +446,6 @@ i.icon.play:before {
   content: '\e809';
 }
 /* '' */
-i.icon.plus-circle:before {
-  content: '\2795';
-}
-/* '➕' */
 i.icon.plus:before {
   content: '\2b';
 }
@@ -441,34 +454,6 @@ i.icon.print:before {
   content: '\e716';
 }
 /* '' */
-i.icon.resize-full:before {
-  content: '\e744';
-}
-/* '' */
-i.icon.resize-horizontal:before {
-  content: '\2b0d';
-}
-/* '⬍' */
-i.icon.resize-small:before {
-  content: '\e746';
-}
-/* '' */
-i.icon.resize-vertical:before {
-  content: '\2b0c';
-}
-/* '⬌' */
-i.icon.right-dir:before {
-  content: '\25b8';
-}
-/* '▸' */
-i.icon.right-open:before {
-  content: '\e75e';
-}
-/* '' */
-i.icon.right:before {
-  content: '\2192';
-}
-/* '→' */
 i.icon.rss:before {
   content: '\e73a';
 }
@@ -481,18 +466,6 @@ i.icon.shuffle:before {
   content: '\e803';
 }
 /* '' */
-i.icon.star:before {
-  content: '\e801';
-}
-/* '' */
-i.icon.star-empty:before {
-  content: '\e800';
-}
-/* '' */
-i.icon.star-half:before {
-  content: '\e701';
-}
-/* '' */
 i.icon.stop:before {
   content: '\e807';
 }
@@ -509,18 +482,6 @@ i.icon.terminal:before {
   content: '\e7ac';
 }
 /* '' */
-i.icon.th-alt:before {
-  content: '\e80c';
-}
-/* '' */
-i.icon.th-large:before {
-  content: '\e708';
-}
-/* '' */
-i.icon.th-list:before {
-  content: '\e80b';
-}
-/* '' */
 i.icon.thumbs-down:before {
   content: '👎';
 }
@@ -561,18 +522,6 @@ i.icon.twitter-bird:before {
   content: '\f303';
 }
 /* '' */
-i.icon.up-dir:before {
-  content: '\25b4';
-}
-/* '▴' */
-i.icon.up-open:before {
-  content: '\e75f';
-}
-/* '' */
-i.icon.up:before {
-  content: '\2191';
-}
-/* '↑' */
 i.icon.upload-cloud:before {
   content: '\e711';
 }
@@ -605,3 +554,122 @@ i.icon.zoom-out:before {
   content: '\e751';
 }
 /* '' */
+/*--------------
+   Spacing Fix
+---------------*/
+i.icon.cloud,
+i.icon.code,
+i.icon.terminal,
+i.icon.twitter-bird,
+i.icon.dollar {
+  margin-left: 0em;
+  padding-right: 0.2em;
+}
+i.icon.left,
+i.icon.left-open,
+i.icon.left-dir {
+  width: 1em;
+  margin: 0em 0.5em 0em 0em;
+}
+i.icon.up,
+i.icon.up-open,
+i.icon.up-dir,
+i.icon.down,
+i.icon.down-open,
+i.icon.down-dir,
+i.icon.right,
+i.icon.right-open,
+i.icon.right-dir {
+  width: 1em;
+  margin: 0em 0em 0em 0.1em;
+}
+i.icon.clock {
+  margin-top: -0.05em;
+}
+/*--------------
+     Aliases
+---------------*/
+/* aliases for convenience */
+i.icon.close:before {
+  content: '\e80d';
+}
+/* '' */
+i.icon.help:before {
+  content: '\e704';
+}
+/* '' */
+i.icon.info:before {
+  content: '\e705';
+}
+/* '' */
+i.icon.error:before {
+  content: '\e80d';
+}
+/* '' */
+/*******************************
+             States
+*******************************/
+i.icon.disabled {
+  opacity: 0.3;
+}
+/*******************************
+           Variations
+*******************************/
+i.strong.icon {
+  opacity: 1;
+}
+/*-------------------
+      Inverted 
+--------------------*/
+i.inverted.icon {
+  background-color: #222222;
+  color: #FFFFFF;
+}
+/*-------------------
+       Colors
+--------------------*/
+i.blue.icon {
+  color: #6ECFF5 !important;
+}
+i.black.icon {
+  color: #5C6166 !important;
+}
+i.green.icon {
+  color: #A1CF64 !important;
+}
+i.red.icon {
+  color: #EF4D6D !important;
+}
+i.purple.icon {
+  color: #564F8A !important;
+}
+i.teal.icon {
+  color: #00B5AD !important;
+}
+/*-------------------
+   Inverted Colors
+--------------------*/
+i.inverted.black.icon {
+  background-color: #5C6166 !important;
+  color: #FFFFFF !important;
+}
+i.inverted.blue.icon {
+  background-color: #6ECFF5 !important;
+  color: #FFFFFF !important;
+}
+i.inverted.green.icon {
+  background-color: #A1CF64 !important;
+  color: #FFFFFF !important;
+}
+i.inverted.red.icon {
+  background-color: #EF4D6D !important;
+  color: #FFFFFF !important;
+}
+i.inverted.purple.icon {
+  background-color: #564F8A !important;
+  color: #FFFFFF !important;
+}
+i.inverted.teal.icon {
+  background-color: #00B5AD !important;
+  color: #FFFFFF !important;
+}

node/src/documents/elements/icon.html

@@ -0,0 +1,191 @@
+---
+layout : 'default'
+css    : 'icon'
+
+title  : 'Icon'
+type   : 'UI Element'
+---
+<div class="segment">
+  <div class="container">
+  <h1>Icon</h1>
+  <p>An icon is a glyph used to represent another concept more succinctly.</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> 
+    </div>
+  </div>
+  
+  <h2>Standard</h2>
+
+    
+    <h4>Icon Set</h4>    
+    <div class="ui ignored info message">
+      Icons serve a very similar function to text in a page. In semantic icons receive a special tag "i" which allow for an abbreviated markup whenn sitting alongside text.
+    </div>
+  
+  <div class="another icon example">
+    <div class="ui eight column grid">
+      <div class="column"><i class="icon home"></i> home</div>
+      <div class="column"><i class="icon asterisk"></i> asterisk</div>
+      <div class="column"><i class="icon at"></i> at</div>
+      <div class="column"><i class="icon attach"></i> attach</div>
+      <div class="column"><i class="icon attention circle"></i> attention circle</div>
+      <div class="column"><i class="icon attention"></i> attention</div>
+      <div class="column"><i class="icon award"></i> award</div>
+      <div class="column"><i class="icon barcode"></i> barcode</div>
+      <div class="column"><i class="icon basket"></i> basket</div>
+      <div class="column"><i class="icon block"></i> block</div>
+      <div class="column"><i class="icon book"></i> book</div>
+      <div class="column"><i class="icon bookmark"></i> bookmark</div>
+      <div class="column"><i class="icon calendar"></i> calendar</div>
+      <div class="column"><i class="icon cancel"></i> cancel</div>
+      <div class="column"><i class="icon cancel circle"></i> cancel circle</div>
+      <div class="column"><i class="icon cancel"></i> cancel</div>
+      <div class="column"><i class="icon rewind"></i> rewind</div>
+      <div class="column"><i class="icon bar chart"></i> bar chart</div>
+      <div class="column"><i class="icon pie chart"></i> pie chart</div>
+      <div class="column"><i class="icon chart"></i> chart</div>
+      <div class="column"><i class="icon chat"></i> chat</div>
+      <div class="column"><i class="icon check"></i> check</div>
+      <div class="column"><i class="icon clock"></i> clock</div>
+      <div class="column"><i class="icon cloud"></i> cloud</div>
+    </div>
+  </div>
+  <div class="another icon example">
+    <div class="ui eight column grid">
+      <div class="column"><i class="icon setting"></i> setting</div>
+      <div class="column"><i class="icon settings"></i> settings</div>
+      <div class="column"><i class="icon comment"></i> comment</div>
+      <div class="column"><i class="icon clockwise"></i> clockwise</div>
+      <div class="column"><i class="icon direction"></i> direction</div>
+      <div class="column"><i class="icon doc"></i> doc</div>
+      <div class="column"><i class="icon docs"></i> docs</div>
+      <div class="column"><i class="icon dollar"></i> dollar</div>
+      <div class="column"><i class="icon down triangle"></i> down triangle</div>
+      <div class="column"><i class="icon down arrow"></i> down arrow</div>
+      <div class="column"><i class="icon down"></i> down arrow</div>
+      <div class="column"><i class="icon easel"></i> easel</div>
+      <div class="column"><i class="icon edit"></i> edit</div>
+      <div class="column"><i class="icon eject"></i> eject</div>
+      <div class="column"><i class="icon export"></i> export</div>
+      <div class="column"><i class="icon eye"></i> eye</div>
+      <div class="column"><i class="icon hidden eye"></i> hidden eye</div>
+      <div class="column"><i class="icon facebook"></i> facebook</div>
+      <div class="column"><i class="icon fast-forward"></i> fast-fw</div>
+      <div class="column"><i class="icon fire"></i> fire</div>
+      <div class="column"><i class="icon flag"></i> flag</div>
+      <div class="column"><i class="icon flash"></i> flash</div>
+      <div class="column"><i class="icon flight"></i> flight</div>
+      <div class="column"><i class="icon folder"></i> folder</div>
+    </div>
+  </div>
+  <div class="another icon example">
+    <div class="ui eight column grid">
+      <div class="column"><i class="icon open folder"></i> open folder</div>
+      <div class="column"><i class="icon forward"></i> forward</div>
+      <div class="column"><i class="icon gift"></i> gift</div>
+      <div class="column"><i class="icon github"></i> github</div>
+      <div class="column"><i class="icon globe"></i> globe</div>
+      <div class="column"><i class="icon globe"></i> globe-alt</div>
+      <div class="column"><i class="icon desk globe"></i> desk globe</div>
+      <div class="column"><i class="icon headphones"></i> headphones</div>
+      <div class="column"><i class="icon empty heart"></i> empty heart</div>
+      <div class="column"><i class="icon heart"></i> heart</div>
+      <div class="column"><i class="icon help circle"></i> help circle</div>
+      <div class="column"><i class="icon help"></i> help</div>
+      <div class="column"><i class="icon home-alt"></i> home-alt</div>
+      <div class="column"><i class="icon home"></i> home</div>
+      <div class="column"><i class="icon info circle"></i> info circle</div>
+      <div class="column"><i class="icon info"></i> info</div>
+      <div class="column"><i class="icon lab"></i> lab</div>
+      <div class="column"><i class="icon lamp"></i> lamp</div>
+      <div class="column"><i class="icon left triangle"></i> left triangle</div>
+      <div class="column"><i class="icon left arrow"></i> left open</div>
+      <div class="column"><i class="icon left"></i> left</div>
+      <div class="column"><i class="icon link"></i> link</div>
+      <div class="column"><i class="icon list"></i> list</div>
+      <div class="column"><i class="icon location"></i> location</div>
+      <div class="column"><i class="icon open lock"></i> open lock</div>
+      <div class="column"><i class="icon lock"></i> lock</div>
+      <div class="column"><i class="icon mail"></i> mail</div>
+      <div class="column"><i class="icon mic"></i> mic</div>
+      <div class="column"><i class="icon minus"></i> minus</div>
+      <div class="column"><i class="icon money"></i> money</div>
+      <div class="column"><i class="icon off"></i> off</div>
+    </div>
+  </div>
+  <div class="another icon example">
+    <div class="ui eight column grid">
+      <div class="column"><i class="icon pause"></i> pause</div>
+      <div class="column"><i class="icon picture"></i> picture</div>
+      <div class="column"><i class="icon pictures"></i> pictures</div>
+      <div class="column"><i class="icon pin"></i> pin</div>
+      <div class="column"><i class="icon play-alt"></i> play-alt</div>
+      <div class="column"><i class="icon plus circle"></i> plus circle</div>
+      <div class="column"><i class="icon plus"></i> plus</div>
+      <div class="column"><i class="icon print"></i> print</div>
+      <div class="column"><i class="icon resize full"></i> resize full</div>
+      <div class="column"><i class="icon resize horizontal"></i> resize horizontal</div>
+      <div class="column"><i class="icon resize small"></i> resize small</div>
+      <div class="column"><i class="icon resize vertical"></i> resize vertical</div>
+      <div class="column"><i class="icon right"></i> right</div>
+      <div class="column"><i class="icon right triangle"></i> right triangle</div>
+      <div class="column"><i class="icon right arrow"></i> right arrow</div>
+      <div class="column"><i class="icon rss"></i> rss</div>
+      <div class="column"><i class="icon search"></i> search</div>
+      <div class="column"><i class="icon shuffle-alt"></i> shuffle-alt</div>
+      <div class="column"><i class="icon star"></i> star</div>
+      <div class="column"><i class="icon empty star"></i> empty star</div>
+      <div class="column"><i class="icon half star"></i> half star</div>
+      <div class="column"><i class="icon stop"></i> stop-alt</div>
+      <div class="column"><i class="icon tag"></i> tag-alt</div>
+      <div class="column"><i class="icon tags"></i> tags</div>
+      <div class="column"><i class="icon terminal"></i> terminal</div>
+      <div class="column"><i class="icon grid layout"></i> grid layout</div>
+      <div class="column"><i class="icon block layout"></i> block layout</div>
+      <div class="column"><i class="icon list layout"></i> list layout</div>
+      <div class="column"><i class="icon thumbs-down"></i> thumbs-down</div>
+      <div class="column"><i class="icon thumbs-up"></i> thumbs-up</div>
+      <div class="column"><i class="icon tint"></i> tint</div>
+      <div class="column"><i class="icon to-end-alt"></i> to-end-alt</div>
+    </div>
+  </div>
+  <div class="another icon example">
+    <div class="ui eight column grid">
+      <div class="column"><i class="icon to-start-alt"></i> to-start-alt</div>
+      <div class="column"><i class="icon to-start-alt"></i> to-start-alt</div>
+      <div class="column"><i class="icon top-list"></i> top-list</div>
+      <div class="column"><i class="icon trash"></i> trash</div>
+      <div class="column"><i class="icon twitter-bird"></i> twitter-bird</div>
+      <div class="column"><i class="icon up"></i> up</div>
+      <div class="column"><i class="icon up triangle"></i> up triangle</div>
+      <div class="column"><i class="icon up arrow"></i> up arrow</div>
+      <div class="column"><i class="icon upload-cloud"></i> upload-cloud</div>
+      <div class="column"><i class="icon user-add"></i> user-add</div>
+      <div class="column"><i class="icon user"></i> user</div>
+      <div class="column"><i class="icon users-alt"></i> users-alt</div>
+      <div class="column"><i class="icon users"></i> users</div>
+      <div class="column"><i class="icon vcard"></i> vcard</div>
+      <div class="column"><i class="icon zoom-in"></i> zoom-in</div>
+      <div class="column"><i class="icon zoom-out"></i> zoom-out</div>
+    </div>
+  </div>
+  
+  <h2>States</h2>
+  
+  <div class="example">
+    <h4>Disabled</h4>
+    <p>A icon can show that it is disabled</p>
+    <i class="disabled users icon"></i>
+  </div>
+  
+  <h2>Variations</h2>
+  
+  
+</div>

node/src/documents/index.html

@@ -8,7 +8,7 @@ type   : 'Semantic'
 <div class="masthead segment">
   <div class="container">
     <h1><i class="icon th-alt"></i>Semantic UI</h1>
-    <h2><strike>HTML</strike> UI is the language of the web.</h2>
+    <h2><strike>HTML</strike> User interfaces are the DNA of the web.</h2>
     <p>Semantic empowers designers and developers by creating a shared vocabulary for user interfaces.</p>
     
     <div class="ui large black compact menu">
@@ -24,21 +24,21 @@ type   : 'Semantic'
     <div class="column"> 
       <h1 class="ui icon header">
         <i class="icon users"></i> 
-        Newbie Friendly
+        Easy to Learn
       </h1>
-      <p>Code written in semantic is designed to be human readable, so front end code can be understood by anyone.</p>
+      <p>Code written in Semantic is based on natural language, making it easier to understand and learn.</p>
     </div>
     <div class="column">
       <h1 class="ui icon header">
         <i class="icon easel"></i> 
-        Exchange UI
+        Portable UI
       </h1>
       <p>Semantic defines an exchange format for UI, so swapping out interface designs doesn't mean rewriting your site's codebase.</p>
     </div>
     <div class="column">
       <h1 class="ui icon header">
         <i class="icon terminal"></i> 
-        Developer
+        Tools for Developers
       </h1>
       <p>Semantic UI Modules all come with debugging and performance tools to help make sure they perform lightning fast.</p>
     </div>

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

@@ -47,7 +47,7 @@
   vertical-align: top;
 }
 /*-------------------
-         Rows
+        Rows
 --------------------*/
 .ui.grid > .row {
   display: block;
@@ -68,6 +68,13 @@
 .ui.grid > .row > .column > img {
   max-width: 100%;
 }
+/*-------------------
+    Grids in Grids
+--------------------*/
+.ui.grid .column > .grid {
+  margin-left: -1.333%;
+  margin-right: -1.333%;
+}
 /*******************************
            Variations
 *******************************/
@@ -236,6 +243,13 @@
 .ui.grid .equal.row .column {
   display: table-cell;
 }
+/*----------------------
+       Fitted
+-----------------------*/
+.ui.fitted.grid {
+  margin-left: -1.333%;
+  margin-right: -1.333%;
+}
 /*-------------------
        Folding
 --------------------*/

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

@@ -33,27 +33,27 @@
 h1.ui.header {
   min-height: 1rem;
   margin: 2rem 0rem 1.5rem;
-  line-height: 1.33rem;
+  line-height: 1.33;
   font-size: 2rem;
 }
 h2.ui.header {
   margin: 1.5rem 0rem 1rem;
-  line-height: 1.33rem;
+  line-height: 1.33;
   font-size: 1.5rem;
 }
 h3.ui.header {
   margin: 1.3rem 0rem 1rem;
-  line-height: 1.33rem;
+  line-height: 1.33;
   font-size: 1.33rem;
 }
 h4.ui.header {
   margin: 0.75rem 0rem 0.3rem;
-  line-height: 1.33rem;
+  line-height: 1.33;
   font-size: 1.1rem;
 }
 h5.ui.header {
   margin: 0rem 0rem 0.2rem;
-  line-height: 1.2rem;
+  line-height: 1.2;
   font-size: 1rem;
 }
 /*--------------

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

@@ -1,5 +1,16 @@
+/*
+ * # Semantic Icons - Flat
+ * http://github.com/quirkyinc/semantic
+ *
+ *
+ * Copyright 2013 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ * Released: May 17 2013
+ */
 /*******************************
-           UI Icon
+             Icon
 *******************************/
 @font-face {
   font-family: 'Icons';
@@ -9,6 +20,7 @@
   font-style: normal;
 }
 i.icon {
+  font-family: 'Icons';
   display: inline-block;
   width: 1em;
   height: 1em;
@@ -19,64 +31,157 @@ i.icon {
   text-decoration: inherit;
   text-align: center;
   vertical-align: baseline;
+  opacity: 0.75;
+  speak: none;
   -webkit-font-smoothing: antialiased;
   -moz-font-smoothing: antialiased;
   font-smoothing: antialiased;
 }
-i.icon:before {
-  font-family: 'Icons';
-  speak: none;
-  opacity: 0.75;
-}
-/* manual corrections */
-i.icon.cloud,
-i.icon.code,
-i.icon.terminal,
-i.icon.twitter-bird,
-i.icon.dollar {
-  margin-left: 0em;
-  padding-right: 0.2em;
-}
-i.icon.left,
-i.icon.left-open,
-i.icon.left-dir {
-  width: 1em;
-  margin: 0em 0.5em 0em 0em;
-}
-i.icon.up,
-i.icon.up-open,
-i.icon.up-dir,
-i.icon.down,
-i.icon.down-open,
-i.icon.down-dir,
-i.icon.right,
-i.icon.right-open,
-i.icon.right-dir {
-  width: 1em;
-  margin: 0em 0em 0em 0.1em;
-}
-/* circular icon easier to notice misaligned */
-i.icon.clock {
-  margin-top: -0.05em;
+/* icons available */
+i.icon.circle.attention:before {
+  content: '\2757';
 }
-/* aliases for convenience */
-i.icon.close:before {
-  content: '\e80d';
+/* '❗' */
+i.icon.circle.cancel:before {
+  content: '\2716';
 }
-/* '' */
-i.icon.help:before {
+/* '✖' */
+i.icon.circle.help:before {
   content: '\e704';
 }
 /* '' */
-i.icon.info:before {
+i.icon.circle.info:before {
   content: '\e705';
 }
 /* '' */
-i.icon.error:before {
-  content: '\e80d';
+i.icon.circle.plus:before {
+  content: '\2795';
 }
-/* '' */
-/* icons available */
+/* '➕' */
+i.icon.chart:before {
+  content: '📈';
+}
+/* '\1f4c8' */
+i.icon.chart.bar:before {
+  content: '📊';
+}
+/* '\1f4ca' */
+i.icon.chart.pie:before {
+  content: '\e7a2';
+}
+/* '' */
+i.icon.resize.full:before {
+  content: '\e744';
+}
+/* '' */
+i.icon.resize.horizontal:before {
+  content: '\2b0d';
+}
+/* '⬍' */
+i.icon.resize.small:before {
+  content: '\e746';
+}
+/* '' */
+i.icon.resize.vertical:before {
+  content: '\2b0c';
+}
+/* '⬌' */
+i.icon.down:before {
+  content: '\2193';
+}
+/* '↓' */
+i.icon.down.triangle:before {
+  content: '\25be';
+}
+/* '▾' */
+i.icon.down.arrow:before {
+  content: '\e75c';
+}
+/* '' */
+i.icon.left:before {
+  content: '\2190';
+}
+/* '←' */
+i.icon.left.triangle:before {
+  content: '\25c2';
+}
+/* '◂' */
+i.icon.left.arrow:before {
+  content: '\e75d';
+}
+/* '' */
+i.icon.right:before {
+  content: '\2192';
+}
+/* '→' */
+i.icon.right.triangle:before {
+  content: '\25b8';
+}
+/* '▸' */
+i.icon.right.arrow:before {
+  content: '\e75e';
+}
+/* '' */
+i.icon.up:before {
+  content: '\2191';
+}
+/* '↑' */
+i.icon.up.triangle:before {
+  content: '\25b4';
+}
+/* '▴' */
+i.icon.up.arrow:before {
+  content: '\e75f';
+}
+/* '' */
+i.icon.folder:before {
+  content: '\e810';
+}
+/* '' */
+i.icon.open.folder:before {
+  content: '📂';
+}
+/* '\1f4c2' */
+i.icon.globe:before {
+  content: '𝌍';
+}
+/* '\1d30d' */
+i.icon.desk.globe:before {
+  content: '🌐';
+}
+/* '\1f310' */
+i.icon.star:before {
+  content: '\e801';
+}
+/* '' */
+i.icon.star.empty:before {
+  content: '\e800';
+}
+/* '' */
+i.icon.star.half:before {
+  content: '\e701';
+}
+/* '' */
+i.icon.lock:before {
+  content: '🔒';
+}
+/* '\1f512' */
+i.icon.lock.open:before {
+  content: '🔓';
+}
+/* '\1f513' */
+i.icon.layout.grid:before {
+  content: '\e80c';
+}
+/* '' */
+i.icon.layout.block:before {
+  content: '\e708';
+}
+/* '' */
+i.icon.layout.list:before {
+  content: '\e80b';
+}
+/* '' */
 i.icon.asterisk:before {
   content: '\2731';
 }
@@ -89,10 +194,6 @@ i.icon.attach:before {
   content: '📎';
 }
 /* '\1f4ce' */
-i.icon.attention-circle:before {
-  content: '\2757';
-}
-/* '❗' */
 i.icon.attention:before {
   content: '\26a0';
 }
@@ -117,7 +218,7 @@ i.icon.block:before {
   content: '🚫';
 }
 /* '\1f6ab' */
-i.icon.book-open:before {
+i.icon.book:before {
   content: '📖';
 }
 /* '\1f4d6' */
@@ -129,34 +230,18 @@ i.icon.calendar:before {
   content: '📅';
 }
 /* '\1f4c5' */
-i.icon.cancel-alt:before {
+i.icon.cancel:before {
   content: '\e80d';
 }
 /* '' */
-i.icon.cancel-circle:before {
-  content: '\2716';
-}
-/* '✖' */
 i.icon.cancel:before {
   content: '\2715';
 }
 /* '✕' */
-i.icon.ccw:before {
+i.icon.rewind:before {
   content: '\27f2';
 }
 /* '⟲' */
-i.icon.chart-bar:before {
-  content: '📊';
-}
-/* '\1f4ca' */
-i.icon.chart-pie:before {
-  content: '\e7a2';
-}
-/* '' */
-i.icon.chart:before {
-  content: '📈';
-}
-/* '\1f4c8' */
 i.icon.chat:before {
   content: '\e720';
 }
@@ -177,23 +262,19 @@ i.icon.code:before {
   content: '\e714';
 }
 /* '' */
-i.icon.cog-alt:before {
+i.icon.setting:before {
   content: '\26ef';
 }
 /* '⛯' */
-i.icon.cog:before {
+i.icon.settings:before {
   content: '\2699';
 }
 /* '⚙' */
-i.icon.comment-alt:before {
+i.icon.comment:before {
   content: '\e802';
 }
 /* '' */
-i.icon.comment:before {
-  content: '\e718';
-}
-/* '' */
-i.icon.cw:before {
+i.icon.clockwise:before {
   content: '\27f3';
 }
 /* '⟳' */
@@ -213,18 +294,6 @@ i.icon.dollar:before {
   content: '💵';
 }
 /* '\1f4b5' */
-i.icon.down-dir:before {
-  content: '\25be';
-}
-/* '▾' */
-i.icon.down-open:before {
-  content: '\e75c';
-}
-/* '' */
-i.icon.down:before {
-  content: '\2193';
-}
-/* '↓' */
 i.icon.easel:before {
   content: '\e7b5';
 }
@@ -245,15 +314,15 @@ i.icon.eye:before {
   content: '\e80f';
 }
 /* '' */
-i.icon.eye-off:before {
+i.icon.hidden.eye:before {
   content: '\e70b';
 }
 /* '' */
-i.icon.facebook-rect:before {
+i.icon.facebook:before {
   content: '\f301';
 }
 /* '' */
-i.icon.fast-fw:before {
+i.icon.fast-forward:before {
   content: '\e804';
 }
 /* '' */
@@ -269,11 +338,7 @@ i.icon.flash:before {
   content: '\26a1';
 }
 /* '⚡' */
-i.icon.flash-alt:before {
-  content: '\e815';
-}
-/* '' */
-i.icon.flask:before {
+i.icon.lab:before {
   content: '\68';
 }
 /* 'h' */
@@ -281,14 +346,6 @@ i.icon.flight:before {
   content: '\2708';
 }
 /* '✈' */
-i.icon.folder-open:before {
-  content: '📂';
-}
-/* '\1f4c2' */
-i.icon.folder:before {
-  content: '\e810';
-}
-/* '' */
 i.icon.forward:before {
   content: '\27a6';
 }
@@ -305,14 +362,6 @@ i.icon.globe:before {
   content: '\e817';
 }
 /* '' */
-i.icon.globe-alt:before {
-  content: '🌐';
-}
-/* '\1f310' */
-i.icon.globe:before {
-  content: '𝌍';
-}
-/* '\1d30d' */
 i.icon.headphones:before {
   content: '🎧';
 }
@@ -325,10 +374,6 @@ i.icon.heart:before {
   content: '\2665';
 }
 /* '♥' */
-i.icon.help-circle:before {
-  content: '\e704';
-}
-/* '' */
 i.icon.question:before {
   content: '\2753';
 }
@@ -341,10 +386,6 @@ i.icon.home:before {
   content: '\2302';
 }
 /* '⌂' */
-i.icon.info-circle:before {
-  content: '\e705';
-}
-/* '' */
 i.icon.i-letter:before {
   content: '\2139';
 }
@@ -353,18 +394,6 @@ i.icon.lamp:before {
   content: '💡';
 }
 /* '\1f4a1' */
-i.icon.left-dir:before {
-  content: '\25c2';
-}
-/* '◂' */
-i.icon.left-open:before {
-  content: '\e75d';
-}
-/* '' */
-i.icon.left:before {
-  content: '\2190';
-}
-/* '←' */
 i.icon.link:before {
   content: '🔗';
 }
@@ -373,22 +402,10 @@ i.icon.list:before {
   content: '\e782';
 }
 /* '' */
-i.icon.location-alt:before {
-  content: '\e811';
-}
-/* '' */
 i.icon.location:before {
   content: '\e724';
 }
 /* '' */
-i.icon.lock-open:before {
-  content: '🔓';
-}
-/* '\1f513' */
-i.icon.lock:before {
-  content: '🔒';
-}
-/* '\1f512' */
 i.icon.mail:before {
   content: '\2709';
 }
@@ -413,7 +430,7 @@ i.icon.pause:before {
   content: '\e808';
 }
 /* '' */
-i.icon.picture-alt:before {
+i.icon.pictures:before {
   content: '\e812';
 }
 /* '' */
@@ -429,10 +446,6 @@ i.icon.play:before {
   content: '\e809';
 }
 /* '' */
-i.icon.plus-circle:before {
-  content: '\2795';
-}
-/* '➕' */
 i.icon.plus:before {
   content: '\2b';
 }
@@ -441,34 +454,6 @@ i.icon.print:before {
   content: '\e716';
 }
 /* '' */
-i.icon.resize-full:before {
-  content: '\e744';
-}
-/* '' */
-i.icon.resize-horizontal:before {
-  content: '\2b0d';
-}
-/* '⬍' */
-i.icon.resize-small:before {
-  content: '\e746';
-}
-/* '' */
-i.icon.resize-vertical:before {
-  content: '\2b0c';
-}
-/* '⬌' */
-i.icon.right-dir:before {
-  content: '\25b8';
-}
-/* '▸' */
-i.icon.right-open:before {
-  content: '\e75e';
-}
-/* '' */
-i.icon.right:before {
-  content: '\2192';
-}
-/* '→' */
 i.icon.rss:before {
   content: '\e73a';
 }
@@ -481,18 +466,6 @@ i.icon.shuffle:before {
   content: '\e803';
 }
 /* '' */
-i.icon.star:before {
-  content: '\e801';
-}
-/* '' */
-i.icon.star-empty:before {
-  content: '\e800';
-}
-/* '' */
-i.icon.star-half:before {
-  content: '\e701';
-}
-/* '' */
 i.icon.stop:before {
   content: '\e807';
 }
@@ -509,18 +482,6 @@ i.icon.terminal:before {
   content: '\e7ac';
 }
 /* '' */
-i.icon.th-alt:before {
-  content: '\e80c';
-}
-/* '' */
-i.icon.th-large:before {
-  content: '\e708';
-}
-/* '' */
-i.icon.th-list:before {
-  content: '\e80b';
-}
-/* '' */
 i.icon.thumbs-down:before {
   content: '👎';
 }
@@ -561,18 +522,6 @@ i.icon.twitter-bird:before {
   content: '\f303';
 }
 /* '' */
-i.icon.up-dir:before {
-  content: '\25b4';
-}
-/* '▴' */
-i.icon.up-open:before {
-  content: '\e75f';
-}
-/* '' */
-i.icon.up:before {
-  content: '\2191';
-}
-/* '↑' */
 i.icon.upload-cloud:before {
   content: '\e711';
 }
@@ -605,3 +554,122 @@ i.icon.zoom-out:before {
   content: '\e751';
 }
 /* '' */
+/*--------------
+   Spacing Fix
+---------------*/
+i.icon.cloud,
+i.icon.code,
+i.icon.terminal,
+i.icon.twitter-bird,
+i.icon.dollar {
+  margin-left: 0em;
+  padding-right: 0.2em;
+}
+i.icon.left,
+i.icon.left-open,
+i.icon.left-dir {
+  width: 1em;
+  margin: 0em 0.5em 0em 0em;
+}
+i.icon.up,
+i.icon.up-open,
+i.icon.up-dir,
+i.icon.down,
+i.icon.down-open,
+i.icon.down-dir,
+i.icon.right,
+i.icon.right-open,
+i.icon.right-dir {
+  width: 1em;
+  margin: 0em 0em 0em 0.1em;
+}
+i.icon.clock {
+  margin-top: -0.05em;
+}
+/*--------------
+     Aliases
+---------------*/
+/* aliases for convenience */
+i.icon.close:before {
+  content: '\e80d';
+}
+/* '' */
+i.icon.help:before {
+  content: '\e704';
+}
+/* '' */
+i.icon.info:before {
+  content: '\e705';
+}
+/* '' */
+i.icon.error:before {
+  content: '\e80d';
+}
+/* '' */
+/*******************************
+             States
+*******************************/
+i.icon.disabled {
+  opacity: 0.3;
+}
+/*******************************
+           Variations
+*******************************/
+i.strong.icon {
+  opacity: 1;
+}
+/*-------------------
+      Inverted 
+--------------------*/
+i.inverted.icon {
+  background-color: #222222;
+  color: #FFFFFF;
+}
+/*-------------------
+       Colors
+--------------------*/
+i.blue.icon {
+  color: #6ECFF5 !important;
+}
+i.black.icon {
+  color: #5C6166 !important;
+}
+i.green.icon {
+  color: #A1CF64 !important;
+}
+i.red.icon {
+  color: #EF4D6D !important;
+}
+i.purple.icon {
+  color: #564F8A !important;
+}
+i.teal.icon {
+  color: #00B5AD !important;
+}
+/*-------------------
+   Inverted Colors
+--------------------*/
+i.inverted.black.icon {
+  background-color: #5C6166 !important;
+  color: #FFFFFF !important;
+}
+i.inverted.blue.icon {
+  background-color: #6ECFF5 !important;
+  color: #FFFFFF !important;
+}
+i.inverted.green.icon {
+  background-color: #A1CF64 !important;
+  color: #FFFFFF !important;
+}
+i.inverted.red.icon {
+  background-color: #EF4D6D !important;
+  color: #FFFFFF !important;
+}
+i.inverted.purple.icon {
+  background-color: #564F8A !important;
+  color: #FFFFFF !important;
+}
+i.inverted.teal.icon {
+  background-color: #00B5AD !important;
+  color: #FFFFFF !important;
+}

node/src/files/stylesheets/semantic.css

@@ -433,6 +433,71 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */
   position: relative;
 }
 
+#example .icon.example .grid .column {
+  opacity: 0.8;
+  margin-bottom: 4%;
+  text-align: center;
+  color: #888888;
+
+  -webkit-transition: 
+    margin-left 0.3s ease-out,
+    opacity 0.3s ease-out
+  ;
+  -moz-transition: 
+    margin-left 0.3s ease-out,
+    opacity 0.3s ease-out
+  ;
+  -o-transition: 
+    margin-left 0.3s ease-out,
+    opacity 0.3s ease-out
+  ;
+  -ms-transition: 
+    margin-left 0.3s ease-out,
+    opacity 0.3s ease-out
+  ;
+  transition: 
+    margin-left 0.3s ease-out,
+    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
+  ;
+  -moz-transition: 
+    color 0.2s ease-out
+  ;
+  -o-transition: 
+    color 0.2s ease-out
+  ;
+  -ms-transition: 
+    color 0.2s ease-out
+  ;
+  transition: 
+    color 0.2s ease-out
+  ;
+}
+#example .icon.example .grid .column:hover .icon {
+  color: #009FDA;
+}
+#example .another.icon.example {
+  margin-top: -15px;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  padding-top: 50px;
+}
+#example .another.icon.example i.code {
+  top: 15px;
+}
+
+
 #example .another.example {
   border-top: none;
 }
@@ -555,12 +620,6 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */
   background-color: rgba(0, 0, 0, 0.05);
   border: 1px solid rgba(0, 0, 0, 0.1);
 }
-#example div.code .ace_line {
-  color: #555555;
-}
-#example div.code .ace_tag {
-  color: #892A6F;
-}
 #example div.code .ace_indent-guide {
   position: relative;
   background: none;
@@ -574,15 +633,43 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */
   border-left: 1px solid #ECF5F3;
 } */
 
-#example div.code .ace_attribute-name {
-  color: #934E4E;
-}
 
 #example div.code .ace_gutter,
 #example div.code .ace_scroller {
   margin: 14px 10px;
 }
+#example div.code .ace_scrollbar {
+  overflow: hidden;
+  background-color: #FFFFFF;
+}
 
+#example div.code .ace_line,
+#example div.code .ace_line span {
+  -webkit-transition: 
+    color 1s ease-out
+  ;
+  -moz-transition: 
+    color 1s ease-out
+  ;
+  -o-transition: 
+    color 1s ease-out
+  ;
+  -ms-transition: 
+    color 1s ease-out
+  ;
+  transition: 
+    color 1s ease-out
+  ;
+}
+#example div.code .ace_line {
+  color: #555555;
+}
+#example div.code .ace_tag {
+  color: #DCBCD3;
+}
+#example div.code .ace_attribute-name {
+  color: #F4C5C5;
+}
 #example div.code .ace_content {
 }
 #example div.code .ace_string {
@@ -592,25 +679,62 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */
   border-left: 1px solid #AAAAAA;
 }
 #example div.code .ace_paren {
-  color: #555555;
+  color: #CCCCCC;
 }
 #example div.code .ace_keyword {
-  color: #555555;
+  color: #CCCCCC;
 }
 #example div.code .ace_identifier {
+  color: #CCCCCC;
+}
+#example div.code .ace_punctuation {
+  color: #CCCCCC;
+}
+#example div.code .ace_active_line {
+  background-color: #FBFBE5;
+}
+
+/* Hovered Style */
+
+#example div.code:hover .ace_line {
   color: #555555;
 }
-#example div.code .ace_scrollbar {
+#example div.code:hover .ace_tag {
+  color: #892A6F;
+}
+#example div.code:hover .ace_attribute-name {
+  color: #934E4E;
+}
+#example div.code:hover .ace_content {
+}
+#example div.code:hover .ace_string {
+  color: #00A59D;
+}
+#example div.code:hover .ace_cursor {
+  border-left: 1px solid #AAAAAA;
+}
+#example div.code:hover .ace_paren {
+  color: #555555;
+}
+#example div.code:hover .ace_keyword {
+  color: #555555;
+}
+#example div.code:hover .ace_identifier {
+  color: #555555;
+}
+#example div.code:hover .ace_scrollbar {
   overflow: hidden;
   background-color: #FFFFFF;
 }
-#example div.code .ace_punctuation {
+#example div.code:hover .ace_punctuation {
   color: #555555;
 }
-#example div.code .ace_active_line {
+#example div.code:hover .ace_active_line {
   background-color: #FBFBE5;
 }
 
+
+
 /* examples */
 
 #example h2 + .example,
@@ -659,7 +783,7 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */
 }
 
 #example .highlighted.example {
-  min-height: 280px;
+  min-height: 340px;
 }
 #example .highlighted.example .grid,
 #example .ui.type.items .image .grid {

node/src/layouts/default.html.eco

@@ -156,7 +156,7 @@
     </div>
   </div>
     <div class="ui black huge sidebar right attached button">
-      <i class="icon th-list"></i>
+      <i class="icon list layout"></i>
       <span class="text">Menu</span>
     </div>
   <%- @content %>

src/collections/grid.less

@@ -58,7 +58,7 @@
 }
 
 /*-------------------
-         Rows
+        Rows
 --------------------*/
 
 .ui.grid > .row {
@@ -85,6 +85,18 @@
 }
 
 
+/*-------------------
+    Grids in Grids
+--------------------*/
+
+.ui.grid .column > .grid {
+  margin-left: -1.333%;
+  margin-right: -1.333%;
+}
+
+
+
+
 /*******************************
            Variations
 *******************************/
@@ -301,10 +313,19 @@
 /*----------------------
   Equal Height Columns
 -----------------------*/
+
 .ui.grid .equal.row .column {
   display: table-cell;
 }
 
+/*----------------------
+       Fitted
+-----------------------*/
+
+.ui.fitted.grid  {
+  margin-left: -1.333%;
+  margin-right: -1.333%;
+}
 
 /*-------------------
        Folding

src/elements/header.less

@@ -41,27 +41,27 @@
 h1.ui.header {
   min-height: 1rem;
   margin: 2rem 0rem 1.5rem;
-  line-height: 1.33rem;
+  line-height: 1.33;
   font-size: 2rem;
 }
 h2.ui.header {
   margin: 1.5rem 0rem 1rem;
-  line-height: 1.33rem;
+  line-height: 1.33;
   font-size: 1.5rem;
 }
 h3.ui.header {
   margin: 1.3rem 0rem 1rem;
-  line-height: 1.33rem;
+  line-height: 1.33;
   font-size: 1.33rem;
 }
 h4.ui.header {
   margin: 0.75rem 0rem 0.3rem;
-  line-height: 1.33rem;
+  line-height: 1.33;
   font-size: 1.1rem;
 }
 h5.ui.header {
   margin: 0rem 0rem 0.2rem;
-  line-height: 1.2rem;
+  line-height: 1.2;
   font-size: 1rem;
 }
 

src/elements/icons.less

@@ -1,5 +1,18 @@
+/*
+ * # Semantic Icons - Flat
+ * http://github.com/quirkyinc/semantic
+ *
+ *
+ * Copyright 2013 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ * Released: May 17 2013
+ */
+
+
 /*******************************
-           UI Icon
+             Icon
 *******************************/
 
 @font-face {
@@ -16,6 +29,7 @@
 }
 
 i.icon {
+  font-family: 'Icons';
   display: inline-block;
 
   width: 1em;
@@ -30,170 +44,143 @@ i.icon {
   text-align: center;
 
   vertical-align: baseline;
+
+  opacity: 0.75;
+  speak: none;
   
   -webkit-font-smoothing: antialiased;
   -moz-font-smoothing: antialiased;
   font-smoothing: antialiased;
 
 }
-i.icon:before {
-  font-family: 'Icons';
-  speak: none;
-  opacity: 0.75;
-}
 
-/* manual corrections */
-i.icon.cloud,
-i.icon.code,
-i.icon.terminal,
-i.icon.twitter-bird,
-i.icon.dollar {
-  margin-left: 0em;
-  padding-right: 0.2em;
-}
+/* icons available */
 
-i.icon.left,
-i.icon.left-open,
-i.icon.left-dir {
-  width: 1em;
-  margin: 0em 0.5em 0em 0em;
-}
 
-i.icon.up,
-i.icon.up-open,
-i.icon.up-dir,
-i.icon.down,
-i.icon.down-open,
-i.icon.down-dir,
-i.icon.right,
-i.icon.right-open,
-i.icon.right-dir {
-  width: 1em;
-  margin: 0em 0em 0em 0.1em;
-}
-/* circular icon easier to notice misaligned */
-i.icon.clock {
-  margin-top: -0.05em;
-}
+i.icon.circle.attention:before { content: '\2757'; } /* '❗' */
+i.icon.circle.cancel:before { content: '\2716'; } /* '✖' */
+i.icon.circle.help:before { content: '\e704'; } /* '' */
+i.icon.circle.info:before { content: '\e705'; } /* '' */
+i.icon.circle.plus:before { content: '\2795'; } /* '➕' */
+
+i.icon.chart:before { content: '📈'; } /* '\1f4c8' */
+i.icon.chart.bar:before { content: '📊'; } /* '\1f4ca' */
+i.icon.chart.pie:before { content: '\e7a2'; } /* '' */
+
+i.icon.resize.full:before { content: '\e744'; } /* '' */
+i.icon.resize.horizontal:before { content: '\2b0d'; } /* '⬍' */
+i.icon.resize.small:before { content: '\e746'; } /* '' */
+i.icon.resize.vertical:before { content: '\2b0c'; } /* '⬌' */
+
+i.icon.down:before { content: '\2193'; } /* '↓' */
+i.icon.down.triangle:before { content: '\25be'; } /* '▾' */
+i.icon.down.arrow:before { content: '\e75c'; } /* '' */
+
+i.icon.left:before { content: '\2190'; } /* '←' */
+i.icon.left.triangle:before { content: '\25c2'; } /* '◂' */
+i.icon.left.arrow:before { content: '\e75d'; } /* '' */
+
+i.icon.right:before { content: '\2192'; } /* '→' */
+i.icon.right.triangle:before { content: '\25b8'; } /* '▸' */
+i.icon.right.arrow:before { content: '\e75e'; } /* '' */
+
+i.icon.up:before { content: '\2191'; } /* '↑' */
+i.icon.up.triangle:before { content: '\25b4'; } /* '▴' */
+i.icon.up.arrow:before { content: '\e75f'; } /* '' */
+
+i.icon.folder:before { content: '\e810'; } /* '' */
+i.icon.open.folder:before { content: '📂'; } /* '\1f4c2' */
+
+i.icon.globe:before { content: '𝌍'; } /* '\1d30d' */
+i.icon.desk.globe:before { content: '🌐'; } /* '\1f310' */
+
+i.icon.star:before { content: '\e801'; } /* '' */
+i.icon.star.empty:before { content: '\e800'; } /* '' */
+i.icon.star.half:before { content: '\e701'; } /* '' */
+
+i.icon.lock:before { content: '🔒'; } /* '\1f512' */
+i.icon.lock.open:before { content: '🔓'; } /* '\1f513' */
+
+i.icon.layout.grid:before { content: '\e80c'; } /* '' */
+i.icon.layout.block:before { content: '\e708'; } /* '' */
+i.icon.layout.list:before { content: '\e80b'; } /* '' */
 
-/* aliases for convenience */
-i.icon.close:before { content: '\e80d'; } /* '' */
-i.icon.help:before { content: '\e704'; } /* '' */
-i.icon.info:before { content: '\e705'; } /* '' */
-i.icon.error:before { content: '\e80d'; } /* '' */
 
-/* icons available */
 i.icon.asterisk:before { content: '\2731'; } /* '✱' */
 i.icon.at:before { content: '\40'; } /* '@' */
 i.icon.attach:before { content: '📎'; } /* '\1f4ce' */
-i.icon.attention-circle:before { content: '\2757'; } /* '❗' */
 i.icon.attention:before { content: '\26a0'; } /* '⚠' */
 i.icon.award:before { content: '🏉'; } /* '\1f3c9' */
 i.icon.barcode:before { content: '\e792'; } /* '' */
 i.icon.basket:before { content: '\e73d'; } /* '' */
 i.icon.basket:before { content: '\e813'; } /* '' */
 i.icon.block:before { content: '🚫'; } /* '\1f6ab' */
-i.icon.book-open:before { content: '📖'; } /* '\1f4d6' */
+i.icon.book:before { content: '📖'; } /* '\1f4d6' */
 i.icon.bookmark:before { content: '🔖'; } /* '\1f516' */
 i.icon.calendar:before { content: '📅'; } /* '\1f4c5' */
-i.icon.cancel-alt:before { content: '\e80d'; } /* '' */
-i.icon.cancel-circle:before { content: '\2716'; } /* '✖' */
+i.icon.cancel:before { content: '\e80d'; } /* '' */
 i.icon.cancel:before { content: '\2715'; } /* '✕' */
-i.icon.ccw:before { content: '\27f2'; } /* '⟲' */
-i.icon.chart-bar:before { content: '📊'; } /* '\1f4ca' */
-i.icon.chart-pie:before { content: '\e7a2'; } /* '' */
-i.icon.chart:before { content: '📈'; } /* '\1f4c8' */
+i.icon.rewind:before { content: '\27f2'; } /* '⟲' */
 i.icon.chat:before { content: '\e720'; } /* '' */
 i.icon.check:before { content: '\2611'; } /* '☑' */
 i.icon.clock:before { content: '🕔'; } /* '\1f554' */
 i.icon.cloud:before { content: '\2601'; } /* '☁' */
 i.icon.code:before { content: '\e714'; } /* '' */
-i.icon.cog-alt:before { content: '\26ef'; } /* '⛯' */
-i.icon.cog:before { content: '\2699'; } /* '⚙' */
-i.icon.comment-alt:before { content: '\e802'; } /* '' */
-i.icon.comment:before { content: '\e718'; } /* '' */
-i.icon.cw:before { content: '\27f3'; } /* '⟳' */
+i.icon.setting:before { content: '\26ef'; } /* '⛯' */
+i.icon.settings:before { content: '\2699'; } /* '⚙' */
+i.icon.comment:before { content: '\e802'; } /* '' */
+i.icon.clockwise:before { content: '\27f3'; } /* '⟳' */
 i.icon.direction:before { content: '\27a2'; } /* '➢' */
 i.icon.doc:before { content: '📄'; } /* '\1f4c4' */
 i.icon.docs:before { content: '\e736'; } /* '' */
 i.icon.dollar:before { content: '💵'; } /* '\1f4b5' */
-i.icon.down-dir:before { content: '\25be'; } /* '▾' */
-i.icon.down-open:before { content: '\e75c'; } /* '' */
-i.icon.down:before { content: '\2193'; } /* '↓' */
 i.icon.easel:before { content: '\e7b5'; } /* '' */
 i.icon.edit:before { content: '\270d'; } /* '✍' */
 i.icon.eject:before { content: '\2ecf'; } /* '⻏' */
 i.icon.export:before { content: '\e715'; } /* '' */
 i.icon.eye:before { content: '\e80f'; } /* '' */
-i.icon.eye-off:before { content: '\e70b'; } /* '' */
-i.icon.facebook-rect:before { content: '\f301'; } /* '' */
-i.icon.fast-fw:before { content: '\e804'; } /* '' */
+i.icon.hidden.eye:before { content: '\e70b'; } /* '' */
+i.icon.facebook:before { content: '\f301'; } /* '' */
+i.icon.fast-forward:before { content: '\e804'; } /* '' */
 i.icon.fire:before { content: '🔥'; } /* '\1f525' */
 i.icon.flag:before { content: '\2691'; } /* '⚑' */
 i.icon.flash:before { content: '\26a1'; } /* '⚡' */
-i.icon.flash-alt:before { content: '\e815'; } /* '' */
-i.icon.flask:before { content: '\68'; } /* 'h' */
+i.icon.lab:before { content: '\68'; } /* 'h' */
 i.icon.flight:before { content: '\2708'; } /* '✈' */
-i.icon.folder-open:before { content: '📂'; } /* '\1f4c2' */
-i.icon.folder:before { content: '\e810'; } /* '' */
 i.icon.forward:before { content: '\27a6'; } /* '➦' */
 i.icon.gift:before { content: '🎁'; } /* '\1f381' */
 i.icon.github:before { content: '\f308'; } /* '' */
 i.icon.globe:before { content: '\e817'; } /* '' */
-i.icon.globe-alt:before { content: '🌐'; } /* '\1f310' */
-i.icon.globe:before { content: '𝌍'; } /* '\1d30d' */
 i.icon.headphones:before { content: '🎧'; } /* '\1f3a7' */
 i.icon.heart-empty:before { content: '\2661'; } /* '♡' */
 i.icon.heart:before { content: '\2665'; } /* '♥' */
-i.icon.help-circle:before { content: '\e704'; } /* '' */
 i.icon.question:before { content: '\2753'; } /* '❓' */
 i.icon.home-alt:before { content: '\e80e'; } /* '' */
 i.icon.home:before { content: '\2302'; } /* '⌂' */
-i.icon.info-circle:before { content: '\e705'; } /* '' */
 i.icon.i-letter:before { content: '\2139'; } /* 'ℹ' */
 i.icon.lamp:before { content: '💡'; } /* '\1f4a1' */
-i.icon.left-dir:before { content: '\25c2'; } /* '◂' */
-i.icon.left-open:before { content: '\e75d'; } /* '' */
-i.icon.left:before { content: '\2190'; } /* '←' */
 i.icon.link:before { content: '🔗'; } /* '\1f517' */
 i.icon.list:before { content: '\e782'; } /* '' */
-i.icon.location-alt:before { content: '\e811'; } /* '' */
 i.icon.location:before { content: '\e724'; } /* '' */
-i.icon.lock-open:before { content: '🔓'; } /* '\1f513' */
-i.icon.lock:before { content: '🔒'; } /* '\1f512' */
 i.icon.mail:before { content: '\2709'; } /* '✉' */
 i.icon.mic:before { content: '🎤'; } /* '\1f3a4' */
 i.icon.minus:before { content: '\2d'; } /* '-' */
 i.icon.money:before { content: '💰'; } /* '\1f4b0' */
 i.icon.off:before { content: '\e78e'; } /* '' */
 i.icon.pause:before { content: '\e808'; } /* '' */
-i.icon.picture-alt:before { content: '\e812'; } /* '' */
+i.icon.pictures:before { content: '\e812'; } /* '' */
 i.icon.picture:before { content: '🌄'; } /* '\1f304' */
 i.icon.pin:before { content: '📌'; } /* '\1f4cc' */
 i.icon.play:before { content: '\e809'; } /* '' */
-i.icon.plus-circle:before { content: '\2795'; } /* '➕' */
 i.icon.plus:before { content: '\2b'; } /* '+' */
 i.icon.print:before { content: '\e716'; } /* '' */
-i.icon.resize-full:before { content: '\e744'; } /* '' */
-i.icon.resize-horizontal:before { content: '\2b0d'; } /* '⬍' */
-i.icon.resize-small:before { content: '\e746'; } /* '' */
-i.icon.resize-vertical:before { content: '\2b0c'; } /* '⬌' */
-i.icon.right-dir:before { content: '\25b8'; } /* '▸' */
-i.icon.right-open:before { content: '\e75e'; } /* '' */
-i.icon.right:before { content: '\2192'; } /* '→' */
 i.icon.rss:before { content: '\e73a'; } /* '' */
 i.icon.search:before { content: '🔍'; } /* '\1f50d' */
 i.icon.shuffle:before { content: '\e803'; } /* '' */
-i.icon.star:before { content: '\e801'; } /* '' */
-i.icon.star-empty:before { content: '\e800'; } /* '' */
-i.icon.star-half:before { content: '\e701'; } /* '' */
 i.icon.stop:before { content: '\e807'; } /* '' */
 i.icon.tag:before { content: '\e80a'; } /* '' */
 i.icon.tags:before { content: '\e70d'; } /* '' */
 i.icon.terminal:before { content: '\e7ac'; } /* '' */
-i.icon.th-alt:before { content: '\e80c'; } /* '' */
-i.icon.th-large:before { content: '\e708'; } /* '' */
-i.icon.th-list:before { content: '\e80b'; } /* '' */
 i.icon.thumbs-down:before { content: '👎'; } /* '\1f44e' */
 i.icon.thumbs-up:before { content: '👍'; } /* '\1f44d' */
 i.icon.tint:before { content: '\e794'; } /* '' */
@@ -204,9 +191,6 @@ i.icon.to-start-alt:before { content: '\e805'; } /* '' */
 i.icon.top-list:before { content: '🏆'; } /* '\1f3c6' */
 i.icon.trash:before { content: '\e729'; } /* '' */
 i.icon.twitter-bird:before { content: '\f303'; } /* '' */
-i.icon.up-dir:before { content: '\25b4'; } /* '▴' */
-i.icon.up-open:before { content: '\e75f'; } /* '' */
-i.icon.up:before { content: '\2191'; } /* '↑' */
 i.icon.upload-cloud:before { content: '\e711'; } /* '' */
 i.icon.user-add:before { content: '\e700'; } /* '' */
 i.icon.user:before { content: '👤'; } /* '\1f464' */
@@ -215,3 +199,133 @@ i.icon.users:before { content: '👥'; } /* '\1f465' */
 i.icon.vcard:before { content: '\e722'; } /* '' */
 i.icon.zoom-in:before { content: '\e750'; } /* '' */
 i.icon.zoom-out:before { content: '\e751'; } /* '' */
+
+
+
+/*--------------
+   Spacing Fix
+---------------*/
+
+i.icon.cloud,
+i.icon.code,
+i.icon.terminal,
+i.icon.twitter-bird,
+i.icon.dollar {
+  margin-left: 0em;
+  padding-right: 0.2em;
+}
+
+i.icon.left,
+i.icon.left-open,
+i.icon.left-dir {
+  width: 1em;
+  margin: 0em 0.5em 0em 0em;
+}
+
+i.icon.up,
+i.icon.up-open,
+i.icon.up-dir,
+i.icon.down,
+i.icon.down-open,
+i.icon.down-dir,
+i.icon.right,
+i.icon.right-open,
+i.icon.right-dir {
+  width: 1em;
+  margin: 0em 0em 0em 0.1em;
+}
+
+i.icon.clock {
+  margin-top: -0.05em;
+}
+
+/*--------------
+     Aliases
+---------------*/
+
+/* aliases for convenience */
+i.icon.close:before { content: '\e80d'; } /* '' */
+i.icon.help:before { content: '\e704'; } /* '' */
+i.icon.info:before { content: '\e705'; } /* '' */
+i.icon.error:before { content: '\e80d'; } /* '' */
+
+
+
+/*******************************
+             States
+*******************************/
+
+i.icon.disabled {
+  opacity: 0.3;
+}
+
+
+/*******************************
+           Variations
+*******************************/
+
+i.strong.icon {
+  opacity: 1;
+}
+
+
+/*-------------------
+      Inverted 
+--------------------*/
+
+i.inverted.icon {
+  background-color: #222222;
+  color: #FFFFFF;
+}
+
+/*-------------------
+       Colors
+--------------------*/
+
+i.blue.icon {
+  color: #6ECFF5 !important;
+}
+i.black.icon {
+  color: #5C6166 !important;
+}
+i.green.icon {
+  color: #A1CF64 !important;
+}
+i.red.icon {
+  color: #EF4D6D !important;
+}
+i.purple.icon {
+  color: #564F8A !important;
+}
+i.teal.icon {
+  color: #00B5AD !important;
+}
+
+/*-------------------
+   Inverted Colors
+--------------------*/
+
+i.inverted.black.icon {
+  background-color: #5C6166 !important;
+  color: #FFFFFF !important;
+}
+i.inverted.blue.icon {
+  background-color: #6ECFF5 !important;
+  color: #FFFFFF !important;
+}
+i.inverted.green.icon {
+  background-color: #A1CF64 !important;
+  color: #FFFFFF !important;
+}
+i.inverted.red.icon {
+  background-color: #EF4D6D !important;
+  color: #FFFFFF !important;
+}
+i.inverted.purple.icon {
+  background-color: #564F8A !important;
+  color: #FFFFFF !important;
+}
+i.inverted.teal.icon {
+  background-color: #00B5AD !important;
+  color: #FFFFFF !important;
+}