Moving whole grid to flex

dist/components/container.css

@@ -32,16 +32,16 @@
     margin-right: auto !important;
   }
 }
-@media only screen and (min-width: 988px) and (max-width: 1228px) {
+@media only screen and (min-width: 988px) and (max-width: 1148px) {
   .ui.container {
     width: 960px;
     margin-left: auto !important;
     margin-right: auto !important;
   }
 }
-@media only screen and (min-width: 1228px) {
+@media only screen and (min-width: 1148px) {
   .ui.container {
-    width: 1200px;
+    width: 1120px;
     margin-left: auto !important;
     margin-right: auto !important;
   }
@@ -58,7 +58,7 @@
   max-width: 700px !important;
   line-height: 1.5;
 }
-.ui.text.container p {
+.ui.text.container {
   font-size: 1.14285714rem;
 }
 

dist/components/container.min.css

@@ -7,4 +7,4 @@
  * Released under the MIT license
  * http://opensource.org/licenses/MIT
  *
- */.ui.container{display:block;max-width:100%!important}@media only screen and (max-width:780px){.ui.container{width:auto;margin-left:1em!important;margin-right:1em!important}}@media only screen and (min-width:781px)and (max-width:991px){.ui.container{width:752px;margin-left:auto!important;margin-right:auto!important}}@media only screen and (min-width:988px)and (max-width:1228px){.ui.container{width:960px;margin-left:auto!important;margin-right:auto!important}}@media only screen and (min-width:1228px){.ui.container{width:1200px;margin-left:auto!important;margin-right:auto!important}}.ui.text.container{display:block;font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;max-width:700px!important;line-height:1.5}.ui.text.container p{font-size:1.14285714rem}.ui[class*="left aligned"].container{text-align:left}.ui[class*="center aligned"].container{text-align:center}.ui[class*="right aligned"].container{text-align:right}
+ */.ui.container{display:block;max-width:100%!important}@media only screen and (max-width:780px){.ui.container{width:auto;margin-left:1em!important;margin-right:1em!important}}@media only screen and (min-width:781px)and (max-width:991px){.ui.container{width:752px;margin-left:auto!important;margin-right:auto!important}}@media only screen and (min-width:988px)and (max-width:1148px){.ui.container{width:960px;margin-left:auto!important;margin-right:auto!important}}@media only screen and (min-width:1148px){.ui.container{width:1120px;margin-left:auto!important;margin-right:auto!important}}.ui.text.container{display:block;font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;max-width:700px!important;line-height:1.5;font-size:1.14285714rem}.ui[class*="left aligned"].container{text-align:left}.ui[class*="center aligned"].container{text-align:center}.ui[class*="right aligned"].container{text-align:right}

dist/components/grid.css

@@ -15,19 +15,24 @@
 *******************************/
 
 .ui.grid {
-  display: block;
-  text-align: left;
-  font-size: 0em;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: row;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  -webkit-flex-wrap: wrap;
+      -ms-flex-wrap: wrap;
+          flex-wrap: wrap;
+  -webkit-box-align: start;
+  -webkit-align-items: flex-start;
+      -ms-flex-align: start;
+          align-items: flex-start;
   padding: 0em;
 }
-.ui.grid:after,
-.ui.grid > .row:after {
-  content: '';
-  display: block;
-  height: 0px;
-  clear: both;
-  visibility: hidden;
-}
 
 /*----------------------
       Remove Gutters
@@ -63,7 +68,6 @@
 .ui.grid > .row > .column {
   position: relative;
   display: inline-block;
-  font-size: 1rem;
   width: 6.25%;
   padding-left: 1rem;
   padding-right: 1rem;
@@ -80,10 +84,24 @@
 
 .ui.grid > .row {
   position: relative;
-  display: block;
-  width: auto !important;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: row;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  -webkit-flex-wrap: wrap;
+      -ms-flex-wrap: wrap;
+          flex-wrap: wrap;
+  -webkit-box-align: start;
+  -webkit-align-items: flex-start;
+      -ms-flex-align: start;
+          align-items: flex-start;
+  width: 100% !important;
   padding: 0rem;
-  font-size: 0rem;
   padding-top: 1rem;
   padding-bottom: 1rem;
 }
@@ -193,8 +211,8 @@ body > .ui.grid {
     width: auto;
     margin-left: 0em;
     margin-right: 0em;
-    padding-left: 15%;
-    padding-right: 15%;
+    padding-left: 18%;
+    padding-right: 18%;
   }
 }
 @media only screen and (min-width: 1920px) {
@@ -1018,9 +1036,11 @@ body > .ui.grid {
 
 .ui.grid [class*="left floated"].column {
   float: left;
+  margin-right: auto;
 }
 .ui.grid [class*="right floated"].column {
   float: right;
+  margin-left: auto;
 }
 
 /*----------------------
@@ -1458,39 +1478,6 @@ body > .ui.grid {
       Equal Height
 -----------------------*/
 
-.ui[class*="equal height"].grid {
-  display: table;
-  table-layout: fixed;
-}
-.ui[class*="equal height"].grid > .row,
-.ui.grid > [class*="equal height"].row {
-  display: table;
-  table-layout: fixed;
-  width: 100% !important;
-}
-.ui[class*="equal height"].grid > .column:not(.row),
-.ui[class*="equal height"].grid > .row > .column,
-.ui.grid > [class*="equal height"].row > .column {
-  display: table-cell;
-}
-
-/* Flexbox (Experimental / Overrides Where Supported) */
-.ui[class*="equal height"].grid,
-.ui[class*="equal height"].grid > .row,
-.ui.grid > [class*="equal height"].row {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-  -webkit-flex-direction: row;
-      -ms-flex-direction: row;
-          flex-direction: row;
-  -webkit-flex-wrap: wrap;
-      -ms-flex-wrap: wrap;
-          flex-wrap: wrap;
-}
 .ui[class*="equal height"].grid > .column:not(.row),
 .ui[class*="equal height"].grid > .row > .column,
 .ui.grid > [class*="equal height"].row > .column {
@@ -1505,39 +1492,6 @@ body > .ui.grid {
       Equal Width
 -----------------------*/
 
-.ui[class*="equal width"].grid {
-  display: table;
-  table-layout: fixed;
-}
-.ui[class*="equal width"].grid > .row,
-.ui.grid > [class*="equal width"].row {
-  display: table;
-  table-layout: fixed;
-  width: 100% !important;
-}
-.ui[class*="equal width"].grid > .column:not(.row),
-.ui[class*="equal width"].grid > .row > .column,
-.ui.grid > [class*="equal width"].row > .column {
-  display: table-cell;
-}
-
-/* Flexbox (Experimental / Overrides Where Supported) */
-.ui[class*="equal width"].grid,
-.ui[class*="equal width"].grid > .row,
-.ui.grid > [class*="equal width"].row {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-  -webkit-flex-direction: row;
-      -ms-flex-direction: row;
-          flex-direction: row;
-  -webkit-flex-wrap: wrap;
-      -ms-flex-wrap: wrap;
-          flex-wrap: wrap;
-}
 .ui[class*="equal width"].grid > .column:not(.row),
 .ui[class*="equal width"].grid > .row > .column,
 .ui.grid > [class*="equal width"].row > .column {

dist/components/menu.css

@@ -246,7 +246,7 @@
 /* Menu Items */
 .ui.menu .ui.dropdown .menu > .item {
   font-size: 1em !important;
-  padding: 0.92857143em 1.14285714em !important;
+  padding: 0.71428571em 1.14285714em !important;
   background: transparent !important;
   color: rgba(0, 0, 0, 0.8) !important;
   text-transform: none !important;

dist/semantic.css

@@ -3427,7 +3427,7 @@ input::selection {
   }
 }
 
-@media only screen and (min-width: 988px) and (max-width: 1228px) {
+@media only screen and (min-width: 988px) and (max-width: 1148px) {
   .ui.container {
     width: 960px;
     margin-left: auto !important;
@@ -3435,9 +3435,9 @@ input::selection {
   }
 }
 
-@media only screen and (min-width: 1228px) {
+@media only screen and (min-width: 1148px) {
   .ui.container {
-    width: 1200px;
+    width: 1120px;
     margin-left: auto !important;
     margin-right: auto !important;
   }
@@ -3454,7 +3454,7 @@ input::selection {
   line-height: 1.5;
 }
 
-.ui.text.container p {
+.ui.text.container {
   font-size: 1.14285714rem;
 }
 
@@ -14779,21 +14779,25 @@ ol.ui.horizontal.list li:before,
 *******************************/
 
 .ui.grid {
-  display: block;
-  text-align: left;
-  font-size: 0em;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -webkit-box-align: start;
+  -webkit-align-items: flex-start;
+  -ms-flex-align: start;
+  align-items: flex-start;
   padding: 0em;
 }
 
-.ui.grid:after,
-.ui.grid > .row:after {
-  content: '';
-  display: block;
-  height: 0px;
-  clear: both;
-  visibility: hidden;
-}
-
 /*----------------------
       Remove Gutters
 -----------------------*/
@@ -14831,7 +14835,6 @@ ol.ui.horizontal.list li:before,
 .ui.grid > .row > .column {
   position: relative;
   display: inline-block;
-  font-size: 1rem;
   width: 6.25%;
   padding-left: 1rem;
   padding-right: 1rem;
@@ -14849,10 +14852,24 @@ ol.ui.horizontal.list li:before,
 
 .ui.grid > .row {
   position: relative;
-  display: block;
-  width: auto !important;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -webkit-box-align: start;
+  -webkit-align-items: flex-start;
+  -ms-flex-align: start;
+  align-items: flex-start;
+  width: 100% !important;
   padding: 0rem;
-  font-size: 0rem;
   padding-top: 1rem;
   padding-bottom: 1rem;
 }
@@ -14970,8 +14987,8 @@ body > .ui.grid {
     width: auto;
     margin-left: 0em;
     margin-right: 0em;
-    padding-left: 15%;
-    padding-right: 15%;
+    padding-left: 18%;
+    padding-right: 18%;
   }
 }
 
@@ -15929,10 +15946,12 @@ body > .ui.grid {
 
 .ui.grid [class*="left floated"].column {
   float: left;
+  margin-right: auto;
 }
 
 .ui.grid [class*="right floated"].column {
   float: right;
+  margin-left: auto;
 }
 
 /*----------------------
@@ -16421,43 +16440,6 @@ body > .ui.grid {
       Equal Height
 -----------------------*/
 
-.ui[class*="equal height"].grid {
-  display: table;
-  table-layout: fixed;
-}
-
-.ui[class*="equal height"].grid > .row,
-.ui.grid > [class*="equal height"].row {
-  display: table;
-  table-layout: fixed;
-  width: 100% !important;
-}
-
-.ui[class*="equal height"].grid > .column:not(.row),
-.ui[class*="equal height"].grid > .row > .column,
-.ui.grid > [class*="equal height"].row > .column {
-  display: table-cell;
-}
-
-/* Flexbox (Experimental / Overrides Where Supported) */
-
-.ui[class*="equal height"].grid,
-.ui[class*="equal height"].grid > .row,
-.ui.grid > [class*="equal height"].row {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-}
-
 .ui[class*="equal height"].grid > .column:not(.row),
 .ui[class*="equal height"].grid > .row > .column,
 .ui.grid > [class*="equal height"].row > .column {
@@ -16472,43 +16454,6 @@ body > .ui.grid {
       Equal Width
 -----------------------*/
 
-.ui[class*="equal width"].grid {
-  display: table;
-  table-layout: fixed;
-}
-
-.ui[class*="equal width"].grid > .row,
-.ui.grid > [class*="equal width"].row {
-  display: table;
-  table-layout: fixed;
-  width: 100% !important;
-}
-
-.ui[class*="equal width"].grid > .column:not(.row),
-.ui[class*="equal width"].grid > .row > .column,
-.ui.grid > [class*="equal width"].row > .column {
-  display: table-cell;
-}
-
-/* Flexbox (Experimental / Overrides Where Supported) */
-
-.ui[class*="equal width"].grid,
-.ui[class*="equal width"].grid > .row,
-.ui.grid > [class*="equal width"].row {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-}
-
 .ui[class*="equal width"].grid > .column:not(.row),
 .ui[class*="equal width"].grid > .row > .column,
 .ui.grid > [class*="equal width"].row > .column {
@@ -17175,7 +17120,7 @@ body > .ui.grid {
 
 .ui.menu .ui.dropdown .menu > .item {
   font-size: 1em !important;
-  padding: 0.92857143em 1.14285714em !important;
+  padding: 0.71428571em 1.14285714em !important;
   background: transparent !important;
   color: rgba(0, 0, 0, 0.8) !important;
   text-transform: none !important;
@@ -18351,7 +18296,9 @@ Floated Menu / Item
   background: rgba(255, 255, 255, 0.08);
 }
 
-.ui.inverted.menu .item:hover:before {
+.ui.inverted.menu .dropdown.item:hover:before,
+.ui.inverted.menu .link.item:hover:before,
+.ui.inverted.menu a.item:hover:before {
   background: none;
 }
 

examples/fixed-menu.html

@@ -21,6 +21,8 @@
   <link rel="stylesheet" type="text/css" href="../dist/components/divider.css">
   <link rel="stylesheet" type="text/css" href="../dist/components/list.css">
   <link rel="stylesheet" type="text/css" href="../dist/components/segment.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/dropdown.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/icon.css">
 
   <style type="text/css">
   body {
@@ -51,8 +53,24 @@
         Project Name
       </div>
       <a href="#" class="item">Home</a>
-      <a href="#" class="item">Features</a>
-      <a href="#" class="item">Contact</a>
+      <a href="#" class="ui simple dropdown item">
+        Dropdown <i class="dropdown icon"></i>
+        <div class="menu">
+          <div class="item">Link Item</div>
+          <div class="item">Link Item</div>
+          <div class="divider"></div>
+          <div class="header">Header Item</div>
+          <div class="item">
+            <i class="dropdown icon"></i>
+            Sub Menu
+            <div class="menu">
+              <div class="item">Link Item</div>
+              <div class="item">Link Item</div>
+            </div>
+          </div>
+          <div class="item">Link Item</div>
+        </div>
+      </a>
     </div>
   </div>
 

examples/grid.html

@@ -0,0 +1,389 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <!-- Standard Meta -->
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+
+  <!-- Site Properities -->
+  <title>Fixed Menu Example - Semantic</title>
+
+  <link rel="stylesheet" type="text/css" href="../dist/components/reset.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/site.css">
+
+  <link rel="stylesheet" type="text/css" href="../dist/components/container.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/divider.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/grid.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/header.css">
+
+  <style type="text/css">
+
+  /* Some basic formatting */
+  code {
+    background-color: #E0E0E0;
+    padding: 0.25em 0.3em;
+    font-family: 'Lato';
+    font-weight: bold;
+  }
+  .container {
+    padding: 5em 0em;
+  }
+  .ui.block.header,
+  .first {
+    margin-top: 5em;
+  }
+
+  .ui.block.header:first-child {
+    margin-top: 0em;
+  }
+  .ui.block.header {
+    margin-left: -4rem;
+    margin-right: -4rem;
+    padding-left: 4rem;
+    padding-right: 4rem;
+  }
+
+  h1,
+  h3 {
+    margin-top: 10em;
+  }
+
+  /* Shows content box (not negative margins) */
+  .grid {
+    position: relative;
+  }
+  .grid:before {
+    position: absolute;
+    top: 1rem;
+    left: 1rem;
+    background-color: #F0F0F0;
+    content: '';
+    width: calc(100% - 2rem);
+    height: calc(100% - 2rem);
+    box-shadow: 0px 0px 0px 1px #DDDDDD inset;
+  }
+  .ui.divided.grid:before,
+  .celled.grid:before {
+    display: none;
+  }
+  .ui.aligned .column:before {
+    display: none;
+  }
+  .grid .column:not(.row):not(.grid):after {
+    background-color: rgba(86,61,124,.15);
+    box-shadow: 0px 0px 0px 1px rgba(86,61,124,.2) inset;
+    content: "";
+    display: block;
+    min-height: 50px;
+  }
+  </style>
+
+</head>
+<body>
+  <div class="ui text container">
+      <h1 class="ui inverted block header">Top Level Grids</h1>
+
+      <p>There are two ways to lay out page content inside a grid. Each has its own benefits and drawbacks</p>
+
+      <h3 class="first">Page Grid</h3>
+      <p>A <code>ui page grid</code> uses <code>padding</code> to maintain fluid page gutters. Each columns width will continuously adjust as your browser width changes to maintain the same percentage of overall browser width</p>
+      <p>Page grids work best for wide multi-column pages like homepages.</p>
+  </div>
+
+  <div class="ui page grid">
+    <div class="column"></div>
+    <div class="column"></div>
+    <div class="column"></div>
+    <div class="column"></div>
+    <div class="column"></div>
+    <div class="column"></div>
+    <div class="column"></div>
+    <div class="column"></div>
+    <div class="column"></div>
+    <div class="column"></div>
+    <div class="column"></div>
+    <div class="column"></div>
+    <div class="column"></div>
+    <div class="column"></div>
+    <div class="column"></div>
+    <div class="column"></div>
+  </div>
+
+  <div class="ui text container">
+      <h3 class="first">Container</h3>
+      <p>A container is a fixed width element that wraps your site's content. It is not fluid in size and uses <b>margin</b> to center. Containers work best for centered content that is placed inside a containing box like a <code>ui segment</code>
+      </p>
+  </div>
+
+  <div class="ui container">
+    <div class="ui grid">
+      <div class="column"></div>
+      <div class="column"></div>
+      <div class="column"></div>
+      <div class="column"></div>
+      <div class="column"></div>
+      <div class="column"></div>
+      <div class="column"></div>
+      <div class="column"></div>
+      <div class="column"></div>
+      <div class="column"></div>
+      <div class="column"></div>
+      <div class="column"></div>
+      <div class="column"></div>
+      <div class="column"></div>
+      <div class="column"></div>
+      <div class="column"></div>
+    </div>
+  </div>
+  <div class="ui text container">
+    <h3 class="first">Text Container</h3>
+    <p>Sometimes you just need to put a single column of centered text on a page. A <code>ui text container</code> is a special type of container designed to optimize for a single flowing column of text, like this instructions on this page.
+    </p>
+    <p>Text containers <b>do not need to use grids</b> and help simplify basic page layouts.</p.
+  </div>
+
+
+  <div class="ui text container">
+
+      <h1 class="ui inverted block header">Setting Up Grids</h1>
+
+      <h3 class="first">Column Flow</h3>
+      <p>A grid does not necessarily need to specify rows. If you include <code>columns</code> as direct child of <code>ui grid</code> content will automatically flow to the next row when all the grid columns are taken in the current row</b>.</p>
+
+      <div class="ui grid">
+        <div class="four wide column"></div>
+        <div class="four wide column"></div>
+        <div class="four wide column"></div>
+        <div class="four wide column"></div>
+        <div class="four wide column"></div>
+        <div class="four wide column"></div>
+        <div class="four wide column"></div>
+        <div class="four wide column"></div>
+      </div>
+
+      <h3 class="first">Clearing Rows</h3>
+      <p>Adding row wrappers allow you to manually specify you want a new row to begin. This can be useful when centering content with a  <code>ui centered grid</code>.</p>
+
+      <div class="ui centered grid">
+        <div class="four wide column"></div>
+        <div class="four wide column"></div>
+        <div class="four wide column"></div>
+        <div class="row">
+          <div class="four wide column"></div>
+          <div class="four wide column"></div>
+          <div class="four wide column"></div>
+          <div class="four wide column"></div>
+        </div>
+        <div class="four wide column"></div>
+      </div>
+
+
+      <h3 class="first">Special Variations</h3>
+      <p>Some special variations that format grids like tables require you to specify rows. For example a <code>divided grid</code> or a <code>celled grid</code> requires row wrappers.</p>
+
+      <div class="ui horizontal section divider">Celled Grid</div>
+      <div class="ui celled grid">
+        <div class="row">
+          <div class="four wide column"></div>
+          <div class="four wide column"></div>
+          <div class="four wide column"></div>
+          <div class="four wide column"></div>
+        </div>
+        <div class="row">
+          <div class="four wide column"></div>
+          <div class="four wide column"></div>
+          <div class="four wide column"></div>
+          <div class="four wide column"></div>
+        </div>
+      </div>
+
+      <div class="ui horizontal section divider">Internally Celled Grid</div>
+
+      <div class="ui internally celled grid">
+        <div class="row">
+          <div class="four wide column"></div>
+          <div class="four wide column"></div>
+          <div class="four wide column"></div>
+          <div class="four wide column"></div>
+        </div>
+        <div class="row">
+          <div class="four wide column"></div>
+          <div class="four wide column"></div>
+          <div class="four wide column"></div>
+          <div class="four wide column"></div>
+        </div>
+      </div>
+
+
+      <div class="ui horizontal section divider">Divided Grid</div>
+
+      <div class="ui divided grid">
+        <div class="row">
+          <div class="four wide column"></div>
+          <div class="four wide column"></div>
+          <div class="four wide column"></div>
+          <div class="four wide column"></div>
+        </div>
+        <div class="row">
+          <div class="four wide column"></div>
+          <div class="four wide column"></div>
+          <div class="four wide column"></div>
+          <div class="four wide column"></div>
+        </div>
+      </div>
+
+      <div class="ui horizontal section divider">Vertically Divided Grid</div>
+
+      <div class="ui vertically divided grid">
+        <div class="row">
+          <div class="four wide column"></div>
+          <div class="four wide column"></div>
+          <div class="four wide column"></div>
+          <div class="four wide column"></div>
+        </div>
+        <div class="row">
+          <div class="four wide column"></div>
+          <div class="four wide column"></div>
+          <div class="four wide column"></div>
+          <div class="four wide column"></div>
+        </div>
+      </div>
+
+      <h1 class="ui inverted block header">Adjusting Grids</h1>
+
+
+      <h3 class="ui header">Centering Content</h3>
+      <p>If a row does not take up all sixteen grid columns, you can use a <code>ui centered grid</code>, <code>centered row</code>, or <code>centered column</code> to center the column contents inside the grid.
+      </p>
+      <div class="ui two column centered grid">
+        <div class="column"></div>
+        <div class="four column centered row">
+          <div class="column"></div>
+          <div class="column"></div>
+        </div>
+      </div>
+
+      <h3 class="ui header">Floating Rows</h3>
+      <p>Since Semantic UI's grid is based on flex box, a <code>left floated</code> item should come first, and a <code>right floated</code> item last in its row.</p>
+
+      <div class="ui grid">
+        <div class="left floated six wide column">
+          <div class="ui segment">
+            Left floated
+          </div>
+        </div>
+        <div class="right floated six wide column">
+          <div class="ui segment">
+            Right floated
+          </div>
+        </div>
+      </div>
+
+
+      <h3 class="ui header">Text Alignment</h3>
+      <p>You can specify text alignment using alignment variations on a grid, row, or column level.</p>
+
+      <div class="ui grid">
+        <div class="right aligned eight wide column">
+          right aligned column
+        </div>
+        <div class="left aligned eight wide column">
+          left aligned column
+        </div>
+        <div class="center aligned two column row">
+          <div class="column">
+            Center aligned row
+          </div>
+          <div class="column">
+            Center aligned row
+          </div>
+        </div>
+        <div class="sixteen wide column">
+          Right Aligned Grid
+        </div>
+      </div>
+
+      <h3 class="ui header">Vertical Alignment</h3>
+      <p>You can specify vertical alignment on a grid, row, or column level.</p>
+      <div class="ui middle aligned four column centered grid">
+        <div class="row">
+          <div class="column">
+            <img class="ui wireframe image" src="images/wireframe/image.png">
+          </div>
+          <div class="column">
+            <img class="ui wireframe image" src="images/wireframe/image.png">
+            <img class="ui wireframe image" src="images/wireframe/image.png">
+          </div>
+          <div class="column">
+            <img class="ui wireframe image" src="images/wireframe/image.png">
+          </div>
+        </div>
+      </div>
+
+
+      <h3 class="first">Specifying Columns</h3>
+      <p>Specifying a column count will divide columns into rows of predetermined column count. Additional columns will automatically flow to the next row.</p>
+      <div class="ui three column grid">
+        <div class="column">column</div>
+        <div class="column">column</div>
+        <div class="column">column</div>
+        <div class="column">column</div>
+        <div class="column">column</div>
+        <div class="column">column</div>
+      </div>
+
+      <h3>Equal Width Columns</h3>
+      <p>Specifying an <code>equal width grid</code> will automatically determine column sizes to fit evenly inside one row</p>
+      <div class="ui equal width grid">
+        <div class="row">
+          <div class="column">column</div>
+          <div class="column">column</div>
+          <div class="column">column</div>
+          <div class="column">column</div>
+        </div>
+        <div class="row">
+          <div class="column">column</div>
+          <div class="column">column</div>
+          <div class="column">column</div>
+        </div>
+      </div>
+
+      <h3>Specifying Column Width</h3>
+      <p>Get three columns <strong>starting at desktops and scaling to large desktops</strong> of various widths Remember, grid columns should add up to sixteen for a single horizontal block More than that, and columns start stacking no matter the viewport</p>
+      <div class="ui three column grid">
+        <div class="four wide column">four wide column</div>
+        <div class="eight wide column">eight wide column</div>
+        <div class="four wide column">four wide column</div>
+      </div>
+
+
+      <h3>Specifying Device Visibility</h3>
+      <p>The Semantic grid system has three tiers of classes: mobile (phones), tablet (tablets), computer (desktops and larger desktops) You can use nearly any combination of these classes to create more dynamic and flexible layouts</p>
+      <p>Breakpoints are 768px and below for mobile, 768-992px for tablet and 992px+ for computer</p>
+      <p>In these cases below, we'd like to recommend you to change size of your viewport or use right devices for responsiveness experience</p>
+      <div class="ui grid">
+        <div class="two column computer only row">
+          <div class="ten wide column">ten wide column computer only</div>
+          <div class="six wide column">six wide column computer only</div>
+        </div>
+        <div class="sixteen wide mobile only column">sixteen wide column mobile only</div>
+        <div class="three column computer only row">
+          <div class="column">computer only row</div>
+          <div class="column">computer only row</div>
+          <div class="column">computer only row</div>
+        </div>
+        <div class="two column mobile only row">
+          <div class="column">mobile only column</div>
+          <div class="column">mobile only column</div>
+        </div>
+        <div class="two column row">
+          <div class="column">column</div>
+          <div class="column">column</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+
+</html>

examples/starter.html

@@ -1,52 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <!-- Standard Meta -->
-  <meta charset="utf-8" />
-  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
-
-  <!-- Site Properities -->
-  <title>Starter Example - Semantic</title>
-
-  <link rel="stylesheet" type="text/css" href="../dist/components/container.css">
-  <link rel="stylesheet" type="text/css" href="../dist/components/header.css">
-  <link rel="stylesheet" type="text/css" href="../dist/components/menu.css">
-
-  <style type="text/css">
-  body > .container {
-    padding-top: 7em;
-  }
-  .wireframe {
-    margin-top: 2em;
-  }
-  </style>
-
-</head>
-<body>
-
-  <div class="ui fixed inverted menu">
-    <div class="ui container">
-      <a href="#" class="item">Project Name</a>
-      <a href="#" class="item">Home</a>
-      <a href="#" class="item">Features</a>
-      <a href="#" class="item">Contact</a>
-    </div>
-  </div>
-
-  <div class="ui center aligned container">
-    <h1 class="ui header">Semantic UI starter template</h1>
-    <p>Use this document as a way to quickly start any new project.</p>
-    <p>All you get is this text and a mostly barebones HTML document.</p>
-    <img class="wireframe" src="images/wireframe/paragraph.png">
-    <img class="wireframe" src="images/wireframe/paragraph.png">
-    <img class="wireframe" src="images/wireframe/paragraph.png">
-    <img class="wireframe" src="images/wireframe/paragraph.png">
-    <img class="wireframe" src="images/wireframe/paragraph.png">
-    <img class="wireframe" src="images/wireframe/paragraph.png">
-    <img class="wireframe" src="images/wireframe/paragraph.png">
-  </div>
-
-</body>
-
-</html>

examples/sticky-menu.html

@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <!-- Standard Meta -->
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+
+  <!-- Site Properities -->
+  <title>Fixed Menu Example - Semantic</title>
+
+  <link rel="stylesheet" type="text/css" href="../dist/components/reset.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/site.css">
+
+  <link rel="stylesheet" type="text/css" href="../dist/components/container.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/grid.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/header.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/image.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/menu.css">
+
+  <link rel="stylesheet" type="text/css" href="../dist/components/divider.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/list.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/segment.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/dropdown.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/icon.css">
+
+  <style type="text/css">
+  body {
+    background-color: #FFFFFF;
+  }
+  .ui.menu .item img.logo {
+    margin-right: 1.5em;
+  }
+  .main.container {
+    margin-top: 7em;
+  }
+  .wireframe {
+    margin-top: 2em;
+  }
+  .ui.footer.segment {
+    margin: 5em 0em 0em;
+    padding: 5em 0em;
+  }
+  </style>
+
+</head>
+<body>
+
+  <div class="ui fixed inverted menu">
+    <div class="ui container">
+      <div href="#" class="header item">
+        <img class="logo" src="images/logo.png">
+        Project Name
+      </div>
+      <a href="#" class="item">Home</a>
+      <a href="#" class="ui simple dropdown item">
+        Dropdown <i class="dropdown icon"></i>
+        <div class="menu">
+          <div class="item">Link Item</div>
+          <div class="item">Link Item</div>
+          <div class="divider"></div>
+          <div class="header">Header Item</div>
+          <div class="item">
+            <i class="dropdown icon"></i>
+            Sub Menu
+            <div class="menu">
+              <div class="item">Link Item</div>
+              <div class="item">Link Item</div>
+            </div>
+          </div>
+          <div class="item">Link Item</div>
+        </div>
+      </a>
+    </div>
+  </div>
+
+  <div class="ui main text container">
+    <h1 class="ui header">Semantic UI Fixed Template</h1>
+    <p>This is a basic fixed menu template using fixed size containers.</p>
+    <p>A text container is used for the main container, which is useful for single column layouts</p>
+    <img class="wireframe" src="images/wireframe/media-paragraph.png">
+    <img class="wireframe" src="images/wireframe/paragraph.png">
+    <img class="wireframe" src="images/wireframe/paragraph.png">
+    <img class="wireframe" src="images/wireframe/paragraph.png">
+    <img class="wireframe" src="images/wireframe/paragraph.png">
+    <img class="wireframe" src="images/wireframe/paragraph.png">
+    <img class="wireframe" src="images/wireframe/paragraph.png">
+  </div>
+
+  <div class="ui inverted vertical footer segment">
+    <div class="ui center aligned container">
+      <div class="ui stackable inverted divided equal height grid">
+        <div class="three wide column">
+          <h4 class="ui inverted header">Group 1</h4>
+          <div class="ui inverted link list">
+            <a href="#" class="item">Link One</a>
+            <a href="#" class="item">Link Two</a>
+            <a href="#" class="item">Link Three</a>
+            <a href="#" class="item">Link Four</a>
+          </div>
+        </div>
+        <div class="three wide column">
+          <h4 class="ui inverted header">Group 2</h4>
+          <div class="ui inverted link list">
+            <a href="#" class="item">Link One</a>
+            <a href="#" class="item">Link Two</a>
+            <a href="#" class="item">Link Three</a>
+            <a href="#" class="item">Link Four</a>
+          </div>
+        </div>
+        <div class="three wide column">
+          <h4 class="ui inverted header">Group 3</h4>
+          <div class="ui inverted link list">
+            <a href="#" class="item">Link One</a>
+            <a href="#" class="item">Link Two</a>
+            <a href="#" class="item">Link Three</a>
+            <a href="#" class="item">Link Four</a>
+          </div>
+        </div>
+        <div class="seven wide column">
+          <h4 class="ui inverted header">Footer Header</h4>
+          <p>Extra space for a call to action inside the footer that could help re-engage users.</p>
+        </div>
+      </div>
+      <div class="ui inverted section divider"></div>
+      <img src="images/logo.png" class="ui centered mini image">
+      <div class="ui horizontal inverted small divided link list">
+        <a class="item" href="#">Site Map</a>
+        <a class="item" href="#">Contact Us</a>
+        <a class="item" href="#">Terms and Conditions</a>
+        <a class="item" href="#">Privacy Policy</a>
+      </div>
+    </div>
+  </div>
+</body>
+
+</html>

src/definitions/collections/grid.less

@@ -23,22 +23,13 @@
 *******************************/
 
 .ui.grid {
-  display: block;
-  text-align: left;
-
-  font-size: 0em;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: flex-start;
   padding: 0em;
 }
 
-.ui.grid:after,
-.ui.grid > .row:after {
-  content: '';
-  display: block;
-  height: 0px;
-  clear: both;
-  visibility: hidden;
-}
-
 /*----------------------
       Remove Gutters
 -----------------------*/
@@ -73,7 +64,6 @@
 .ui.grid > .row > .column {
   position: relative;
   display: inline-block;
-  font-size: 1rem;
 
   width: @oneWide;
   padding-left: (@gutterWidth / 2);
@@ -92,10 +82,12 @@
 
 .ui.grid > .row {
   position: relative;
-  display: block;
-  width: auto !important;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  width: 100% !important;
   padding: 0rem;
-  font-size: 0rem;
   padding-top: (@rowSpacing / 2);
   padding-bottom: (@rowSpacing / 2);
 }
@@ -1025,9 +1017,11 @@ body > .ui.grid {
 
 .ui.grid [class*="left floated"].column {
   float: left;
+  margin-right: auto;
 }
 .ui.grid [class*="right floated"].column {
   float: right;
+  margin-left: auto;
 }
 
 
@@ -1419,30 +1413,6 @@ body > .ui.grid {
       Equal Height
 -----------------------*/
 
-.ui[class*="equal height"].grid {
-  display: table;
-  table-layout: fixed;
-}
-.ui[class*="equal height"].grid > .row,
-.ui.grid > [class*="equal height"].row  {
-  display: table;
-  table-layout: fixed;
-  width: 100% !important;
-}
-.ui[class*="equal height"].grid > .column:not(.row),
-.ui[class*="equal height"].grid > .row > .column,
-.ui.grid > [class*="equal height"].row > .column {
-  display: table-cell;
-}
-
-/* Flexbox (Experimental / Overrides Where Supported) */
-.ui[class*="equal height"].grid,
-.ui[class*="equal height"].grid > .row,
-.ui.grid > [class*="equal height"].row {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-}
 .ui[class*="equal height"].grid > .column:not(.row),
 .ui[class*="equal height"].grid > .row > .column,
 .ui.grid > [class*="equal height"].row > .column {
@@ -1454,37 +1424,12 @@ body > .ui.grid {
       Equal Width
 -----------------------*/
 
-.ui[class*="equal width"].grid {
-  display: table;
-  table-layout: fixed;
-}
-.ui[class*="equal width"].grid > .row,
-.ui.grid > [class*="equal width"].row  {
-  display: table;
-  table-layout: fixed;
-  width: 100% !important;
-}
-.ui[class*="equal width"].grid > .column:not(.row),
-.ui[class*="equal width"].grid > .row > .column,
-.ui.grid > [class*="equal width"].row > .column {
-  display: table-cell;
-}
-
-/* Flexbox (Experimental / Overrides Where Supported) */
-.ui[class*="equal width"].grid,
-.ui[class*="equal width"].grid > .row,
-.ui.grid > [class*="equal width"].row  {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-}
 .ui[class*="equal width"].grid > .column:not(.row),
 .ui[class*="equal width"].grid > .row > .column,
 .ui.grid > [class*="equal width"].row > .column {
   display: inline-block;
   flex-grow: 1;
 }
-
 .ui[class*="equal width"].grid > .wide.column,
 .ui[class*="equal width"].grid > .row > .wide.column,
 .ui.grid > [class*="equal width"].row > .wide.column {

src/definitions/elements/container.less

@@ -71,8 +71,8 @@
   line-height: @textLineHeight;
 }
 
-.ui.text.container p {
-  font-size: @textParagraphSize;
+.ui.text.container {
+  font-size: @textSize;
 }
 
 

src/themes/default/collections/grid.variables

@@ -45,7 +45,7 @@
 
 @largeMonitorWidth: auto;
 @largeMonitorMargin: 0em;
-@largeMonitorGutter: 15%;
+@largeMonitorGutter: 18%;
 
 @widescreenMonitorWidth: auto;
 @widescreenMargin: 0em;

src/themes/default/collections/menu.variables

@@ -130,7 +130,7 @@
 @dropdownMenuBorderRadius: @borderRadius;
 
 @dropdownItemFontSize: @relativeMedium;
-@dropdownItemPadding: @relativeSmall @relativeLarge;
+@dropdownItemPadding: @relativeMini @relativeLarge;
 @dropdownItemBackground: transparent;
 @dropdownItemColor: @textColor;
 @dropdownItemTextTransform: none;

src/themes/default/elements/container.variables

@@ -12,7 +12,7 @@
 @mobileWidth: auto;
 @tabletWidth: 752px;
 @smallComputerWidth: 960px;
-@largeComputerWidth: 1200px;
+@largeComputerWidth: 1120px;
 
 @mobileGutter: 1em;
 @tabletGutter: auto;
@@ -23,7 +23,7 @@
 @largestMobileScreen: 780px;
 @tabletBreakpoint: 781px;
 @smallComputerBreakpoint: 988px;
-@largeComputerBreakpoint: 1228px;
+@largeComputerBreakpoint: 1148px;
 
 /*-------------------
        Types
@@ -33,4 +33,4 @@
 @textWidth: 700px;
 @textFontFamily: @pageFont;
 @textLineHeight: 1.5;
-@textParagraphSize: @large;
+@textSize: @large;