From 18106aee384fe8ac1781a3029af2f2035f2f2146 Mon Sep 17 00:00:00 2001
From: jlukic <jacklukic@gmail.com>
Date: Tue, 16 Sep 2014 14:20:40 -0400
Subject: [PATCH] #396, add word order dependency to all grid variations with
 multiple words

---
 server/documents/collections/grid.html.eco    |  30 +-
 server/files/stylesheets/semantic.css         |   2 +-
 src/definitions/collections/grid.less         | 564 ++++++++----------
 .../default/collections/grid.variables        |   1 -
 4 files changed, 274 insertions(+), 323 deletions(-)

diff --git a/server/documents/collections/grid.html.eco b/server/documents/collections/grid.html.eco
index 1cdc63d80..b8165a77a 100755
--- a/server/documents/collections/grid.html.eco
+++ b/server/documents/collections/grid.html.eco
@@ -644,7 +644,7 @@ themes      : ['Default']
     <h3 class="ui header">Grid</h3>
 
     <div class="example">
-      <h4 class="ui header">Specifying Column Count Per Row</h4>
+      <h4 class="ui header">Column Count</h4>
       <p>A grid can have a different number of columns per row</p>
       <div class="ui two column grid">
         <div class="column">
@@ -658,22 +658,18 @@ themes      : ['Default']
               <label>Password</label>
               <input type="password">
             </div>
-            <div class="ui blue submit button">Login</div>
+            <div class="inline field">
+              <div class="ui checkbox">
+                <input type="checkbox" id="remember" />
+                <label for="remember">Remember me</label>
+              </div>
+            </div>
+            <div class="ui submit button">Login</div>
           </div>
         </div>
         <div class="column">
           <div class="ui fluid form segment">
             <h3 class="ui header">Register</h3>
-            <div class="two fields">
-              <div class="field">
-                <label>First Name</label>
-                <input placeholder="First Name" type="text">
-              </div>
-              <div class="field">
-                <label>Last Name</label>
-                <input placeholder="Last Name" type="text">
-              </div>
-            </div>
             <div class="field">
               <label>Username</label>
               <input placeholder="Username" type="text">
@@ -696,9 +692,9 @@ themes      : ['Default']
 
     <div class="example">
       <h4 class="ui header">Padded</h4>
-      <p>A padded grid preserves the vertical and horizontal gutters</p>
+      <p>A grid can preserve its vertical and horizontal gutters on first and last columns</p>
 
-      <p>This paragraph of text will not align with the edges of the grid below because the grid preserves its outter gutters</p>
+      <p>This paragraph of text will not align with the edges of the first column below because the grid preserves its outter gutters</p>
       <div class="ui two column padded grid">
         <div class="column">
           <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
@@ -709,7 +705,7 @@ themes      : ['Default']
       </div>
     </div>
     <div class="another example">
-      <p>This paragraph of text will not align vertically with the edges of the grid below because the grid preserves its outter gutters</p>
+      <p>This paragraph of text will not align vertically with the edges of the first column below because the grid preserves its outter gutters</p>
       <div class="ui two column vertically padded grid">
         <div class="column">
           <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
@@ -720,7 +716,7 @@ themes      : ['Default']
       </div>
     </div>
     <div class="another example">
-      <p>This paragraph of text will not align horizontally with the edges of the grid below because the grid preserves its outter gutters</p>
+      <p>This paragraph of text will not align horizontally with the edges of the first column below because the grid preserves its outter gutters</p>
       <div class="ui two column horizontally padded grid">
         <div class="column">
           <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
@@ -832,7 +828,7 @@ themes      : ['Default']
     </div>
 
     <div class="example">
-      <h4 class="ui header">Doubling Grid</h4>
+      <h4 class="ui header">Doubling</h4>
       <p>A grid can double its column width on tablet and mobile sizes</p>
       <div class="ui text message info ignore">
         <i class="icon heart"></i> A grid will round its columns to the closest reasonable value when doubling, for example a <code>five column grid</code> will double <code>1 mobile, 3 tablet, 5 desktop</code>
diff --git a/server/files/stylesheets/semantic.css b/server/files/stylesheets/semantic.css
index ffd26b408..51313a713 100755
--- a/server/files/stylesheets/semantic.css
+++ b/server/files/stylesheets/semantic.css
@@ -1288,7 +1288,7 @@ body.progress .ui.progress .bar {
   margin-top: 0em;
 }
 #example .example > p {
-  color: #888888;
+  color: #555555;
 }
 #example .example div.code[data-demo] {
   color: transparent;
diff --git a/src/definitions/collections/grid.less b/src/definitions/collections/grid.less
index 4b29383f7..119fab57a 100755
--- a/src/definitions/collections/grid.less
+++ b/src/definitions/collections/grid.less
@@ -54,7 +54,7 @@
   margin-left: -(@relaxedGutterWidth / 2);
   margin-right: -(@relaxedGutterWidth / 2);
 }
-.ui.very.relaxed.grid  {
+.ui[class*="very relaxed"].grid  {
   margin-left: -(@veryRelaxedGutterWidth / 2);
   margin-right: -(@veryRelaxedGutterWidth / 2);
 }
@@ -197,168 +197,124 @@
   }
 }
 
-.ui.centered.page.grid {
-  padding-left: 0em;
-  padding-right: 0em;
-  width: @computerWidth;
-  margin-left: @computerGutter;
-  margin-right: @computerGutter;
-}
-
-@media only screen and (max-width: (@largestMobileScreen)) {
-  .ui.centered.page.grid {
-    width: @mobileWidth;
-    margin-left: @mobileGutter;
-    margin-right: @mobileGutter;
-  }
-}
-@media only screen and (min-width: @tabletBreakpoint) {
-  .ui.centered.page.grid {
-    width: @tabletWidth;
-    margin-left: @tabletGutter;
-    margin-right: @tabletGutter;
-  }
-}
-@media only screen and (min-width: @computerBreakpoint) {
-  .ui.centered.page.grid {
-    width: @computerWidth;
-    margin-left: @computerGutter;
-    margin-right: @computerGutter;
-  }
-}
-@media only screen and (min-width: @largeMonitorBreakpoint) {
-  .ui.centered.page.grid {
-    width: @largeMonitorWidth;
-    margin-left: @largeMonitorGutter;
-    margin-right: @largeMonitorGutter;
-  }
-}
-@media only screen and (min-width: @widescreenMonitorBreakpoint) {
-  .ui.centered.page.grid {
-    width: @widescreenMonitorWidth;
-    margin-left: @widescreenMonitorGutter;
-    margin-right: @widescreenMonitorGutter;
-  }
-}
-
 
 /*-------------------
      Column Count
 --------------------*/
 
 /* Grid Based */
-.ui.one.column.grid > .row > .column,
-.ui.one.column.grid > .column {
+.ui[class*="one column"].grid > .row > .column,
+.ui[class*="one column"].grid > .column {
   width: @oneColumn;
 }
-.ui.two.column.grid > .row > .column,
-.ui.two.column.grid > .column {
+.ui[class*="two column"].grid > .row > .column,
+.ui[class*="two column"].grid > .column {
   width: @twoColumn;
 }
-.ui.three.column.grid > .row > .column,
-.ui.three.column.grid > .column {
+.ui[class*="three column"].grid > .row > .column,
+.ui[class*="three column"].grid > .column {
   width: @threeColumn;
 }
-.ui.four.column.grid > .row > .column,
-.ui.four.column.grid > .column {
+.ui[class*="four column"].grid > .row > .column,
+.ui[class*="four column"].grid > .column {
   width: @fourColumn;
 }
-.ui.five.column.grid > .row > .column,
-.ui.five.column.grid > .column {
+.ui[class*="five column"].grid > .row > .column,
+.ui[class*="five column"].grid > .column {
   width: @fiveColumn;
 }
-.ui.six.column.grid > .row > .column,
-.ui.six.column.grid > .column {
+.ui[class*="six column"].grid > .row > .column,
+.ui[class*="six column"].grid > .column {
   width: @sixColumn;
 }
-.ui.seven.column.grid > .row > .column,
-.ui.seven.column.grid > .column {
+.ui[class*="seven column"].grid > .row > .column,
+.ui[class*="seven column"].grid > .column {
   width: @sevenColumn;
 }
-.ui.eight.column.grid > .row > .column,
-.ui.eight.column.grid > .column {
+.ui[class*="eight column"].grid > .row > .column,
+.ui[class*="eight column"].grid > .column {
   width: @eightColumn;
 }
-.ui.nine.column.grid > .row > .column,
-.ui.nine.column.grid > .column {
+.ui[class*="nine column"].grid > .row > .column,
+.ui[class*="nine column"].grid > .column {
   width: @nineColumn;
 }
-.ui.ten.column.grid > .row > .column,
-.ui.ten.column.grid > .column {
+.ui[class*="ten column"].grid > .row > .column,
+.ui[class*="ten column"].grid > .column {
   width: @tenColumn;
 }
-.ui.eleven.column.grid > .row > .column,
-.ui.eleven.column.grid > .column {
+.ui[class*="eleven column"].grid > .row > .column,
+.ui[class*="eleven column"].grid > .column {
   width: @elevenColumn;
 }
-.ui.twelve.column.grid > .row > .column,
-.ui.twelve.column.grid > .column {
+.ui[class*="twelve column"].grid > .row > .column,
+.ui[class*="twelve column"].grid > .column {
   width: @twelveColumn;
 }
-.ui.thirteen.column.grid > .row > .column,
-.ui.thirteen.column.grid > .column {
+.ui[class*="thirteen column"].grid > .row > .column,
+.ui[class*="thirteen column"].grid > .column {
   width: @thirteenColumn;
 }
-.ui.fourteen.column.grid > .row > .column,
-.ui.fourteen.column.grid > .column {
+.ui[class*="fourteen column"].grid > .row > .column,
+.ui[class*="fourteen column"].grid > .column {
   width: @fourteenColumn;
 }
-.ui.fifteen.column.grid > .row > .column,
-.ui.fifteen.column.grid > .column {
+.ui[class*="fifteen column"].grid > .row > .column,
+.ui[class*="fifteen column"].grid > .column {
   width: @fifteenColumn;
 }
-.ui.sixteen.column.grid > .row > .column,
-.ui.sixteen.column.grid > .column {
+.ui[class*="sixteen column"].grid > .row > .column,
+.ui[class*="sixteen column"].grid > .column {
   width: @sixteenColumn;
 }
 
 /* Row Based Overrides */
-.ui.grid > .one.column.row > .column {
+.ui.grid > [class*="one column"].row > .column {
   width: @oneColumn !important;
 }
-.ui.grid > .two.column.row > .column {
+.ui.grid > [class*="two column"].row > .column {
   width: @twoColumn !important;
 }
-.ui.grid > .three.column.row > .column {
+.ui.grid > [class*="three column"].row > .column {
   width: @threeColumn !important;
 }
-.ui.grid > .four.column.row > .column {
+.ui.grid > [class*="four column"].row > .column {
   width: @fourColumn !important;
 }
-.ui.grid > .five.column.row > .column {
+.ui.grid > [class*="five column"].row > .column {
   width: @fiveColumn !important;
 }
-.ui.grid > .six.column.row > .column {
+.ui.grid > [class*="six column"].row > .column {
   width: @sixColumn !important;
 }
-.ui.grid > .seven.column.row > .column {
+.ui.grid > [class*="seven column"].row > .column {
   width: @sevenColumn !important;
 }
-.ui.grid > .eight.column.row > .column {
+.ui.grid > [class*="eight column"].row > .column {
   width: @eightColumn !important;
 }
-.ui.grid > .nine.column.row > .column {
+.ui.grid > [class*="nine column"].row > .column {
   width: @nineColumn !important;
 }
-.ui.grid > .ten.column.row > .column {
+.ui.grid > [class*="ten column"].row > .column {
   width: @tenColumn !important;
 }
-.ui.grid > .eleven.column.row > .column {
+.ui.grid > [class*="eleven column"].row > .column {
   width: @elevenColumn !important;
 }
-.ui.grid > .twelve.column.row > .column {
+.ui.grid > [class*="twelve column"].row > .column {
   width: @twelveColumn !important;
 }
-.ui.grid > .thirteen.column.row > .column {
+.ui.grid > [class*="thirteen column"].row > .column {
   width: @thirteenColumn !important;
 }
-.ui.grid > .fourteen.column.row > .column {
+.ui.grid > [class*="fourteen column"].row > .column {
   width: @fourteenColumn !important;
 }
-.ui.grid > .fifteen.column.row > .column {
+.ui.grid > [class*="fifteen column"].row > .column {
   width: @fifteenColumn !important;
 }
-.ui.grid > .sixteen.column.row > .column {
+.ui.grid > [class*="sixteen column"].row > .column {
   width: @sixteenColumn !important;
 }
 
@@ -373,100 +329,100 @@
 --------------------*/
 
 /* Sizing Combinations */
-.ui.grid > .row > .one.wide.column,
-.ui.grid > .column.row > .one.wide.column,
-.ui.grid > .one.wide.column,
-.ui.column.grid > .one.wide.column {
+.ui.grid > .row > [class*="one wide"].column,
+.ui.grid > .column.row > [class*="one wide"].column,
+.ui.grid > [class*="one wide"].column,
+.ui.column.grid > [class*="one wide"].column {
   width: @oneWide !important;
 }
-.ui.grid > .row > .two.wide.column,
-.ui.grid > .column.row > .two.wide.column,
-.ui.grid > .two.wide.column,
-.ui.column.grid > .two.wide.column {
+.ui.grid > .row > [class*="two wide"].column,
+.ui.grid > .column.row > [class*="two wide"].column,
+.ui.grid > [class*="two wide"].column,
+.ui.column.grid > [class*="two wide"].column {
   width: @twoWide !important;
 }
-.ui.grid > .row > .three.wide.column,
-.ui.grid > .column.row > .three.wide.column,
-.ui.grid > .three.wide.column,
-.ui.column.grid > .three.wide.column {
+.ui.grid > .row > [class*="three wide"].column,
+.ui.grid > .column.row > [class*="three wide"].column,
+.ui.grid > [class*="three wide"].column,
+.ui.column.grid > [class*="three wide"].column {
   width: @threeWide !important;
 }
-.ui.grid > .row > .four.wide.column,
-.ui.grid > .column.row > .four.wide.column,
-.ui.grid > .four.wide.column,
-.ui.column.grid > .four.wide.column {
+.ui.grid > .row > [class*="four wide"].column,
+.ui.grid > .column.row > [class*="four wide"].column,
+.ui.grid > [class*="four wide"].column,
+.ui.column.grid > [class*="four wide"].column {
   width: @fourWide !important;
 }
-.ui.grid > .row > .five.wide.column,
-.ui.grid > .column.row > .five.wide.column,
-.ui.grid > .five.wide.column,
-.ui.column.grid > .five.wide.column {
+.ui.grid > .row > [class*="five wide"].column,
+.ui.grid > .column.row > [class*="five wide"].column,
+.ui.grid > [class*="five wide"].column,
+.ui.column.grid > [class*="five wide"].column {
   width: @fiveWide !important;
 }
-.ui.grid > .row > .six.wide.column,
-.ui.grid > .column.row > .six.wide.column,
-.ui.grid > .six.wide.column,
-.ui.column.grid > .six.wide.column {
+.ui.grid > .row > [class*="six wide"].column,
+.ui.grid > .column.row > [class*="six wide"].column,
+.ui.grid > [class*="six wide"].column,
+.ui.column.grid > [class*="six wide"].column {
   width: @sixWide !important;
 }
-.ui.grid > .row > .seven.wide.column,
-.ui.grid > .column.row > .seven.wide.column,
-.ui.grid > .seven.wide.column,
-.ui.column.grid > .seven.wide.column {
+.ui.grid > .row > [class*="seven wide"].column,
+.ui.grid > .column.row > [class*="seven wide"].column,
+.ui.grid > [class*="seven wide"].column,
+.ui.column.grid > [class*="seven wide"].column {
   width: @sevenWide !important;
 }
-.ui.grid > .row > .eight.wide.column,
-.ui.grid > .column.row > .eight.wide.column,
-.ui.grid > .eight.wide.column,
-.ui.column.grid > .eight.wide.column {
+.ui.grid > .row > [class*="eight wide"].column,
+.ui.grid > .column.row > [class*="eight wide"].column,
+.ui.grid > [class*="eight wide"].column,
+.ui.column.grid > [class*="eight wide"].column {
   width: @eightWide !important;
 }
-.ui.grid > .row > .nine.wide.column,
-.ui.grid > .column.row > .nine.wide.column,
-.ui.grid > .nine.wide.column,
-.ui.column.grid > .nine.wide.column {
+.ui.grid > .row > [class*="nine wide"].column,
+.ui.grid > .column.row > [class*="nine wide"].column,
+.ui.grid > [class*="nine wide"].column,
+.ui.column.grid > [class*="nine wide"].column {
   width: @nineWide !important;
 }
-.ui.grid > .row > .ten.wide.column,
-.ui.grid > .column.row > .ten.wide.column,
-.ui.grid > .ten.wide.column,
-.ui.column.grid > .ten.wide.column {
+.ui.grid > .row > [class*="ten wide"].column,
+.ui.grid > .column.row > [class*="ten wide"].column,
+.ui.grid > [class*="ten wide"].column,
+.ui.column.grid > [class*="ten wide"].column {
   width: @tenWide !important;
 }
-.ui.grid > .row > .eleven.wide.column,
-.ui.grid > .column.row > .eleven.wide.column,
-.ui.grid > .eleven.wide.column,
-.ui.column.grid > .eleven.wide.column {
+.ui.grid > .row > [class*="eleven wide"].column,
+.ui.grid > .column.row > [class*="eleven wide"].column,
+.ui.grid > [class*="eleven wide"].column,
+.ui.column.grid > [class*="eleven wide"].column {
   width: @elevenWide !important;
 }
-.ui.grid > .row > .twelve.wide.column,
-.ui.grid > .column.row > .twelve.wide.column,
-.ui.grid > .twelve.wide.column,
-.ui.column.grid > .twelve.wide.column {
+.ui.grid > .row > [class*="twelve wide"].column,
+.ui.grid > .column.row > [class*="twelve wide"].column,
+.ui.grid > [class*="twelve wide"].column,
+.ui.column.grid > [class*="twelve wide"].column {
   width: @twelveWide !important;
 }
-.ui.grid > .row > .thirteen.wide.column,
-.ui.grid > .column.row > .thirteen.wide.column,
-.ui.grid > .thirteen.wide.column,
-.ui.column.grid > .thirteen.wide.column {
+.ui.grid > .row > [class*="thirteen wide"].column,
+.ui.grid > .column.row > [class*="thirteen wide"].column,
+.ui.grid > [class*="thirteen wide"].column,
+.ui.column.grid > [class*="thirteen wide"].column {
   width: @thirteenWide !important;
 }
-.ui.grid > .row > .fourteen.wide.column,
-.ui.grid > .column.row > .fourteen.wide.column,
-.ui.grid > .fourteen.wide.column,
-.ui.column.grid > .fourteen.wide.column {
+.ui.grid > .row > [class*="fourteen wide"].column,
+.ui.grid > .column.row > [class*="fourteen wide"].column,
+.ui.grid > [class*="fourteen wide"].column,
+.ui.column.grid > [class*="fourteen wide"].column {
   width: @fourteenWide !important;
 }
-.ui.grid > .row > .fifteen.wide.column,
-.ui.grid > .column.row > .fifteen.wide.column,
-.ui.grid > .fifteen.wide.column,
-.ui.column.grid > .fifteen.wide.column {
+.ui.grid > .row > [class*="fifteen wide"].column,
+.ui.grid > .column.row > [class*="fifteen wide"].column,
+.ui.grid > [class*="fifteen wide"].column,
+.ui.column.grid > [class*="fifteen wide"].column {
   width: @fifteenWide !important;
 }
-.ui.grid > .row > .sixteen.wide.column,
-.ui.grid > .column.row > .sixteen.wide.column,
-.ui.grid > .sixteen.wide.column,
-.ui.column.grid > .sixteen.wide.column {
+.ui.grid > .row > [class*="sixteen wide"].column,
+.ui.grid > .column.row > [class*="sixteen wide"].column,
+.ui.grid > [class*="sixteen wide"].column,
+.ui.column.grid > [class*="sixteen wide"].column {
   width: @sixteenWide !important;
 }
 
@@ -497,9 +453,9 @@
   padding-right: (@relaxedGutterWidth / 2);
 }
 
-.ui.very.relaxed.grid > .column:not(.row),
-.ui.very.relaxed.grid > .row > .column,
-.ui.grid > .very.relaxed.row > .column {
+.ui[class*="very relaxed"].grid > .column:not(.row),
+.ui[class*="very relaxed"].grid > .row > .column,
+.ui.grid > [class*="very relaxed"].row > .column {
   padding-left: (@veryRelaxedGutterWidth / 2);
   padding-right: (@veryRelaxedGutterWidth / 2);
 }
@@ -510,8 +466,8 @@
   margin-left: (@relaxedGutterWidth / 2);
   margin-right: (@relaxedGutterWidth / 2);
 }
-.ui.very.relaxed.grid .row + .ui.divider,
-.ui.grid .very.relaxed.row + .ui.divider {
+.ui[class*="very relaxed"].grid .row + .ui.divider,
+.ui.grid [class*="very relaxed"].row + .ui.divider {
   margin-left: (@veryRelaxedGutterWidth / 2);
   margin-right: (@veryRelaxedGutterWidth / 2);
 }
@@ -521,14 +477,14 @@
         Padded
 -----------------------*/
 
-.ui.padded.grid:not(.horizontally):not(.vertically) {
+.ui.padded.grid:not(.vertically):not(.horizontally) {
   margin: 0em !important;
 }
-.ui.horizontally.padded.grid {
+[class*="horizontally padded"].ui.grid {
   margin-left: 0em !important;
   margin-right: 0em !important;
 }
-.ui.vertically.padded.grid {
+[class*="vertically padded"].ui.grid {
   margin-top: 0em !important;
   margin-bottom: 0em !important;
 }
@@ -538,10 +494,10 @@
        "Floated"
 -----------------------*/
 
-.ui.grid .left.floated.column {
+.ui.grid [class*="left floated"].column {
   float: left;
 }
-.ui.grid .right.floated.column {
+.ui.grid [class*="right floated"].column {
   float: right;
 }
 
@@ -569,12 +525,12 @@
 }
 
 /* Vertically Divided */
-.ui.vertically.divided.grid > .row {
+.ui[class*="vertically divided"].grid > .row {
   position: relative;
 }
-.ui.vertically.divided.grid > .row:before {
+.ui[class*="vertically divided"].grid > .row:before {
   position: absolute;
-  content: '';
+  content: "";
   top: 0em;
   left: 0px;
 
@@ -584,7 +540,7 @@
   margin: 0% (@gutterWidth / 2);
   box-shadow: @verticallyDividedBorder;
 }
-.ui.vertically.divided.grid > .row:first-child:before {
+.ui[class*="vertically divided"].grid > .row:first-child:before {
   box-shadow: none;
 }
 
@@ -592,17 +548,17 @@
 .ui.inverted.divided.grid > .row {
   box-shadow: @dividedInvertedBorder;
 }
-.ui.inverted.vertically.divided.grid > .row {
+.ui.inverted[class*="vertically divided"].grid > .row {
   box-shadow: @verticallyDividedInvertedBorder;
 }
 
 /* Relaxed */
-.ui.relaxed.vertically.divided.grid > .row:before {
+.ui.relaxed[class*="vertically divided"].grid > .row:before {
   margin-left: (@relaxedGutterWidth / 2);
   margin-right: (@relaxedGutterWidth / 2);
   width: ~"calc(100% - "@relaxedGutterWidth~")";
 }
-.ui.very.relaxed.vertically.divided.grid > .row:before {
+.ui.very.relaxed[class*="vertically divided"].grid > .row:before {
   margin-left: @veryRelaxedGutterWidth;
   margin-right: @veryRelaxedGutterWidth;
   width: ~"calc(100% - "@veryRelaxedGutterWidth~")";
@@ -649,25 +605,25 @@
 -----------------------*/
 
 /* Vertical Centered */
-.ui.left.aligned.grid,
-.ui.left.aligned.grid > .row > .column,
-.ui.left.aligned.grid > .column,
-.ui.grid .left.aligned.column,
-.ui.grid > .left.aligned.row > .column {
+.ui[class*="left aligned"].grid,
+.ui[class*="left aligned"].grid > .row > .column,
+.ui[class*="left aligned"].grid > .column,
+.ui.grid [class*="left aligned"].column,
+.ui.grid > [class*="left aligned"].row > .column {
   text-align: left;
 }
-.ui.center.aligned.grid,
-.ui.center.aligned.grid > .row > .column,
-.ui.center.aligned.grid > .column,
-.ui.grid .center.aligned.column,
-.ui.grid > .center.aligned.row > .column {
+.ui[class*="center aligned"].grid,
+.ui[class*="center aligned"].grid > .row > .column,
+.ui[class*="center aligned"].grid > .column,
+.ui.grid [class*="center aligned"].column,
+.ui.grid > [class*="center aligned"].row > .column {
   text-align: center;
 }
-.ui.right.aligned.grid,
-.ui.right.aligned.grid > .row > .column,
-.ui.right.aligned.grid > .column,
-.ui.grid .right.aligned.column,
-.ui.grid > .right.aligned.row > .column {
+.ui[class*="right aligned"].grid,
+.ui[class*="right aligned"].grid > .row > .column,
+.ui[class*="right aligned"].grid > .column,
+.ui.grid [class*="right aligned"].column,
+.ui.grid > [class*="right aligned"].row > .column {
   text-align: right;
 }
 
@@ -685,44 +641,44 @@
 -----------------------*/
 
 /* Vertical Centered */
-.ui.top.aligned.grid,
-.ui.top.aligned.grid > .row > .column,
-.ui.top.aligned.grid > .column,
-.ui.grid .top.aligned.column,
-.ui.grid > .top.aligned.row > .column {
+.ui[class*="top aligned"]grid,
+.ui[class*="top aligned"]grid > .row > .column,
+.ui[class*="top aligned"]grid > .column,
+.ui.grid [class*="top aligned"]column,
+.ui.grid > [class*="top aligned"]row > .column {
   vertical-align: top;
 }
-.ui.middle.aligned.grid,
-.ui.middle.aligned.grid > .row > .column,
-.ui.middle.aligned.grid > .column,
-.ui.grid .middle.aligned.column,
-.ui.grid > .middle.aligned.row > .column {
+.ui[class*="middle aligned"].grid,
+.ui[class*="middle aligned"].grid > .row > .column,
+.ui[class*="middle aligned"].grid > .column,
+.ui.grid [class*="middle aligned"].column,
+.ui.grid > [class*="middle aligned"].row > .column {
   vertical-align: middle;
 }
-.ui.bottom.aligned.grid,
-.ui.bottom.aligned.grid > .row > .column,
-.ui.bottom.aligned.grid > .column,
-.ui.grid .bottom.aligned.column,
-.ui.grid > .bottom.aligned.row > .column {
+.ui[class*="bottom aligned"].grid,
+.ui[class*="bottom aligned"].grid > .row > .column,
+.ui[class*="bottom aligned"].grid > .column,
+.ui.grid [class*="bottom aligned"].column,
+.ui.grid > [class*="bottom aligned"].row > .column {
   vertical-align: bottom;
 }
 
 /*----------------------
   Equal Height Columns
 -----------------------*/
-.ui.equal.height.grid {
+.ui[class*="equal height"].grid {
   display: table;
   table-layout: fixed;
   width: @tableWidth;
 }
-.ui.equal.height.row  {
+.ui[class*="equal height"].row  {
   display: table;
   table-layout: fixed;
   width: 100%;
 }
-.ui.equal.height.grid > .column,
-.ui.equal.height.grid > .row > .column,
-.ui.grid > .equal.height.row > .column {
+.ui[class*="equal height"].grid > .column,
+.ui[class*="equal height"].grid > .row > .column,
+.ui.grid > [class*="equal height"].row > .column {
   display: table-cell;
 }
 
@@ -734,46 +690,46 @@
 /* Mobile Only Hide */
 @media only screen and ( max-width: @largestMobileScreen ) {
   .ui.tablet:not(.mobile).only.grid,
-  .ui.grid > .tablet:not(.mobile).only.row,
-  .ui.grid > .tablet:not(.mobile).only.column,
-  .ui.grid > .row > .tablet:not(.mobile).only.column {
+  .ui.grid > [class*="tablet only"].row:not(.mobile),
+  .ui.grid > [class*="tablet only"].column:not(.mobile),
+  .ui.grid > .row > [class*="tablet only"].column:not(.mobile) {
     display: none !important;
   }
-  .ui.computer:not(.mobile).only.grid,
-  .ui.grid > .computer:not(.mobile).only.row,
-  .ui.grid > .computer:not(.mobile).only.column,
-  .ui.grid > .row > .computer:not(.mobile).only.column {
+  .ui[class*="computer only"].grid:not(.mobile),
+  .ui.grid > [class*="computer only"].row:not(.mobile),
+  .ui.grid > [class*="computer only"].column:not(.mobile),
+  .ui.grid > .row > [class*="computer only"].column:not(.mobile) {
     display: none !important;
   }
 }
 /* Tablet Only Hide */
 @media only screen and (min-width: (@tabletBreakpoint)) and (max-width: @largestTabletScreen ) {
-  .ui.mobile:not(.tablet).only.grid,
-  .ui.grid > .mobile:not(.tablet).only.row,
-  .ui.grid > .mobile:not(.tablet).only.column,
-  .ui.grid > .row > .mobile:not(.tablet).only.column {
+  .ui[class*="mobile only"].grid:not(.tablet),
+  .ui.grid > [class*="mobile only"].row:not(.tablet),
+  .ui.grid > [class*="mobile only"].column:not(.tablet),
+  .ui.grid > .row > [class*="mobile only"].column:not(.tablet) {
     display: none !important;
   }
-  .ui.computer:not(.tablet).only.grid,
-  .ui.grid > .computer:not(.tablet).only.row,
-  .ui.grid > .computer:not(.tablet).only.column,
-  .ui.grid > .row > .computer:not(.tablet).only.column {
+  .ui[class*="computer only"].grid:not(.tablet),
+  .ui.grid > [class*="computer only"].row:not(.tablet),
+  .ui.grid > [class*="computer only"].column:not(.tablet),
+  .ui.grid > .row > [class*="computer only"].column:not(.tablet) {
     display: none !important;
   }
 }
 
 /* Computer Only Hide */
 @media only screen and ( min-width: (@computerBreakpoint) ) {
-  .ui.mobile:not(.computer).only.grid,
-  .ui.grid > .mobile:not(.computer).only.row,
-  .ui.grid > .mobile:not(.computer).only.column,
-  .ui.grid > .row > .mobile:not(.computer).only.column {
+  .ui[class*="mobile only"].grid:not(.computer),
+  .ui.grid > [class*="mobile only"].row:not(.computer),
+  .ui.grid > [class*="mobile only"].column:not(.computer),
+  .ui.grid > .row > [class*="mobile only"].column:not(.computer) {
     display: none !important;
   }
-  .ui.tablet:not(.computer).only.grid,
-  .ui.grid > .tablet:not(.computer).only.row,
-  .ui.grid > .tablet:not(.computer).only.column,
-  .ui.grid > .row > .tablet:not(.computer).only.column {
+  .ui[class*="tablet only"].grid:not(.computer),
+  .ui.grid > [class*="tablet only"].row:not(.computer),
+  .ui.grid > [class*="tablet only"].column:not(.computer),
+  .ui.grid > .row > [class*="tablet only"].column:not(.computer) {
     display: none !important;
   }
 }
@@ -791,64 +747,64 @@
   .ui.doubling.grid > .row > .column {
     margin-bottom: @doublingRowSpacing;
   }
-  .ui.two.column.doubling.grid > .row > .column,
-  .ui.two.column.doubling.grid > .column,
-  .ui.grid > .two.column.doubling.row > .column {
+  .ui[class*="two column"].doubling.grid > .row > .column,
+  .ui[class*="two column"].doubling.grid > .column,
+  .ui.grid > [class*="two column"].doubling.row > .column {
     width: @oneColumn;
   }
-  .ui.three.column.doubling.grid > .row > .column,
-  .ui.three.column.doubling.grid > .column,
-  .ui.grid > .three.column.doubling.row > .column {
+  .ui[class*="three column"].doubling.grid > .row > .column,
+  .ui[class*="three column"].doubling.grid > .column,
+  .ui.grid > [class*="three column"].doubling.row > .column {
     width: @twoColumn;
   }
-  .ui.four.column.doubling.grid > .row > .column,
-  .ui.four.column.doubling.grid > .column,
-  .ui.grid > .four.column.doubling.row > .column {
+  .ui[class*="four column"].doubling.grid > .row > .column,
+  .ui[class*="four column"].doubling.grid > .column,
+  .ui.grid > [class*="four column"].doubling.row > .column {
     width: @twoColumn;
   }
-  .ui.five.column.doubling.grid > .row > .column,
-  .ui.five.column.doubling.grid > .column,
-  .ui.grid > .five.column.doubling.row > .column {
+  .ui[class*="five column"].doubling.grid > .row > .column,
+  .ui[class*="five column"].doubling.grid > .column,
+  .ui.grid > [class*="five column"].doubling.row > .column {
     width: @twoColumn;
   }
-  .ui.six.column.doubling.grid > .row > .column,
-  .ui.six.column.doubling.grid > .column,
-  .ui.grid > .six.column.doubling.row > .column {
+  .ui[class*="six column"].doubling.grid > .row > .column,
+  .ui[class*="six column"].doubling.grid > .column,
+  .ui.grid > [class*="six column"].doubling.row > .column {
     width: @twoColumn;
   }
-  .ui.seven.column.doubling.grid > .row > .column,
-  .ui.seven.column.doubling.grid > .column,
-  .ui.grid > .seven.column.doubling.row > .column {
+  .ui[class*="seven column"].doubling.grid > .row > .column,
+  .ui[class*="seven column"].doubling.grid > .column,
+  .ui.grid > [class*="seven column"].doubling.row > .column {
     width: @threeColumn;
   }
-  .ui.eight.column.doubling.grid > .row > .column,
-  .ui.eight.column.doubling.grid > .column,
-  .ui.grid > .eight.column.doubling.row > .column {
+  .ui[class*="eight column"].doubling.grid > .row > .column,
+  .ui[class*="eight column"].doubling.grid > .column,
+  .ui.grid > [class*="eight column"].doubling.row > .column {
     width: @threeColumn;
   }
-  .ui.nine.column.doubling.grid > .row > .column,
-  .ui.nine.column.doubling.grid > .column,
-  .ui.grid > .nine.column.doubling.row > .column {
+  .ui[class*="nine column"].doubling.grid > .row > .column,
+  .ui[class*="nine column"].doubling.grid > .column,
+  .ui.grid > [class*="nine column"].doubling.row > .column {
     width: @threeColumn;
   }
-  .ui.ten.column.doubling.grid > .row > .column,
-  .ui.ten.column.doubling.grid > .column,
-  .ui.grid > .ten.column.doubling.row > .column {
+  .ui[class*="ten column"].doubling.grid > .row > .column,
+  .ui[class*="ten column"].doubling.grid > .column,
+  .ui.grid > [class*="ten column"].doubling.row > .column {
     width: @threeColumn;
   }
-  .ui.twelve.column.doubling.grid > .row > .column,
-  .ui.twelve.column.doubling.grid > .column,
-  .ui.grid > .twelve.column.doubling.row > .column {
+  .ui[class*="twelve column"].doubling.grid > .row > .column,
+  .ui[class*="twelve column"].doubling.grid > .column,
+  .ui.grid > [class*="twelve column"].doubling.row > .column {
     width: @fourColumn;
   }
-  .ui.fourteen.column.doubling.grid > .row > .column,
-  .ui.fourteen.column.doubling.grid > .column,
-  .ui.grid > .fourteen.column.doubling.row > .column {
+  .ui[class*="fourteen column"].doubling.grid > .row > .column,
+  .ui[class*="fourteen column"].doubling.grid > .column,
+  .ui.grid > [class*="fourteen column"].doubling.row > .column {
     width: @fourColumn;
   }
-  .ui.sixteen.column.doubling.grid > .row > .column,
-  .ui.sixteen.column.doubling.grid > .column,
-  .ui.grid > .sixteen.column.doubling.row > .column {
+  .ui[class*="sixteen column"].doubling.grid > .row > .column,
+  .ui[class*="sixteen column"].doubling.grid > .column,
+  .ui.grid > [class*="sixteen column"].doubling.row > .column {
     width: @fourColumn;
   }
 }
@@ -861,64 +817,64 @@
   .ui.doubling.grid > .row > .column {
     margin-bottom: @doublingRowSpacing;
   }
-  .ui.two.column.doubling.grid > .row > .column,
-  .ui.two.column.doubling.grid > .column,
-  .ui.grid > .two.column.doubling.row > .column {
+  .ui[class*="two column"].doubling.grid > .row > .column,
+  .ui[class*="two column"].doubling.grid > .column,
+  .ui.grid > [class*="two column"].doubling.row > .column {
     width: @oneColumn;
   }
-  .ui.three.column.doubling.grid > .row > .column,
-  .ui.three.column.doubling.grid > .column,
-  .ui.grid > .three.column.doubling.row > .column {
+  .ui[class*="three column"].doubling.grid > .row > .column,
+  .ui[class*="three column"].doubling.grid > .column,
+  .ui.grid > [class*="three column"].doubling.row > .column {
     width: @twoColumn;
   }
-  .ui.four.column.doubling.grid > .row > .column,
-  .ui.four.column.doubling.grid > .column,
-  .ui.grid > .four.column.doubling.row > .column {
+  .ui[class*="four column"].doubling.grid > .row > .column,
+  .ui[class*="four column"].doubling.grid > .column,
+  .ui.grid > [class*="four column"].doubling.row > .column {
     width: @twoColumn;
   }
-  .ui.five.column.doubling.grid > .row > .column,
-  .ui.five.column.doubling.grid > .column,
-  .ui.grid > .five.column.doubling.row > .column {
+  .ui[class*="five column"].doubling.grid > .row > .column,
+  .ui[class*="five column"].doubling.grid > .column,
+  .ui.grid > [class*="five column"].doubling.row > .column {
     width: @threeColumn;
   }
-  .ui.six.column.doubling.grid > .row > .column,
-  .ui.six.column.doubling.grid > .column,
-  .ui.grid > .six.column.doubling.row > .column {
+  .ui[class*="six column"].doubling.grid > .row > .column,
+  .ui[class*="six column"].doubling.grid > .column,
+  .ui.grid > [class*="six column"].doubling.row > .column {
     width: @threeColumn;
   }
-  .ui.eight.column.doubling.grid > .row > .column,
-  .ui.eight.column.doubling.grid > .column,
-  .ui.grid > .eight.column.doubling.row > .column {
+  .ui[class*="eight column"].doubling.grid > .row > .column,
+  .ui[class*="eight column"].doubling.grid > .column,
+  .ui.grid > [class*="eight column"].doubling.row > .column {
     width: @threeColumn;
   }
-  .ui.eight.column.doubling.grid > .row > .column,
-  .ui.eight.column.doubling.grid > .column,
-  .ui.grid > .eight.column.doubling.row > .column {
+  .ui[class*="eight column"].doubling.grid > .row > .column,
+  .ui[class*="eight column"].doubling.grid > .column,
+  .ui.grid > [class*="eight column"].doubling.row > .column {
     width: @fourColumn;
   }
-  .ui.nine.column.doubling.grid > .row > .column,
-  .ui.nine.column.doubling.grid > .column,
-  .ui.grid > .nine.column.doubling.row > .column {
+  .ui[class*="nine column"].doubling.grid > .row > .column,
+  .ui[class*="nine column"].doubling.grid > .column,
+  .ui.grid > [class*="nine column"].doubling.row > .column {
     width: @fourColumn;
   }
-  .ui.ten.column.doubling.grid > .row > .column,
-  .ui.ten.column.doubling.grid > .column,
-  .ui.grid > .ten.column.doubling.row > .column {
+  .ui[class*="ten column"].doubling.grid > .row > .column,
+  .ui[class*="ten column"].doubling.grid > .column,
+  .ui.grid > [class*="ten column"].doubling.row > .column {
     width: @fiveColumn;
   }
-  .ui.twelve.column.doubling.grid > .row > .column,
-  .ui.twelve.column.doubling.grid > .column,
-  .ui.grid > .twelve.column.doubling.row > .column {
+  .ui[class*="twelve column"].doubling.grid > .row > .column,
+  .ui[class*="twelve column"].doubling.grid > .column,
+  .ui.grid > [class*="twelve column"].doubling.row > .column {
     width: @sixColumn;
   }
-  .ui.fourteen.column.doubling.grid > .row > .column,
-  .ui.fourteen.column.doubling.grid > .column,
-  .ui.grid > .fourteen.column.doubling.row > .column {
+  .ui[class*="fourteen column"].doubling.grid > .row > .column,
+  .ui[class*="fourteen column"].doubling.grid > .column,
+  .ui.grid > [class*="fourteen column"].doubling.row > .column {
     width: @sevenColumn;
   }
-  .ui.sixteen.column.doubling.grid > .row > .column,
-  .ui.sixteen.column.doubling.grid > .column,
-  .ui.grid > .sixteen.column.doubling.row > .column {
+  .ui[class*="sixteen column"].doubling.grid > .row > .column,
+  .ui[class*="sixteen column"].doubling.grid > .column,
+  .ui.grid > [class*="sixteen column"].doubling.row > .column {
     width: @eightColumn;
   }
 }
diff --git a/src/themes/packages/default/collections/grid.variables b/src/themes/packages/default/collections/grid.variables
index df2d3edea..d0a479050 100755
--- a/src/themes/packages/default/collections/grid.variables
+++ b/src/themes/packages/default/collections/grid.variables
@@ -20,7 +20,6 @@
 @rowSpacing: 2rem;
 
 @columnMaxImageWidth: 100%;
-
 @tableWidth: ~"calc(100% + "@gutterWidth~")";
 
 /*******************************