Rework classes to be `.full' and `.fluid`. This required the use of :not so needs...

diff --git a/scss/xy-grid/_classes.scss b/scss/xy-grid/_classes.scss
index b136e5caf3986afbf3897dfc35847e313dcdcc2e..5b296c749b8efa41797ce6633cc4456932a47c26 100644 (file)
--- a/scss/xy-grid/_classes.scss
+++ b/scss/xy-grid/_classes.scss
@@ -12,14 +12,14 @@
   // Grid Container
   .grid-container {
     @include xy-grid-container;
-  }
 
-  .grid-container-fluid {
-    @include xy-grid-container(100%);
-  }
+    &.fluid {
+      @include xy-grid-container(100%);
+    }
 
-  .grid-container-full {
-    @include xy-grid-container(100%, 0);
+    &.full {
+      @include xy-grid-container(100%, 0);
+    }
   }
 
   // Base grid styles
@@ -168,10 +168,9 @@
       @include xy-gutters($negative: true);
     }
 
-    // Negative margin for grids within `grid-container/grid-container-fluid`
+    // Negative margin for grids within `grid-container/grid-container.fluid`
     // This allows margin and padding grids to line up with eachother
-    .grid-container > &,
-    .grid-container-fluid > & {
+    .grid-container:not(.full) > & {
       @include xy-gutters($negative: true);
     }
 

diff --git a/test/visual/xy-grid/containers.html b/test/visual/xy-grid/containers.html
index f3d54c69d5cb724e23672a95e5f88516ee3d0bb5..8ce0271575158f93a140a8618d9ded550cfb947c 100644 (file)
--- a/test/visual/xy-grid/containers.html
+++ b/test/visual/xy-grid/containers.html
@@ -51,14 +51,14 @@
     <h1>Grid Container Fluid</h1>
     <p>The below 2 examples should line up with each other.</p>
 
-    <div class="grid-container-fluid">
+    <div class="grid-container fluid">
       <div class="grid-x grid-margin-x">
         <div class="cell medium-6"><div class="demo">Cell</div></div>
         <div class="cell medium-6"><div class="demo">Cell</div></div>
       </div>
     </div>
 
-    <div class="grid-container-fluid">
+    <div class="grid-container fluid">
       <div class="grid-x grid-padding-x">
         <div class="cell medium-6"><div class="demo">Cell</div></div>
         <div class="cell medium-6"><div class="demo">Cell</div></div>
@@ -75,14 +75,14 @@
       <p>Also note the use of `overflow-x: hidden;` on the `body`. This is required for this to work correctly, but is noted in the docs.</p>
     </div>
 
-    <div class="grid-container-full">
+    <div class="grid-container full">
       <div class="grid-x grid-margin-x">
         <div class="cell medium-6"><div class="demo">Cell</div></div>
         <div class="cell medium-6"><div class="demo">Cell</div></div>
       </div>
     </div>
 
-    <div class="grid-container-full">
+    <div class="grid-container full">
       <div class="grid-x grid-padding-x">
         <div class="cell medium-6"><div class="demo">Cell</div></div>
         <div class="cell medium-6"><div class="demo">Cell</div></div>