Revisions from examples

RELEASE-NOTES.md

@@ -40,6 +40,7 @@
 - **Grid** - Small computer `page grid` gutters have been adjusted from 8% to 3% to allow for roomier layouts on small screens.
 - **Grid** - `center aligned` no longer centers rows, just text. Use `centered grid` to center a grid column on the page.
 - **Header/Table/Divider** - These components now pull border color defaults from `site.variables` instead of using their own values
+- **Image** - `mini image` default width has been increased to `35px`
 - **Icon** - `disabled icon` now have `pointer-events` again.
 - **Input** - Input now use `em` instead of `rem` so they will inherit the size of the elements they are nested inside
 - **Menu** - `secondary pointing menu` has had some slight design tweaks, thinner lines, more padding
@@ -56,9 +57,11 @@
 - **Checkbox** - Fixes nested `dropdown` inside `checkbox` causing issues
 - **Dropdown** - Fixes issue with headers disappearing inside of `ui dropdown` when nested in `ui menu`
 - **Form** - Form sizes and input sizes now inherit from `site.variables`
+- **Grid** - First column on `stackable grid` no longer receives top margin
 - **Grid** - `x column wide` inside `equal width/height` now cannot grow beyond column size
 - **Grid** - Fixes colored grid columns not appearing when not nested in rows
 - **Label** - Labels inside `header` now vertical align better by accounting for line height offset
+- **List** - Fixed `inverted bulleted list` bullet color
 - **Loader** - Fix position of `inline centered loader` to be centered correctly
 - **Message** - Message now uses `@lineHeight` from `site.variables`
 - **Menu** - Menu now has a `min-height` that matches standard item padding

dist/components/container.css

@@ -18,14 +18,14 @@
   display: block;
   max-width: 100% !important;
 }
-@media only screen and (max-width: 767px) {
+@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: 768px) and (max-width: 991px) {
+@media only screen and (min-width: 781px) and (max-width: 991px) {
   .ui.container {
     width: 752px;
     margin-left: auto !important;

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:767px){.ui.container{width:auto;margin-left:1em!important;margin-right:1em!important}}@media only screen and (min-width:768px)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: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}

dist/components/grid.css

@@ -35,7 +35,7 @@
 
 .ui.grid {
   margin-top: -1rem;
-  margin-bottom: -1rem;
+  margin-bottom: 0em;
   margin-left: -1rem;
   margin-right: -1rem;
 }
@@ -50,7 +50,7 @@
 
 /* Collapse Margins on Consecutive Grids */
 .ui.grid + .grid {
-  margin-top: 1rem;
+  margin-top: 0rem;
 }
 
 /*-------------------
@@ -1182,10 +1182,6 @@ body > .ui.grid {
 .ui.grid > [class*="top aligned"].row > .column,
 .ui.grid > [class*="top aligned"].column:not(.row),
 .ui.grid > .row > [class*="top aligned"].column {
-  display: -webkit-inline-box !important;
-  display: -webkit-inline-flex !important;
-  display: -ms-inline-flexbox !important;
-  display: inline-flex !important;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -webkit-flex-direction: column;
@@ -1203,16 +1199,12 @@ body > .ui.grid {
 .ui.grid > [class*="middle aligned"].row > .column,
 .ui.grid > [class*="middle aligned"].column:not(.row),
 .ui.grid > .row > [class*="middle aligned"].column {
-  vertical-align: middle;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -webkit-flex-direction: column;
       -ms-flex-direction: column;
           flex-direction: column;
-  display: -webkit-inline-box !important;
-  display: -webkit-inline-flex !important;
-  display: -ms-inline-flexbox !important;
-  display: inline-flex !important;
+  vertical-align: middle;
   -webkit-box-pack: center !important;
   -webkit-justify-content: center !important;
       -ms-flex-pack: center !important;
@@ -1224,10 +1216,6 @@ body > .ui.grid {
 .ui.grid > [class*="bottom aligned"].row > .column,
 .ui.grid > [class*="bottom aligned"].column:not(.row),
 .ui.grid > .row > [class*="bottom aligned"].column {
-  display: -webkit-inline-box !important;
-  display: -webkit-inline-flex !important;
-  display: -ms-inline-flexbox !important;
-  display: inline-flex !important;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -webkit-flex-direction: column;
@@ -1286,6 +1274,9 @@ body > .ui.grid {
   -webkit-align-items: flex-start !important;
       -ms-flex-align: start !important;
           align-items: flex-start !important;
+  -webkit-align-self: inherit;
+      -ms-flex-item-align: inherit;
+          align-self: inherit;
 }
 
 /* Center Aligned */
@@ -1299,6 +1290,9 @@ body > .ui.grid {
   -webkit-align-items: center !important;
       -ms-flex-align: center !important;
           align-items: center !important;
+  -webkit-align-self: inherit;
+      -ms-flex-item-align: inherit;
+          align-self: inherit;
 }
 
 /* Right Aligned */
@@ -1311,6 +1305,9 @@ body > .ui.grid {
   -webkit-align-items: flex-end !important;
       -ms-flex-align: end !important;
           align-items: flex-end !important;
+  -webkit-align-self: inherit;
+      -ms-flex-item-align: inherit;
+          align-self: inherit;
 }
 
 /* Justified */
@@ -1783,6 +1780,13 @@ body > .ui.grid {
     padding: 0em;
   }
   
+/* Coupling */
+  .ui.container > .ui.stackable.grid > .column,
+  .ui.container > .ui.stackable.grid > .row > .column {
+    padding-left: 0em !important;
+    padding-right: 0em !important;
+  }
+  
 /* Don't pad inside segment or nested grid */
   .ui.grid .ui.stackable.grid,
   .ui.segment:not(.vertical) .ui.stackable.page.grid {
@@ -1817,6 +1821,12 @@ body > .ui.grid {
     padding-top: 2rem !important;
     padding-bottom: 2rem !important;
   }
+  .ui.stackable.celled.grid > .column:not(.row):first-child,
+  .ui.stackable.divided.grid > .column:not(.row):first-child,
+  .ui.stackable.celled.grid > .row > .column:first-child,
+  .ui.stackable.divided.grid > .row > .column:first-child {
+    padding-top: 0em !important;
+  }
 }
 
 /*----------------------

dist/components/image.css

@@ -198,7 +198,7 @@ img.ui.bordered.image {
 .ui.mini.images img,
 .ui.mini.images svg,
 .ui.mini.image {
-  width: 20px;
+  width: 35px;
   height: auto;
   font-size: 0.71428571rem;
 }

dist/components/image.min.css

@@ -7,4 +7,4 @@
  * Released under the MIT license
  * http://opensource.org/licenses/MIT
  *
- */.ui.image{position:relative;display:inline-block;vertical-align:middle;max-width:100%;background-color:transparent}img.ui.image{display:block}.ui.image img,.ui.image svg{display:block;max-width:100%;height:auto}.ui.hidden.image,.ui.hidden.images{display:none}.ui.disabled.image,.ui.disabled.images{cursor:default;opacity:.3}.ui.inline.image,.ui.inline.image img,.ui.inline.image svg{display:inline-block}.ui.top.aligned.image,.ui.top.aligned.image img,.ui.top.aligned.image svg,.ui.top.aligned.images .image{display:inline-block;vertical-align:top}.ui.middle.aligned.image,.ui.middle.aligned.image img,.ui.middle.aligned.image svg,.ui.middle.aligned.images .image{display:inline-block;vertical-align:middle}.ui.bottom.aligned.image,.ui.bottom.aligned.image img,.ui.bottom.aligned.image svg,.ui.bottom.aligned.images .image{display:inline-block;vertical-align:bottom}.ui.rounded.image,.ui.rounded.image img,.ui.rounded.image svg,.ui.rounded.images .image,.ui.rounded.images img,.ui.rounded.images svg{border-radius:.3125em}.ui.bordered.image img,.ui.bordered.image svg,.ui.bordered.images .image,.ui.bordered.images img,.ui.bordered.images svg,img.ui.bordered.image{border:1px solid rgba(0,0,0,.1)}.ui.circular.image,.ui.circular.images{overflow:hidden}.ui.circular.image,.ui.circular.image img,.ui.circular.image svg,.ui.circular.images .image,.ui.circular.images img,.ui.circular.images svg{border-radius:500rem}.ui.fluid.image,.ui.fluid.image img,.ui.fluid.image svg,.ui.fluid.images,.ui.fluid.images img,.ui.fluid.images svg{display:block;width:100%;height:auto}.ui.avatar.image,.ui.avatar.image img,.ui.avatar.image svg,.ui.avatar.images .image,.ui.avatar.images img,.ui.avatar.images svg{margin-right:.25em;display:inline-block;width:2.5em;height:2.5em;border-radius:500rem}.ui.floated.image,.ui.floated.images{float:left;margin-right:1em;margin-bottom:1em}.ui.right.floated.image,.ui.right.floated.images{float:right;margin-right:0;margin-bottom:1em;margin-left:1em}.ui.floated.image:last-child,.ui.floated.images:last-child{margin-bottom:0}.ui.centered.image,.ui.centered.images{margin-left:auto;margin-right:auto}.ui.mini.image,.ui.mini.images .image,.ui.mini.images img,.ui.mini.images svg{width:20px;height:auto;font-size:.71428571rem}.ui.tiny.image,.ui.tiny.images .image,.ui.tiny.images img,.ui.tiny.images svg{width:80px;height:auto;font-size:.85714286rem}.ui.small.image,.ui.small.images .image,.ui.small.images img,.ui.small.images svg{width:150px;height:auto;font-size:.92857143rem}.ui.medium.image,.ui.medium.images .image,.ui.medium.images img,.ui.medium.images svg{width:300px;height:auto;font-size:1rem}.ui.large.image,.ui.large.images .image,.ui.large.images img,.ui.large.images svg{width:450px;height:auto;font-size:1.14285714rem}.ui.big.image,.ui.big.images .image,.ui.big.images img,.ui.big.images svg{width:600px;height:auto;font-size:1.28571429rem}.ui.huge.image,.ui.huge.images .image,.ui.huge.images img,.ui.huge.images svg{width:800px;height:auto;font-size:1.42857143rem}.ui.massive.image,.ui.massive.images .image,.ui.massive.images img,.ui.massive.images svg{width:960px;height:auto;font-size:1.71428571rem}.ui.images{font-size:0;margin:0 -.25rem}.ui.images .image,.ui.images img,.ui.images svg{display:inline-block;margin:0 .25rem .5rem}
+ */.ui.image{position:relative;display:inline-block;vertical-align:middle;max-width:100%;background-color:transparent}img.ui.image{display:block}.ui.image img,.ui.image svg{display:block;max-width:100%;height:auto}.ui.hidden.image,.ui.hidden.images{display:none}.ui.disabled.image,.ui.disabled.images{cursor:default;opacity:.3}.ui.inline.image,.ui.inline.image img,.ui.inline.image svg{display:inline-block}.ui.top.aligned.image,.ui.top.aligned.image img,.ui.top.aligned.image svg,.ui.top.aligned.images .image{display:inline-block;vertical-align:top}.ui.middle.aligned.image,.ui.middle.aligned.image img,.ui.middle.aligned.image svg,.ui.middle.aligned.images .image{display:inline-block;vertical-align:middle}.ui.bottom.aligned.image,.ui.bottom.aligned.image img,.ui.bottom.aligned.image svg,.ui.bottom.aligned.images .image{display:inline-block;vertical-align:bottom}.ui.rounded.image,.ui.rounded.image img,.ui.rounded.image svg,.ui.rounded.images .image,.ui.rounded.images img,.ui.rounded.images svg{border-radius:.3125em}.ui.bordered.image img,.ui.bordered.image svg,.ui.bordered.images .image,.ui.bordered.images img,.ui.bordered.images svg,img.ui.bordered.image{border:1px solid rgba(0,0,0,.1)}.ui.circular.image,.ui.circular.images{overflow:hidden}.ui.circular.image,.ui.circular.image img,.ui.circular.image svg,.ui.circular.images .image,.ui.circular.images img,.ui.circular.images svg{border-radius:500rem}.ui.fluid.image,.ui.fluid.image img,.ui.fluid.image svg,.ui.fluid.images,.ui.fluid.images img,.ui.fluid.images svg{display:block;width:100%;height:auto}.ui.avatar.image,.ui.avatar.image img,.ui.avatar.image svg,.ui.avatar.images .image,.ui.avatar.images img,.ui.avatar.images svg{margin-right:.25em;display:inline-block;width:2.5em;height:2.5em;border-radius:500rem}.ui.floated.image,.ui.floated.images{float:left;margin-right:1em;margin-bottom:1em}.ui.right.floated.image,.ui.right.floated.images{float:right;margin-right:0;margin-bottom:1em;margin-left:1em}.ui.floated.image:last-child,.ui.floated.images:last-child{margin-bottom:0}.ui.centered.image,.ui.centered.images{margin-left:auto;margin-right:auto}.ui.mini.image,.ui.mini.images .image,.ui.mini.images img,.ui.mini.images svg{width:35px;height:auto;font-size:.71428571rem}.ui.tiny.image,.ui.tiny.images .image,.ui.tiny.images img,.ui.tiny.images svg{width:80px;height:auto;font-size:.85714286rem}.ui.small.image,.ui.small.images .image,.ui.small.images img,.ui.small.images svg{width:150px;height:auto;font-size:.92857143rem}.ui.medium.image,.ui.medium.images .image,.ui.medium.images img,.ui.medium.images svg{width:300px;height:auto;font-size:1rem}.ui.large.image,.ui.large.images .image,.ui.large.images img,.ui.large.images svg{width:450px;height:auto;font-size:1.14285714rem}.ui.big.image,.ui.big.images .image,.ui.big.images img,.ui.big.images svg{width:600px;height:auto;font-size:1.28571429rem}.ui.huge.image,.ui.huge.images .image,.ui.huge.images img,.ui.huge.images svg{width:800px;height:auto;font-size:1.42857143rem}.ui.massive.image,.ui.massive.images .image,.ui.massive.images img,.ui.massive.images svg{width:960px;height:auto;font-size:1.71428571rem}.ui.images{font-size:0;margin:0 -.25rem}.ui.images .image,.ui.images img,.ui.images svg{display:inline-block;margin:0 .25rem .5rem}

dist/components/list.css

@@ -521,7 +521,7 @@ ul.ui.list li:before,
   margin-left: -1rem;
   content: '•';
   opacity: 1;
-  color: rgba(0, 0, 0, 0.8);
+  color: inherit;
   vertical-align: top;
 }
 ul.ui.list ul,

dist/components/menu.css

@@ -163,6 +163,9 @@
   display: -ms-flexbox;
   display: flex;
 }
+.ui.menu > .ui.container > .item:first-child {
+  padding-left: 0em;
+}
 
 /*--------------
      Inputs
@@ -344,7 +347,7 @@
 .ui.menu .item > img:not(.ui) {
   display: inline-block;
   vertical-align: middle;
-  margin: -0.5em -0.2em;
+  margin: -0.3em 0em;
   width: 2.5em;
 }
 .ui.vertical.menu .item > img:only-child {
@@ -1296,7 +1299,9 @@ Floated Menu / Item
 .ui.inverted.menu .item:before {
   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;
 }
 .ui.vertical.inverted.menu .item:before {
@@ -1313,7 +1318,7 @@ Floated Menu / Item
 /* Header */
 .ui.inverted.menu .header.item {
   margin: 0em;
-  background: rgba(0, 0, 0, 0.3);
+  background: transparent;
   box-shadow: none;
 }
 

dist/components/segment.css

@@ -38,7 +38,7 @@
 }
 
 /* Vertical */
-.ui[class*="vertical segment"] {
+.ui.vertical.segment {
   margin: 0em;
   padding-left: 0em;
   padding-right: 0em;
@@ -47,12 +47,12 @@
   border: none;
   box-shadow: 0px -1px 0px rgba(34, 36, 38, 0.15) inset;
 }
-.ui[class*="vertical segment"]:last-child {
+.ui.vertical.segment:last-child {
   box-shadow: none;
 }
 
 /* Horizontal */
-.ui[class*="horizontal segment"] {
+.ui.horizontal.segment {
   margin: 0em;
   padding-top: 0em;
   padding-bottom: 0em;

dist/semantic.css

@@ -3411,7 +3411,7 @@ input::selection {
   max-width: 100% !important;
 }
 
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: 780px) {
   .ui.container {
     width: auto;
     margin-left: 1em !important;
@@ -3419,7 +3419,7 @@ input::selection {
   }
 }
 
-@media only screen and (min-width: 768px) and (max-width: 991px) {
+@media only screen and (min-width: 781px) and (max-width: 991px) {
   .ui.container {
     width: 752px;
     margin-left: auto !important;
@@ -9068,7 +9068,7 @@ img.ui.bordered.image {
 .ui.mini.images img,
 .ui.mini.images svg,
 .ui.mini.image {
-  width: 20px;
+  width: 35px;
   height: auto;
   font-size: 0.71428571rem;
 }
@@ -11318,7 +11318,7 @@ ul.ui.list li:before,
   margin-left: -1rem;
   content: '•';
   opacity: 1;
-  color: rgba(0, 0, 0, 0.8);
+  color: inherit;
   vertical-align: top;
 }
 
@@ -12519,7 +12519,7 @@ ol.ui.horizontal.list li:before,
 
 /* Vertical */
 
-.ui[class*="vertical segment"] {
+.ui.vertical.segment {
   margin: 0em;
   padding-left: 0em;
   padding-right: 0em;
@@ -12529,13 +12529,13 @@ ol.ui.horizontal.list li:before,
   box-shadow: 0px -1px 0px rgba(34, 36, 38, 0.15) inset;
 }
 
-.ui[class*="vertical segment"]:last-child {
+.ui.vertical.segment:last-child {
   box-shadow: none;
 }
 
 /* Horizontal */
 
-.ui[class*="horizontal segment"] {
+.ui.horizontal.segment {
   margin: 0em;
   padding-top: 0em;
   padding-bottom: 0em;
@@ -14800,7 +14800,7 @@ ol.ui.horizontal.list li:before,
 
 .ui.grid {
   margin-top: -1rem;
-  margin-bottom: -1rem;
+  margin-bottom: 0em;
   margin-left: -1rem;
   margin-right: -1rem;
 }
@@ -14818,7 +14818,7 @@ ol.ui.horizontal.list li:before,
 /* Collapse Margins on Consecutive Grids */
 
 .ui.grid + .grid {
-  margin-top: 1rem;
+  margin-top: 0rem;
 }
 
 /*-------------------
@@ -16118,10 +16118,6 @@ body > .ui.grid {
 .ui.grid > [class*="top aligned"].row > .column,
 .ui.grid > [class*="top aligned"].column:not(.row),
 .ui.grid > .row > [class*="top aligned"].column {
-  display: -webkit-inline-box !important;
-  display: -webkit-inline-flex !important;
-  display: -ms-inline-flexbox !important;
-  display: inline-flex !important;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -webkit-flex-direction: column;
@@ -16140,16 +16136,12 @@ body > .ui.grid {
 .ui.grid > [class*="middle aligned"].row > .column,
 .ui.grid > [class*="middle aligned"].column:not(.row),
 .ui.grid > .row > [class*="middle aligned"].column {
-  vertical-align: middle;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  display: -webkit-inline-box !important;
-  display: -webkit-inline-flex !important;
-  display: -ms-inline-flexbox !important;
-  display: inline-flex !important;
+  vertical-align: middle;
   -webkit-box-pack: center !important;
   -webkit-justify-content: center !important;
   -ms-flex-pack: center !important;
@@ -16162,10 +16154,6 @@ body > .ui.grid {
 .ui.grid > [class*="bottom aligned"].row > .column,
 .ui.grid > [class*="bottom aligned"].column:not(.row),
 .ui.grid > .row > [class*="bottom aligned"].column {
-  display: -webkit-inline-box !important;
-  display: -webkit-inline-flex !important;
-  display: -ms-inline-flexbox !important;
-  display: inline-flex !important;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -webkit-flex-direction: column;
@@ -16226,6 +16214,9 @@ body > .ui.grid {
   -webkit-align-items: flex-start !important;
   -ms-flex-align: start !important;
   align-items: flex-start !important;
+  -webkit-align-self: inherit;
+  -ms-flex-item-align: inherit;
+  align-self: inherit;
 }
 
 /* Center Aligned */
@@ -16240,6 +16231,9 @@ body > .ui.grid {
   -webkit-align-items: center !important;
   -ms-flex-align: center !important;
   align-items: center !important;
+  -webkit-align-self: inherit;
+  -ms-flex-item-align: inherit;
+  align-self: inherit;
 }
 
 /* Right Aligned */
@@ -16253,6 +16247,9 @@ body > .ui.grid {
   -webkit-align-items: flex-end !important;
   -ms-flex-align: end !important;
   align-items: flex-end !important;
+  -webkit-align-self: inherit;
+  -ms-flex-item-align: inherit;
+  align-self: inherit;
 }
 
 /* Justified */
@@ -16791,6 +16788,14 @@ body > .ui.grid {
     padding: 0em;
   }
 
+  /* Coupling */
+
+  .ui.container > .ui.stackable.grid > .column,
+  .ui.container > .ui.stackable.grid > .row > .column {
+    padding-left: 0em !important;
+    padding-right: 0em !important;
+  }
+
   /* Don't pad inside segment or nested grid */
 
   .ui.grid .ui.stackable.grid,
@@ -16830,6 +16835,13 @@ body > .ui.grid {
     padding-top: 2rem !important;
     padding-bottom: 2rem !important;
   }
+
+  .ui.stackable.celled.grid > .column:not(.row):first-child,
+  .ui.stackable.divided.grid > .column:not(.row):first-child,
+  .ui.stackable.celled.grid > .row > .column:first-child,
+  .ui.stackable.divided.grid > .row > .column:first-child {
+    padding-top: 0em !important;
+  }
 }
 
 /*----------------------
@@ -17072,6 +17084,10 @@ body > .ui.grid {
   display: flex;
 }
 
+.ui.menu > .ui.container > .item:first-child {
+  padding-left: 0em;
+}
+
 /*--------------
      Inputs
 ---------------*/
@@ -17275,7 +17291,7 @@ body > .ui.grid {
 .ui.menu .item > img:not(.ui) {
   display: inline-block;
   vertical-align: middle;
-  margin: -0.5em -0.2em;
+  margin: -0.3em 0em;
   width: 2.5em;
 }
 
@@ -18355,7 +18371,7 @@ Floated Menu / Item
 
 .ui.inverted.menu .header.item {
   margin: 0em;
-  background: rgba(0, 0, 0, 0.3);
+  background: transparent;
   box-shadow: none;
 }
 

examples/fixed-menu.html

@@ -9,17 +9,36 @@
   <!-- 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">
+
   <style type="text/css">
-  body > .container {
-    padding-top: 7em;
+  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>
@@ -27,18 +46,21 @@
 
   <div class="ui fixed inverted menu">
     <div class="ui container">
-      <a href="#" class="item">Project Name</a>
+      <div href="#" class="header item">
+        <img class="logo" src="images/logo.png">
+        Project Name
+      </div>
       <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">
+  <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">
@@ -47,6 +69,51 @@
     <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

@@ -45,7 +45,7 @@
 
 .ui.grid {
   margin-top: -(@rowSpacing / 2);
-  margin-bottom: -(@rowSpacing / 2);
+  margin-bottom: 0em;
   margin-left: -(@gutterWidth / 2);
   margin-right: -(@gutterWidth / 2);
 }
@@ -61,7 +61,7 @@
 
 /* Collapse Margins on Consecutive Grids */
 .ui.grid + .grid {
-  margin-top: (@rowSpacing / 2);
+  margin-top: 0rem;
 }
 
 /*-------------------
@@ -1189,7 +1189,6 @@ body > .ui.grid {
 .ui.grid > [class*="top aligned"].row > .column,
 .ui.grid > [class*="top aligned"].column:not(.row),
 .ui.grid > .row > [class*="top aligned"].column {
-  display: inline-flex !important;
   flex-direction: column;
   vertical-align: top;
   justify-content: flex-start !important;
@@ -1200,9 +1199,8 @@ body > .ui.grid {
 .ui.grid > [class*="middle aligned"].row > .column,
 .ui.grid > [class*="middle aligned"].column:not(.row),
 .ui.grid > .row > [class*="middle aligned"].column {
-  vertical-align: middle;
   flex-direction: column;
-  display: inline-flex !important;
+  vertical-align: middle;
   justify-content: center !important;
 }
 
@@ -1211,7 +1209,6 @@ body > .ui.grid {
 .ui.grid > [class*="bottom aligned"].row > .column,
 .ui.grid > [class*="bottom aligned"].column:not(.row),
 .ui.grid > .row > [class*="bottom aligned"].column {
-  display: inline-flex !important;
   flex-direction: column;
   vertical-align: bottom;
   justify-content: flex-end !important;
@@ -1247,6 +1244,7 @@ body > .ui.grid {
 .ui.grid > .row > [class*="left aligned"].column {
   text-align: left;
   align-items: flex-start !important;
+  align-self: inherit;
 }
 
 /* Center Aligned */
@@ -1257,6 +1255,7 @@ body > .ui.grid {
 .ui.grid > .row > [class*="center aligned"].column {
   text-align: center;
   align-items: center !important;
+  align-self: inherit;
 }
 
 /* Right Aligned */
@@ -1266,6 +1265,7 @@ body > .ui.grid {
 .ui.grid > .row > [class*="right aligned"].column {
   text-align: right;
   align-items: flex-end !important;
+  align-self: inherit;
 }
 
 /* Justified */
@@ -1715,6 +1715,13 @@ body > .ui.grid {
     padding: 0em;
   }
 
+  /* Coupling */
+  .ui.container > .ui.stackable.grid > .column,
+  .ui.container > .ui.stackable.grid > .row > .column {
+    padding-left: 0em !important;
+    padding-right: 0em !important;
+  }
+
   /* Don't pad inside segment or nested grid */
   .ui.grid .ui.stackable.grid,
   .ui.segment:not(.vertical) .ui.stackable.page.grid {
@@ -1750,6 +1757,12 @@ body > .ui.grid {
     padding-top: @stackableRowSpacing !important;
     padding-bottom: @stackableRowSpacing !important;
   }
+  .ui.stackable.celled.grid > .column:not(.row):first-child,
+  .ui.stackable.divided.grid > .column:not(.row):first-child,
+  .ui.stackable.celled.grid > .row > .column:first-child,
+  .ui.stackable.divided.grid > .row > .column:first-child {
+    padding-top: 0em !important;
+  }
 
 }
 

src/definitions/collections/menu.less

@@ -157,6 +157,10 @@
   display: flex;
 }
 
+.ui.menu > .ui.container > .item:first-child {
+  padding-left: 0em;
+}
+
 /*--------------
      Inputs
 ---------------*/
@@ -1275,7 +1279,9 @@ Floated Menu / Item
 .ui.inverted.menu .item:before {
   background: @invertedDividerBackground;
 }
-.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;
 }
 .ui.vertical.inverted.menu .item:before {

src/definitions/elements/container.less

@@ -59,7 +59,6 @@
   }
 }
 
-
 /*******************************
              Types
 *******************************/

src/definitions/elements/list.less

@@ -557,6 +557,7 @@ ul.ui.horizontal.bulleted.list li:first-child::before,
   display: none;
 }
 
+
 /*-------------------
        Ordered
 --------------------*/

src/definitions/elements/segment.less

@@ -48,7 +48,7 @@
 }
 
 /* Vertical */
-.ui[class*="vertical segment"] {
+.ui.vertical.segment {
   margin: 0em;
   padding-left: 0em;
   padding-right: 0em;
@@ -58,12 +58,12 @@
   border: none;
   box-shadow: 0px -1px 0px @borderColor inset;
 }
-.ui[class*="vertical segment"]:last-child {
+.ui.vertical.segment:last-child {
   box-shadow: none;
 }
 
 /* Horizontal */
-.ui[class*="horizontal segment"] {
+.ui.horizontal.segment {
   margin: 0em;
   padding-top: 0em;
   padding-bottom: 0em;

src/themes/default/collections/menu.variables

@@ -106,7 +106,7 @@
 @inputVerticalPadding: 0.5em;
 
 /* Image */
-@imageMargin: -0.5em -0.2em;
+@imageMargin: -0.3em 0em;
 @imageWidth: 2.5em;
 @verticalImageWidth: auto;
 
@@ -366,7 +366,7 @@
 /* Inverted */
 @invertedBackground: @black;
 @invertedBoxShadow: none;
-@invertedHeaderBackground: rgba(0, 0, 0, 0.3);
+@invertedHeaderBackground: transparent;
 
 @invertedItemBackground: transparent;
 @invertedItemTextColor: @invertedTextColor;

src/themes/default/elements/container.variables

@@ -20,6 +20,8 @@
 @largeComputerGutter: auto;
 
 /* Adjust breakpoints to match fixed width */
+@largestMobileScreen: 780px;
+@tabletBreakpoint: 781px;
 @smallComputerBreakpoint: 988px;
 @largeComputerBreakpoint: 1228px;
 

src/themes/default/elements/image.variables

@@ -32,7 +32,7 @@
 @floatedVerticalMargin: 1em;
 
 /* Size */
-@miniWidth: 20px;
+@miniWidth: 35px;
 @tinyWidth: 80px;
 @smallWidth: 150px;
 @mediumWidth: 300px;

src/themes/default/elements/list.variables

@@ -147,7 +147,7 @@
 
 @bulletOpacity: 1;
 @bulletCharacter: '•';
-@bulletColor: @textColor;
+@bulletColor: inherit;
 @bulletVerticalAlign: top;
 @bulletChildDistance: @bulletDistance;