Universal padding for grid

Added universal padding to grid, cleaned up the rest of the things that were important in the module. It seems like it's complete.

dist/mini-default.css

@@ -222,3 +222,371 @@ a:visited {
 a:hover, a:focus {
   text-decoration: underline;
 }
+
+/*
+  Definitions for the grid system.
+*/
+.container {
+  margin: 0 auto;
+  padding: 0 calc(1.5 * var(--universal-padding));
+}
+
+.row {
+  box-sizing: border-box;
+  display: flex;
+  flex: 0 1 auto;
+  flex-flow: row wrap;
+}
+
+.col-sm,
+[class^='col-sm-'],
+[class^='col-sm-offset-'],
+.row[class*='cols-sm-'] > * {
+  box-sizing: border-box;
+  flex: 0 0 auto;
+  padding: 0 calc(var(--universal-padding) / 2);
+}
+
+.col-sm,
+.row.cols-sm > * {
+  flex-grow: 1;
+  flex-basis: 0;
+}
+
+.col-sm-1,
+.row.cols-sm-1 > * {
+  flex-basis: 8.33333%;
+}
+
+.col-sm-offset-0 {
+  margin-left: 0;
+}
+
+.col-sm-2,
+.row.cols-sm-2 > * {
+  flex-basis: 16.66667%;
+}
+
+.col-sm-offset-1 {
+  margin-left: 8.33333%;
+}
+
+.col-sm-3,
+.row.cols-sm-3 > * {
+  flex-basis: 25%;
+}
+
+.col-sm-offset-2 {
+  margin-left: 16.66667%;
+}
+
+.col-sm-4,
+.row.cols-sm-4 > * {
+  flex-basis: 33.33333%;
+}
+
+.col-sm-offset-3 {
+  margin-left: 25%;
+}
+
+.col-sm-5,
+.row.cols-sm-5 > * {
+  flex-basis: 41.66667%;
+}
+
+.col-sm-offset-4 {
+  margin-left: 33.33333%;
+}
+
+.col-sm-6,
+.row.cols-sm-6 > * {
+  flex-basis: 50%;
+}
+
+.col-sm-offset-5 {
+  margin-left: 41.66667%;
+}
+
+.col-sm-7,
+.row.cols-sm-7 > * {
+  flex-basis: 58.33333%;
+}
+
+.col-sm-offset-6 {
+  margin-left: 50%;
+}
+
+.col-sm-8,
+.row.cols-sm-8 > * {
+  flex-basis: 66.66667%;
+}
+
+.col-sm-offset-7 {
+  margin-left: 58.33333%;
+}
+
+.col-sm-9,
+.row.cols-sm-9 > * {
+  flex-basis: 75%;
+}
+
+.col-sm-offset-8 {
+  margin-left: 66.66667%;
+}
+
+.col-sm-10,
+.row.cols-sm-10 > * {
+  flex-basis: 83.33333%;
+}
+
+.col-sm-offset-9 {
+  margin-left: 75%;
+}
+
+.col-sm-11,
+.row.cols-sm-11 > * {
+  flex-basis: 91.66667%;
+}
+
+.col-sm-offset-10 {
+  margin-left: 83.33333%;
+}
+
+.col-sm-12,
+.row.cols-sm-12 > * {
+  flex-basis: 100%;
+}
+
+.col-sm-offset-11 {
+  margin-left: 91.66667%;
+}
+
+.col-sm-normal {
+  order: initial;
+}
+
+.col-sm-first {
+  order: -999;
+}
+
+.col-sm-last {
+  order: 999;
+}
+
+@media screen and (min-width: 768px) {
+  .col-md,
+  [class^='col-md-'],
+  [class^='col-md-offset-'],
+  .row[class*='cols-md-'] > * {
+    box-sizing: border-box;
+    flex: 0 0 auto;
+    padding: 0 calc(var(--universal-padding) / 2);
+  }
+  .col-md,
+  .row.cols-md > * {
+    flex-grow: 1;
+    flex-basis: 0;
+  }
+  .col-md-1,
+  .row.cols-md-1 > * {
+    flex-basis: 8.33333%;
+  }
+  .col-md-offset-0 {
+    margin-left: 0;
+  }
+  .col-md-2,
+  .row.cols-md-2 > * {
+    flex-basis: 16.66667%;
+  }
+  .col-md-offset-1 {
+    margin-left: 8.33333%;
+  }
+  .col-md-3,
+  .row.cols-md-3 > * {
+    flex-basis: 25%;
+  }
+  .col-md-offset-2 {
+    margin-left: 16.66667%;
+  }
+  .col-md-4,
+  .row.cols-md-4 > * {
+    flex-basis: 33.33333%;
+  }
+  .col-md-offset-3 {
+    margin-left: 25%;
+  }
+  .col-md-5,
+  .row.cols-md-5 > * {
+    flex-basis: 41.66667%;
+  }
+  .col-md-offset-4 {
+    margin-left: 33.33333%;
+  }
+  .col-md-6,
+  .row.cols-md-6 > * {
+    flex-basis: 50%;
+  }
+  .col-md-offset-5 {
+    margin-left: 41.66667%;
+  }
+  .col-md-7,
+  .row.cols-md-7 > * {
+    flex-basis: 58.33333%;
+  }
+  .col-md-offset-6 {
+    margin-left: 50%;
+  }
+  .col-md-8,
+  .row.cols-md-8 > * {
+    flex-basis: 66.66667%;
+  }
+  .col-md-offset-7 {
+    margin-left: 58.33333%;
+  }
+  .col-md-9,
+  .row.cols-md-9 > * {
+    flex-basis: 75%;
+  }
+  .col-md-offset-8 {
+    margin-left: 66.66667%;
+  }
+  .col-md-10,
+  .row.cols-md-10 > * {
+    flex-basis: 83.33333%;
+  }
+  .col-md-offset-9 {
+    margin-left: 75%;
+  }
+  .col-md-11,
+  .row.cols-md-11 > * {
+    flex-basis: 91.66667%;
+  }
+  .col-md-offset-10 {
+    margin-left: 83.33333%;
+  }
+  .col-md-12,
+  .row.cols-md-12 > * {
+    flex-basis: 100%;
+  }
+  .col-md-offset-11 {
+    margin-left: 91.66667%;
+  }
+  .col-md-normal {
+    order: initial;
+  }
+  .col-md-first {
+    order: -999;
+  }
+  .col-md-last {
+    order: 999;
+  }
+}
+
+@media screen and (min-width: 1280px) {
+  .col-lg,
+  [class^='col-lg-'],
+  [class^='col-lg-offset-'],
+  .row[class*='cols-lg-'] > * {
+    box-sizing: border-box;
+    flex: 0 0 auto;
+    padding: 0 calc(var(--universal-padding) / 2);
+  }
+  .col-lg,
+  .row.cols-lg > * {
+    flex-grow: 1;
+    flex-basis: 0;
+  }
+  .col-lg-1,
+  .row.cols-lg-1 > * {
+    flex-basis: 8.33333%;
+  }
+  .col-lg-offset-0 {
+    margin-left: 0;
+  }
+  .col-lg-2,
+  .row.cols-lg-2 > * {
+    flex-basis: 16.66667%;
+  }
+  .col-lg-offset-1 {
+    margin-left: 8.33333%;
+  }
+  .col-lg-3,
+  .row.cols-lg-3 > * {
+    flex-basis: 25%;
+  }
+  .col-lg-offset-2 {
+    margin-left: 16.66667%;
+  }
+  .col-lg-4,
+  .row.cols-lg-4 > * {
+    flex-basis: 33.33333%;
+  }
+  .col-lg-offset-3 {
+    margin-left: 25%;
+  }
+  .col-lg-5,
+  .row.cols-lg-5 > * {
+    flex-basis: 41.66667%;
+  }
+  .col-lg-offset-4 {
+    margin-left: 33.33333%;
+  }
+  .col-lg-6,
+  .row.cols-lg-6 > * {
+    flex-basis: 50%;
+  }
+  .col-lg-offset-5 {
+    margin-left: 41.66667%;
+  }
+  .col-lg-7,
+  .row.cols-lg-7 > * {
+    flex-basis: 58.33333%;
+  }
+  .col-lg-offset-6 {
+    margin-left: 50%;
+  }
+  .col-lg-8,
+  .row.cols-lg-8 > * {
+    flex-basis: 66.66667%;
+  }
+  .col-lg-offset-7 {
+    margin-left: 58.33333%;
+  }
+  .col-lg-9,
+  .row.cols-lg-9 > * {
+    flex-basis: 75%;
+  }
+  .col-lg-offset-8 {
+    margin-left: 66.66667%;
+  }
+  .col-lg-10,
+  .row.cols-lg-10 > * {
+    flex-basis: 83.33333%;
+  }
+  .col-lg-offset-9 {
+    margin-left: 75%;
+  }
+  .col-lg-11,
+  .row.cols-lg-11 > * {
+    flex-basis: 91.66667%;
+  }
+  .col-lg-offset-10 {
+    margin-left: 83.33333%;
+  }
+  .col-lg-12,
+  .row.cols-lg-12 > * {
+    flex-basis: 100%;
+  }
+  .col-lg-offset-11 {
+    margin-left: 91.66667%;
+  }
+  .col-lg-normal {
+    order: initial;
+  }
+  .col-lg-first {
+    order: -999;
+  }
+  .col-lg-last {
+    order: 999;
+  }
+}

docs/v3/DEVLOG.md

@@ -73,3 +73,7 @@
 
 - Improved the `grid` module by creating a simple `@mixin` to generate each grid step. Complexity is significantly lower now.
 - Properly configured the `grid` module for defaults, without anything stored in CSS variables it now weighs a nice `750bytes`. This will probably grow ever so slightly as soon as I get to add CSS variables.
+- Started using variables in `grid`, namely `--universal-padding`. Size increased only by `26bytes`.
+- Made `$_include-parent-layout` a hidden variable in `grid`.
+- Added scaffolding code in `grid` module, just in case someone decides to use it without any other modules.
+- Oddly enough, a flavor file with the default values and clean code is `1.82KB` gzipped, compared to `1.83KB` gzipped in **Fermion**, which means the variables and changes didn't really mess up size so far. Some changes need to be made and some things added, so it's quite probable that this will not be the final number, but still I am very happy about the results so far.

src/flavors/mini-default.scss

@@ -9,3 +9,4 @@
 */
 
 @import '../mini/core';
+@import '../mini/grid';

src/flavors/mini-doc.scss

@@ -1,9 +1,6 @@
 /* DO NOT USE - THIS IS A FLAVOR BUILT FOR THE DOCUMENTATION AND CONTAINS A LOT OF EXTRA CODE!!! */
 
 @import '../mini/core';
-
-// Use the old grid for a little bit - TODO: Replace when grid is done
-
 @import '../mini/grid';
 
 :not(.doc) {

src/mini/_grid.scss

@@ -2,27 +2,34 @@
   Definitions for the grid system.
 */
 // The grid system uses the flexbox module, meaning it might be incompatible with certain browsers.
-$include-parent-layout:        true !default;         // Flag for rows defining column layouts (`true`/`false`).
+$_include-parent-layout:        true !default;        // [Hidden] Flag for rows defining column layouts (`true`/`false`).
+$grid-column-count:            12 !default;           // Number of columns in the grid (integer value only).
 $grid-container-name:          'container' !default;  // Class name for the grid system container.
-$grid-container-side-padding:  0.75rem !default;      // Padding for the grid container (left and right only).
 $grid-row-name:                'row' !default;        // Class name for the grid system rows.
 $grid-row-parent-layout-prefix:'cols' !default;       // Class name prefix for the grid's row parents.
 $grid-column-prefix:           'col' !default;        // Class name prefix for the grid's columns.
 $grid-column-offset-suffix:    'offset' !default;     // Class name suffix for the grid's offsets.
-$grid-column-count:            12 !default;           // Number of columns in the grid (integer value only).
-$grid-column-padding:          0 0.25rem !default;    // Padding for the columns of the grid.
 $grid-order-normal-suffix:     'normal' !default;     // Class name suffix for grid columns with normal priority.
 $grid-order-first-suffix:      'first' !default;      // Class name suffix for grid columns with highest priority.
 $grid-order-last-suffix:       'last' !default;       // Class name suffix for grid columns with lowest priorty.
 $grid-small-prefix:            'sm' !default;         // Small screen class prefix for grid.
-$grid-medium-breakpoint:       768px !default;        // Medium screen breakpoint for grid.
 $grid-medium-prefix:           'md' !default;         // Medium screen class prefix for grid.
-$grid-large-breakpoint:        1280px !default;       // Large screen breakpoint for grid.
 $grid-large-prefix:            'lg' !default;         // Large screen class prefix for grid.
+$grid-medium-breakpoint:       768px !default;        // Medium screen breakpoint for grid.
+$grid-large-breakpoint:        1280px !default;       // Large screen breakpoint for grid.
+// == Uncomment below code if this module is used on its own ==
+//
+// $universal-padding:       0.5rem !default;
+// $universal-padding-var:   '--universal-padding' !default;
+// :root {
+//   #{$universal-padding-var}: $universal-padding;
+// }
+//
+// ============================================================
 // Fluid grid system container definition.
 .#{$grid-container-name} {
   margin: 0 auto;
-  padding: 0 $grid-container-side-padding;
+  padding: 0 calc(1.5 * var(#{$universal-padding-var}));
 }
 // Grid row definition.
 .#{$grid-row-name} {
@@ -33,14 +40,14 @@ $grid-large-prefix:            'lg' !default;         // Large screen class pref
 }
 // Inline mixin, used to generate class definitions for each grid step.
 @mixin generate-grid-size ($size-prefix){
-  @if $include-parent-layout {
+  @if $_include-parent-layout {
     .#{$grid-column-prefix}-#{$size-prefix},
     [class^='#{$grid-column-prefix}-#{$size-prefix}-'],
     [class^='#{$grid-column-prefix}-#{$size-prefix}-#{$grid-column-offset-suffix}-'],
     .#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$size-prefix}-'] > * {
       box-sizing: border-box;
       flex: 0 0 auto;
-      padding: $grid-column-padding;
+      padding: 0 calc(var(#{$universal-padding-var}) / 2);
     }
     // Grid column specific definition for flexible column.
     .#{$grid-column-prefix}-#{$size-prefix},
@@ -56,7 +63,7 @@ $grid-large-prefix:            'lg' !default;         // Large screen class pref
     [class^='#{$grid-column-prefix}-#{$size-prefix}-'],
     [class^='#{$grid-column-prefix}-#{$size-prefix}-#{$grid-column-offset-suffix}-'] {
       flex: 0 0 auto;
-      padding: $grid-column-padding;
+      padding: 0 calc(var(#{$universal-padding-var}) / 2);
     }
     // Grid column specific definition for flexible column.
     .#{$grid-column-prefix}-#{$size-prefix} {
@@ -67,7 +74,7 @@ $grid-large-prefix:            'lg' !default;         // Large screen class pref
   }
   // Grid column specific definitions for predefined columns.
   @for $i from 1 through $grid-column-count {
-    @if $include-parent-layout {
+    @if $_include-parent-layout {
       .#{$grid-column-prefix}-#{$size-prefix}-#{$i},
       .#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$size-prefix}-#{$i} > * {
         flex-basis: #{($i * 100% / $grid-column-count)};