#396, add word order dependency to all grid variations with multiple words

10 years ago · 18106aee38
4 changed files with 274 additions and 323 deletions
--- 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>
--- 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;
--- 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;
  }
 }
--- 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~")";

 /*******************************