iterating on text size issues, rem/em/px

node/src/documents/collections/grid.html

@@ -67,7 +67,7 @@ type   : 'UI Collection'
     <h4>Rows</h4>
     <p>A basic grid has padding on the first and last columns of each row.</p>
     <p>A row is used to create vertical padding between rows of columns on a page. If no rows are specified, a grid column will sit flush along each side of the grid.</p>
-    <p>/p>
+    <p>
     <div class="ui grid">
       <div class="row">
         <div class="column">
@@ -172,7 +172,8 @@ type   : 'UI Collection'
   
   <div class="example">
     <h4>Responsive Grid</h4>
-    <p>A responsive grid is a special type of grid useful for designing page layouts. A standard grid does not make any assumptions about how it should change gutters depending on content. Page grids will automatically resize the gutters as a browsers resolution changes size.</p>
+    <p>A responsive grid is a special type of grid useful for designing page layouts.</p>
+    <p>A standard grid does not make any assumptions about how it should change gutters depending on content. Page grids will automatically resize the gutters as a browsers resolution changes size.</p>
     
     <div class="ui two column responsive grid">
       <div class="column">
@@ -201,8 +202,8 @@ type   : 'UI Collection'
   </div>
   
   <div class="example">
-    <h4>Evenly Divided Grid</h4>
-    <p>A grid can be divided into equal parts.</p>
+    <h4>Changing column count</h4>
+    <p>A grid can have a different number of columns</p>
     <div class="ui three column grid">
       <div class="column">
         <div class="ui fluid form segment">
@@ -274,6 +275,118 @@ type   : 'UI Collection'
     </div>
   </div>
   
+  <div class="example">
+    <h4>Vertical Alignment</h4>
+    <p>A grid or row can specify its vertical alignment can have its columns vertically centered.</p>
+    <div class="ui centered three column grid">
+      <div class="top aligned row">
+        <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">
+              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">
+              Dogs
+            </div>
+            <div class="item">
+              Poodle
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="middle aligned row">
+        <div class="column">
+          <div class="ui vertical fluid menu">
+            <div class="header item">
+              Dogs
+            </div>
+            <div class="item">
+              Poodle
+            </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">
+              Dogs
+            </div>
+            <div class="item">
+              Poodle
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="bottom aligned row">
+        <div class="column">
+          <div class="ui vertical fluid menu">
+            <div class="header item">
+              Dogs
+            </div>
+            <div class="item">
+              Poodle
+            </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">
+              Dogs
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  
   <div class="example">
     <h4>Evenly Divided Grid w/ Rows</h4>
     <p>Content that does not match evenly finish a row will be centered in the next row</p>
@@ -355,8 +468,8 @@ type   : 'UI Collection'
   <h3>Columns</h3>
   
   <div class="example">
-    <h4>Wide Column</h4>
-    <p>A grid column can span across multiple column rows.</p>
+    <h4>Column Width</h4>
+    <p>A column can span across multiple grid columns.</p>
     <div class="ui grid">
       <div class="three wide column">
         <div class="ui segment"><b>Colume One</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis sapien sed dui porta id sagittis sapien imperdiet. Quisque suscipit dui vel sapien dapibus a faucibus sapien mattis. Nulla facilisi. Aliquam vitae ante a quam tincidunt blandit. Duis adipiscing, metus at dictum auctor, odio enim ornare urna, quis aliquam arcu nibh vitae felis. Donec gravida aliquam enim in mattis. Phasellus risus purus, luctus quis lobortis eget, dignissim quis ante.</div>

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

@@ -415,7 +415,7 @@
 
 /* Standard */
 .ui.small.form {
-  font-size: 14px;
+  font-size: 0.875em;
 }
 .ui.small.form textarea,
 .ui.small.form input[type="text"],
@@ -424,13 +424,9 @@
   font-size: 1em;
 }
 
-.ui.form {
-  font-size: 16px;
-}
-
 /* Large */
 .ui.large.form {
-  font-size: 18px;
+  font-size: 1.125em;
 }
 .ui.large.form label {
   font-weight: bold;

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

@@ -34,22 +34,22 @@
 }
 @media only screen and (min-width : 1000px) {
   .ui.responsive.grid {
-    padding: 0% 7.5%;
+    padding: 0% 12.5%;
   }
 }
 @media only screen and (min-width : 1500px) {
   .ui.responsive.grid {
-    padding: 0% 10%;
+    padding: 0% 15%;
   }
 }
 @media only screen and (min-width : 1750px) {
   .ui.responsive.grid {
-    padding: 0% 15%;
+    padding: 0% 20%;
   }
 }
 @media only screen and (min-width : 2000px) {
   .ui.responsive.grid {
-    padding: 0% 20%;
+    padding: 0% 27%;
   }
 }
 
@@ -278,13 +278,29 @@
   Vertically Centered
 -----------------------*/
 
-
 /* Vertical Centered */
-.ui.centered.grid .column,
-.ui.centered.column {
+.ui.aligned.grid,
+.ui.grid .aligned.row {
+  display: table;
+  width: 100%;
+}
+.ui.aligned.grid .column,
+.ui.grid .aligned.row .column {
   display: table-cell;
+}
+
+.ui.top.aligned.grid .column,
+.ui.grid .top.aligned.row .column {
+  vertical-align: top;
+}
+.ui.middle.aligned.grid .column,
+.ui.grid .middle.aligned.row .column {
   vertical-align: middle;
 }
+.ui.bottom.aligned.grid .column,
+.ui.grid .bottom.aligned.row .column {
+  vertical-align: bottom;
+}
 
 
 /*-------------------

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

@@ -433,12 +433,12 @@
 .ui.contrasting.menu .item > a {
   color: #FFFFFF;
 }
-.ui.link.menu .item:hover,
-.ui.menu .item.hover,
-.ui.menu .link.item:hover,
-.ui.menu a.item:hover,
-.ui.menu .dropdown.item.hover,
-.ui.menu .dropdown.item:hover {
+.ui.link.contrasting.menu .item:hover,
+.ui.contrasting.menu .item.hover,
+.ui.contrasting.menu .link.item:hover,
+.ui.contrasting.menu a.item:hover,
+.ui.contrasting.menu .dropdown.item.hover,
+.ui.contrasting.menu .dropdown.item:hover {
   background-color: rgba(255, 255, 255, 0.05);
 }
 .ui.contrasting.menu .item .item,
@@ -992,14 +992,14 @@
 ---------------*/
 
 .ui.small.menu .item {
-  font-size: 14px;
+  font-size: 0.875rem;
 }
 .ui.small.vertical.menu {
-  width: 200px;
+  width: 18rem;
 }
 
 .ui.menu .item {
-  font-size: 16px;
+  font-size: 1rem;
 }
 .ui.vertical.menu {
   width: 230px;
@@ -1007,7 +1007,7 @@
 
 
 .ui.large.menu .item {
-  font-size: 18px;
+  font-size: 1.125rem;
 }
 .ui.large.vertical.menu {
   width: 275px;

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

@@ -23,7 +23,6 @@
   background-color: rgba(0, 0, 0, 0.04);
   padding: 1em;
 
-  font-size: 16px;
   line-height: 1.33;
   color: rgba(0, 0, 0, 0.6);
   
@@ -245,17 +244,17 @@
 ---------------*/
 
 .ui.small.block {
-  font-size: 14px;
+  font-size: 0.875em;
 }
 .ui.block {
-  font-size: 16px;
+  font-size: 1em;
 }
 .ui.large.block {
-  font-size: 18px;
+  font-size: 1.125em;
 }
 .ui.huge.block {
-  font-size: 24px;
+  font-size: 1.5em;
 }
 .ui.massive.block {
-  font-size: 32px;
+  font-size: 2px;
 }

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

@@ -21,16 +21,20 @@ i.icon {
   width: 1em;
   height: 1em;
 
-  margin: 0px 0.2em 0px 0px;
+  margin: 0em 0.2em 0em 0em;
 
   font-style: normal;
   line-height: 1;
   font-weight: normal;
   text-decoration: inherit;
   text-align: center;
-  -webkit-font-smoothing: antialiased;
 
   vertical-align: baseline;
+  
+  -webkit-font-smoothing: antialiased;
+  -moz-font-smoothing: antialiased;
+  font-smoothing: antialiased;
+
 }
 i.icon:before {
   font-family: 'Icons';

node/src/files/stylesheets/semantic.css

@@ -81,7 +81,6 @@ h3::selection {
   font-style: normal;
   font-weight: normal;
   font-stretch: normal;
-  font-size-adjust: 0.448;
 }
 @font-face {
   font-family: 'Neutraface';
@@ -94,7 +93,6 @@ h3::selection {
   font-style: normal;
   font-weight: bold;
   font-stretch: normal;
-  font-size-adjust: 0.448;
 }
 
 @font-face {
@@ -108,7 +106,6 @@ h3::selection {
   font-style: italic;
   font-weight: normal;
   font-stretch: normal;
-  font-size-adjust: 0.448;
 }
 
 
@@ -117,8 +114,14 @@ h3::selection {
 /*******************************
              Global
 *******************************/
+
+html,
+body {
+  font-size: 16px;
+}
+
 body#example {
-  font-family: "Neutraface", "Helvetica Neue", "Arial", sans-serif;
+  font-family: "Neutraface", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
   background: #FCFCFC url(../images/bg.jpg) repeat;
   margin: 0px;
   padding: 0px 0px 150px;
@@ -127,6 +130,31 @@ body#example {
   min-width: 990px;
 }
 
+/*
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.ui {
+  font-family: "Neutraface", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  font-size-adjust: 0.5;
+}
+
+p,
+ul,
+.ui.grid,
+li {
+  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  font-size-adjust: none;
+}
+
+*/
+
+
+
 /* text and headers */
 h1 {
   margin: 0px 0px 20px;
@@ -285,7 +313,7 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */
   font-family: 'Neutraface';
 }
 
-#example .side.buttons {
+#example .sidebar.button {
   position: fixed;
   margin-top: 75px;
 }

node/src/layouts/default.html.eco

@@ -132,9 +132,7 @@
       </div>
     </div>
   </div>
-  <div class="ui huge left attached vertical side buttons">
-    <div class="ui large blue sidebar button"><i class="icon th-list"></i> Menu</div>
-  </div>
+    <div class="ui large blue sidebar right attached button"><i class="icon th-list"></i> Menu</div>
   <%- @content %>
 </body>
 

src/collections/form.css

@@ -415,7 +415,7 @@
 
 /* Standard */
 .ui.small.form {
-  font-size: 14px;
+  font-size: 0.875em;
 }
 .ui.small.form textarea,
 .ui.small.form input[type="text"],
@@ -424,13 +424,9 @@
   font-size: 1em;
 }
 
-.ui.form {
-  font-size: 16px;
-}
-
 /* Large */
 .ui.large.form {
-  font-size: 18px;
+  font-size: 1.125em;
 }
 .ui.large.form label {
   font-weight: bold;

src/collections/grid.css

@@ -34,22 +34,22 @@
 }
 @media only screen and (min-width : 1000px) {
   .ui.responsive.grid {
-    padding: 0% 7.5%;
+    padding: 0% 12.5%;
   }
 }
 @media only screen and (min-width : 1500px) {
   .ui.responsive.grid {
-    padding: 0% 10%;
+    padding: 0% 15%;
   }
 }
 @media only screen and (min-width : 1750px) {
   .ui.responsive.grid {
-    padding: 0% 15%;
+    padding: 0% 20%;
   }
 }
 @media only screen and (min-width : 2000px) {
   .ui.responsive.grid {
-    padding: 0% 20%;
+    padding: 0% 27%;
   }
 }
 
@@ -278,13 +278,29 @@
   Vertically Centered
 -----------------------*/
 
-
 /* Vertical Centered */
-.ui.centered.grid .column,
-.ui.centered.column {
+.ui.aligned.grid,
+.ui.grid .aligned.row {
+  display: table;
+  width: 100%;
+}
+.ui.aligned.grid .column,
+.ui.grid .aligned.row .column {
   display: table-cell;
+}
+
+.ui.top.aligned.grid .column,
+.ui.grid .top.aligned.row .column {
+  vertical-align: top;
+}
+.ui.middle.aligned.grid .column,
+.ui.grid .middle.aligned.row .column {
   vertical-align: middle;
 }
+.ui.bottom.aligned.grid .column,
+.ui.grid .bottom.aligned.row .column {
+  vertical-align: bottom;
+}
 
 
 /*-------------------

src/collections/menu.css

@@ -433,12 +433,12 @@
 .ui.contrasting.menu .item > a {
   color: #FFFFFF;
 }
-.ui.link.menu .item:hover,
-.ui.menu .item.hover,
-.ui.menu .link.item:hover,
-.ui.menu a.item:hover,
-.ui.menu .dropdown.item.hover,
-.ui.menu .dropdown.item:hover {
+.ui.link.contrasting.menu .item:hover,
+.ui.contrasting.menu .item.hover,
+.ui.contrasting.menu .link.item:hover,
+.ui.contrasting.menu a.item:hover,
+.ui.contrasting.menu .dropdown.item.hover,
+.ui.contrasting.menu .dropdown.item:hover {
   background-color: rgba(255, 255, 255, 0.05);
 }
 .ui.contrasting.menu .item .item,
@@ -992,14 +992,14 @@
 ---------------*/
 
 .ui.small.menu .item {
-  font-size: 14px;
+  font-size: 0.875rem;
 }
 .ui.small.vertical.menu {
-  width: 200px;
+  width: 18rem;
 }
 
 .ui.menu .item {
-  font-size: 16px;
+  font-size: 1rem;
 }
 .ui.vertical.menu {
   width: 230px;
@@ -1007,7 +1007,7 @@
 
 
 .ui.large.menu .item {
-  font-size: 18px;
+  font-size: 1.125rem;
 }
 .ui.large.vertical.menu {
   width: 275px;

src/elements/block.css

@@ -23,7 +23,6 @@
   background-color: rgba(0, 0, 0, 0.04);
   padding: 1em;
 
-  font-size: 16px;
   line-height: 1.33;
   color: rgba(0, 0, 0, 0.6);
   
@@ -245,17 +244,17 @@
 ---------------*/
 
 .ui.small.block {
-  font-size: 14px;
+  font-size: 0.875em;
 }
 .ui.block {
-  font-size: 16px;
+  font-size: 1em;
 }
 .ui.large.block {
-  font-size: 18px;
+  font-size: 1.125em;
 }
 .ui.huge.block {
-  font-size: 24px;
+  font-size: 1.5em;
 }
 .ui.massive.block {
-  font-size: 32px;
+  font-size: 2px;
 }

src/elements/icons.css

@@ -21,16 +21,20 @@ i.icon {
   width: 1em;
   height: 1em;
 
-  margin: 0px 0.2em 0px 0px;
+  margin: 0em 0.2em 0em 0em;
 
   font-style: normal;
   line-height: 1;
   font-weight: normal;
   text-decoration: inherit;
   text-align: center;
-  -webkit-font-smoothing: antialiased;
 
   vertical-align: baseline;
+  
+  -webkit-font-smoothing: antialiased;
+  -moz-font-smoothing: antialiased;
+  font-smoothing: antialiased;
+
 }
 i.icon:before {
   font-family: 'Icons';