Jank grid to allow xs-xl. Needs changes

scss/base/_grid.scss

@@ -92,48 +92,58 @@ html{
     flex: 0 0 auto;
   }
   
-  .col-1,
+  // Default cols to 100% width when below $media-xs (base 360px)
-  .col-2,
+  .col-1,.col-2,.col-3,.col-4,.col-5,.col-6,
-  .col-3,
+  .col-7,.col-8,.col-9,.col-10,.col-11,.col-12{
-  .col-4,
-  .col-5,
-  .col-6,
-  .col-7,
-  .col-8,
-  .col-9,
-  .col-10,
-  .col-11,
-  .col-12 {
     flex: 0 0 100%;
   }
 
-  /* (100/12) * x = the flex % */
+  @include media($media-xs) {
-  .col-sm-1 { flex: 0 0 8.33%; }
-  .col-sm-2 { flex: 0 0 16.66%; }
-  .col-sm-3 { flex: 0 0 25%; }
-  .col-sm-3p5 { flex: 0 0 29.166%; } /* 3 point 5, example for scroll-off page */
-  .col-sm-4 { flex: 0 0 33.33%; }
-  .col-sm-5 { flex: 0 0 41.66%; }
-  .col-sm-6 { flex: 0 0 50%; }
-  .col-sm-7 { flex: 0 0 58.33%; }
-  .col-sm-8 { flex: 0 0 66.66%; }
-  .col-sm-9 { flex: 0 0 75%; }
-  .col-sm-10 { flex: 0 0 83.33%; }
-  .col-sm-11 { flex: 0 0 91.66%; }
-  .col-sm-12 { flex: 0 0 100%; }
 
-  .hidden-sm {
+    // Once a breakpoint has been hit, cols will behave regularly,
-    display: none;
+    // but will be overwritten/cascaded by their xs,md,lg, etc. counterparts
-  }
+    // This is duplicated at md, as the 'default' col will be medium, needed here in-case people just
+    // use .col-4, etc. as an end-all be-all
+    .col-1 { flex: 0 0 8.33%; }
+    .col-2 { flex: 0 0 16.66%; }
+    .col-3 { flex: 0 0 25%; }
+    .col-3p5 { flex: 0 0 29.166%; } /* 3 point 5, example for scroll-off page, example. Should be set independantly */
+    .col-4 { flex: 0 0 33.33%; }
+    .col-5 { flex: 0 0 41.66%; }
+    .col-6 { flex: 0 0 50%; }
+    .col-7 { flex: 0 0 58.33%; }
+    .col-8 { flex: 0 0 66.66%; }
+    .col-9 { flex: 0 0 75%; }
+    .col-10 { flex: 0 0 83.33%; }
+    .col-11 { flex: 0 0 91.66%; }
+    .col-12 { flex: 0 0 100%; }
+
+    // Now the actual xs styling
+    .col-xs-1 { flex: 0 0 8.33% }
+    .col-xs-2 { flex: 0 0 16.66% }
+    .col-xs-3 { flex: 0 0 25% }
+    .col-xs-4 { flex: 0 0 33.33% }
+    .col-xs-5 { flex: 0 0 41.66% }
+    .col-xs-6 { flex: 0 0 50% }
+    .col-xs-7 { flex: 0 0 58.33% }
+    .col-xs-8 { flex: 0 0 66.66% }
+    .col-xs-9 { flex: 0 0 75% }
+    .col-xs-10 { flex: 0 0 83.33% }
+    .col-xs-11 { flex: 0 0 91.66% }
+    .col-xs-12 { flex: 0 0 100% }
+    
+    .hidden-xs { display: none }
 
-  @media only screen and (min-width: 33.75rem) {  /* ~540px */
   }
 
-  @media only screen and (min-width: 45rem) {  /* ~720px */
+  @include media($media-sm) {
+
+    // THINK .col-3 will need to be re-cascaded each time, otherwise the sm/md will overwrite for ever
+    // if it's recascaded here for instance, any .col-xs that have .col- will be replaced by the (default) col size 
     .col-1 { flex: 0 0 8.33%; }
     .col-2 { flex: 0 0 16.66%; }
     .col-3 { flex: 0 0 25%; }
-    .col-3p5 { flex: 0 0 29.166%; } /* 3 point 5, example for scroll-off page */
+    .col-3p5 { flex: 0 0 29.166%; } /* 3 point 5, example for scroll-off page, example. Should be set independantly */
     .col-4 { flex: 0 0 33.33%; }
     .col-5 { flex: 0 0 41.66%; }
     .col-6 { flex: 0 0 50%; }
@@ -144,12 +154,108 @@ html{
     .col-11 { flex: 0 0 91.66%; }
     .col-12 { flex: 0 0 100%; }
 
-    .hidden-sm { display: block; }
+    /* (100/12) * x = the flex % */
+    .col-sm-1 { flex: 0 0 8.33% }
+    .col-sm-2 { flex: 0 0 16.66% }
+    .col-sm-3 { flex: 0 0 25% }
+    .col-sm-4 { flex: 0 0 33.33% }
+    .col-sm-5 { flex: 0 0 41.66% }
+    .col-sm-6 { flex: 0 0 50% }
+    .col-sm-7 { flex: 0 0 58.33% }
+    .col-sm-8 { flex: 0 0 66.66% }
+    .col-sm-9 { flex: 0 0 75% }
+    .col-sm-10 { flex: 0 0 83.33% }
+    .col-sm-11 { flex: 0 0 91.66% }
+    .col-sm-12 { flex: 0 0 100% }
+    
+    .hidden-sm { display: none }
+
+    // Any overwrites for previous sizes (as using min-width by preference)
+    // Not sure how hidden display altering will work with flex/block/inline-block differences though...
+    // IN FACT. This may not be needed? Could just be that if it's hidden sm, it's hidden above that too?
+    // but then I guess I'd need a 'show-md' etc, which has the same problem...
+    .hidden-xs { display: unset }
+
+  }
+
+  @include media($media-md){
+
+    /* (100/12) * x = the flex % */
+    // Medium AND .col-4 over-ridden for the 2nd time, as medium is to be the default 'col' size
+    .col-md-1, .col-1 { flex: 0 0 8.33% }
+    .col-md-2, .col-2 { flex: 0 0 16.66% }
+    .col-md-3, .col-3 { flex: 0 0 25% }
+    .col-md-4, .col-4 { flex: 0 0 33.33% }
+    .col-md-5, .col-5 { flex: 0 0 41.66% }
+    .col-md-6, .col-6 { flex: 0 0 50% }
+    .col-md-7, .col-7 { flex: 0 0 58.33% }
+    .col-md-8, .col-8 { flex: 0 0 66.66% }
+    .col-md-9, .col-9 { flex: 0 0 75% }
+    .col-md-10, .col-10 { flex: 0 0 83.33% }
+    .col-md-11, .col-11 { flex: 0 0 91.66% }
+    .col-md-12, .col-12 { flex: 0 0 100% }
+    
+    .hidden-md { display: none }
+
+    // Any overwrites for previous sizes (as using min-width by preference)
+    // Not sure how hidden display altering will work with flex/block/inline-block differences though...
+    .hidden-xs, .hidden-sm { display: unset }
+
+  }
+
+  @include media($media-lg) {
+
+    // Col DOESN'T Need to be redone here as it's medium default. If a lg/xl are set, that SHOULD overwrite
+    // each time. So should be good. Reckon I need mixins/functions to replicate this grid though, as it's a
+    // little uhhhh, jank and repetative atm
+    /* (100/12) * x = the flex % */
+    .col-lg-1 { flex: 0 0 8.33% }
+    .col-lg-2 { flex: 0 0 16.66% }
+    .col-lg-3 { flex: 0 0 25% }
+    .col-lg-4 { flex: 0 0 33.33% }
+    .col-lg-5 { flex: 0 0 41.66% }
+    .col-lg-6 { flex: 0 0 50% }
+    .col-lg-7 { flex: 0 0 58.33% }
+    .col-lg-8 { flex: 0 0 66.66% }
+    .col-lg-9 { flex: 0 0 75% }
+    .col-lg-10 { flex: 0 0 83.33% }
+    .col-lg-11 { flex: 0 0 91.66% }
+    .col-lg-12 { flex: 0 0 100% }
+    
+    .hidden-lg { display: none }
+
+    // Any overwrites for previous sizes (as using min-width by preference)
+    // Not sure how hidden display altering will work with flex/block/inline-block differences though...
+    .hidden-xs, .hidden-sm, .hidden-md { display: unset }
+
   }
 
-  @media only screen and (min-width: 60em) { /* ~960px */
+  @include media($media-xl) {
+
+    /* (100/12) * x = the flex % */
+    .col-xl-1 { flex: 0 0 8.33% }
+    .col-xl-2 { flex: 0 0 16.66% }
+    .col-xl-3 { flex: 0 0 25% }
+    .col-xl-4 { flex: 0 0 33.33% }
+    .col-xl-5 { flex: 0 0 41.66% }
+    .col-xl-6 { flex: 0 0 50% }
+    .col-xl-7 { flex: 0 0 58.33% }
+    .col-xl-8 { flex: 0 0 66.66% }
+    .col-xl-9 { flex: 0 0 75% }
+    .col-xl-10 { flex: 0 0 83.33% }
+    .col-xl-11 { flex: 0 0 91.66% }
+    .col-xl-12 { flex: 0 0 100% }
+    
+    .hidden-xl { display: none }
+
+    // Any overwrites for previous sizes (as using min-width by preference)
+    // Not sure how hidden display altering will work with flex/block/inline-block differences though...
+    .hidden-xs, .hidden-sm, .hidden-md, .hidden-lg { display: unset }
+
   }
 
+  // These things may want to have an indivual xs,md,lg, etc. as well, but for now, leaving...
+
   /* Try to avoid !important, have each rule set to keep track of */
   .no-padd, .row.no-padd [class^="col"], .row [class^="col"].no-padd{
     padding: 0; /* In-case elements want to be full-width, touching, etc */