Reorganize scss folder

scss/_config.scss

@@ -0,0 +1,58 @@
+// Configuration
+//
+// Variables and settings not related to theme, components, and more go here. It does include layout.
+
+$prefix: bs- !default;
+
+$enable-container-classes: true !default;
+// more to come here…
+
+// Grid breakpoints
+//
+// Define the minimum dimensions at which your layout will change,
+// adapting to different screen sizes, for use in media queries.
+
+// scss-docs-start grid-breakpoints
+$grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+  xxl: 1400px
+) !default;
+// scss-docs-end grid-breakpoints
+
+// Grid columns
+//
+// Set the number of columns and specify the width of the gutters.
+
+$grid-columns: 12 !default;
+$grid-gutter-width: 1.5rem !default;
+$grid-row-columns: 6 !default;
+
+// Grid containers
+//
+// Define the maximum width of `.container` for different screen sizes.
+
+// scss-docs-start container-max-widths
+$container-max-widths: (
+  sm: 540px,
+  md: 720px,
+  lg: 960px,
+  xl: 1140px,
+  xxl: 1320px
+) !default;
+// scss-docs-end container-max-widths
+
+$container-padding-x: $grid-gutter-width !default;
+
+
+// Characters which are escaped by the escape-svg function
+$escaped-characters: (
+  ("<", "%3c"),
+  (">", "%3e"),
+  ("#", "%23"),
+  ("(", "%28"),
+  (")", "%29"),
+) !default;

scss/_grid.scss

@@ -1,39 +0,0 @@
-// Row
-//
-// Rows contain your columns.
-
-:root {
-  @each $name, $value in $grid-breakpoints {
-    --#{$prefix}breakpoint-#{$name}: #{$value};
-  }
-}
-
-@if $enable-grid-classes {
-  .row {
-    @include make-row();
-
-    > * {
-      @include make-col-ready();
-    }
-  }
-}
-
-@if $enable-cssgrid {
-  .grid {
-    display: grid;
-    grid-template-rows: repeat(var(--#{$prefix}rows, 1), 1fr);
-    grid-template-columns: repeat(var(--#{$prefix}columns, #{$grid-columns}), 1fr);
-    gap: var(--#{$prefix}gap, #{$grid-gutter-width});
-
-    @include make-cssgrid();
-  }
-}
-
-
-// Columns
-//
-// Common styles for small and large grid columns
-
-@if $enable-grid-classes {
-  @include make-grid-columns();
-}

scss/_mixins.scss

@@ -9,7 +9,7 @@
 @import "mixins/deprecate";
 
 // Helpers
-@import "mixins/breakpoints";
+// @import "mixins/breakpoints";
 @import "mixins/color-mode";
 @import "mixins/color-scheme";
 @import "mixins/image";
@@ -38,5 +38,5 @@
 
 // Layout
 @import "mixins/clearfix";
-@import "mixins/container";
+// @import "mixins/container";
-@import "mixins/grid";
+// @import "mixins/grid";

scss/_variables.scss

@@ -389,8 +389,8 @@ $color-mode-type:             data !default; // `data` or `media-query`
 
 // Prefix for :root CSS variables
 
-$variable-prefix:             bs- !default; // Deprecated in v5.2.0 for the shorter `$prefix`
+// $variable-prefix:             bs- !default; // Deprecated in v5.2.0 for the shorter `$prefix`
-$prefix:                      $variable-prefix !default;
+// $prefix:                      $variable-prefix !default;
 
 // Gradient
 //
@@ -475,54 +475,54 @@ $icon-link-icon-transform:    translate3d(.25em, 0, 0) !default;
 $paragraph-margin-bottom:   1rem !default;
 
 
-// Grid breakpoints
+// // Grid breakpoints
-//
+// //
-// Define the minimum dimensions at which your layout will change,
+// // Define the minimum dimensions at which your layout will change,
-// adapting to different screen sizes, for use in media queries.
+// // adapting to different screen sizes, for use in media queries.
 
-// scss-docs-start grid-breakpoints
+// // scss-docs-start grid-breakpoints
-$grid-breakpoints: (
+// $grid-breakpoints: (
-  xs: 0,
+//   xs: 0,
-  sm: 576px,
+//   sm: 576px,
-  md: 768px,
+//   md: 768px,
-  lg: 992px,
+//   lg: 992px,
-  xl: 1200px,
+//   xl: 1200px,
-  xxl: 1400px
+//   xxl: 1400px
-) !default;
+// ) !default;
-// scss-docs-end grid-breakpoints
+// // scss-docs-end grid-breakpoints
 
-@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
+// @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
-@include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
+// @include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
 
 
-// Grid containers
+// // Grid containers
-//
+// //
-// Define the maximum width of `.container` for different screen sizes.
+// // Define the maximum width of `.container` for different screen sizes.
 
-// scss-docs-start container-max-widths
+// // scss-docs-start container-max-widths
-$container-max-widths: (
+// $container-max-widths: (
-  sm: 540px,
+//   sm: 540px,
-  md: 720px,
+//   md: 720px,
-  lg: 960px,
+//   lg: 960px,
-  xl: 1140px,
+//   xl: 1140px,
-  xxl: 1320px
+//   xxl: 1320px
-) !default;
+// ) !default;
-// scss-docs-end container-max-widths
+// // scss-docs-end container-max-widths
 
-@include _assert-ascending($container-max-widths, "$container-max-widths");
+// @include _assert-ascending($container-max-widths, "$container-max-widths");
 
 
-// Grid columns
+// // Grid columns
-//
+// //
-// Set the number of columns and specify the width of the gutters.
+// // Set the number of columns and specify the width of the gutters.
 
-$grid-columns:                12 !default;
+// $grid-columns:                12 !default;
-$grid-gutter-width:           1.5rem !default;
+// $grid-gutter-width:           1.5rem !default;
-$grid-row-columns:            6 !default;
+// $grid-row-columns:            6 !default;
 
-// Container padding
+// // Container padding
 
-$container-padding-x: $grid-gutter-width !default;
+// $container-padding-x: $grid-gutter-width !default;
 
 
 // Components

scss/bootstrap.scss

@@ -1,9 +1,11 @@
-@import "mixins/banner";
+// @import "mixins/banner";
-@include bsBanner("");
+// @include bsBanner("");
 
 
 // scss-docs-start import-stack
 // Configuration
+@use "config" as *;
+
 @import "functions";
 @import "variables";
 @import "variables-dark";
@@ -16,8 +18,9 @@
 @import "reboot";
 @import "type";
 @import "images";
-@import "containers";
+// @import "containers";
-@import "grid";
+// @import "grid";
+@import "layout";
 @import "tables";
 @import "forms";
 @import "buttons";

scss/layout/_containers.scss

@@ -1,6 +1,20 @@
+@use "../config" as *;
+@use "breakpoints" as *;
+
 // Container widths
 //
 // Set the container width, and override it for fixed navbars in media queries.
+// Container mixins
+
+@mixin make-container($gutter: $container-padding-x) {
+  --#{$prefix}gutter-x: #{$gutter};
+  --#{$prefix}gutter-y: 0;
+  width: 100%;
+  padding-right: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
+  padding-left: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
+  margin-right: auto;
+  margin-left: auto;
+}
 
 @if $enable-container-classes {
   // Single container class with breakpoint max-widths

scss/layout/_grid.scss

@@ -0,0 +1,83 @@
+@use "sass:map";
+@use "../config" as *;
+@use "breakpoints" as *;
+
+// mdo-do
+// - check gap utilities as replacement for gutter classes from v5
+
+// Row
+//
+// Rows contain your columns.
+
+:root {
+  @each $name, $value in $grid-breakpoints {
+    --#{$prefix}breakpoint-#{$name}: #{$value};
+  }
+}
+
+.grid {
+  --#{$prefix}columns: #{$grid-columns};
+  --#{$prefix}rows: 1;
+  --#{$prefix}gap: #{$grid-gutter-width};
+
+  display: grid;
+  grid-template-rows: repeat(var(--#{$prefix}rows), 1fr);
+  grid-template-columns: repeat(var(--#{$prefix}columns), 1fr);
+  gap: var(--#{$prefix}gap);
+}
+
+@each $breakpoint in map.keys($grid-breakpoints) {
+  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+  @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
+    @if $grid-columns > 0 {
+      @for $i from 1 through $grid-columns {
+        .col#{$infix}-#{$i} {
+          grid-column: auto / span $i;
+        }
+
+        .end#{$infix}-#{$i} {
+          grid-column-end: $i;
+        }
+      }
+
+      // Start with `1` because `0` is an invalid value.
+      // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
+      @for $i from 1 through ($grid-columns - 1) {
+        .col-start#{$infix}-#{$i} {
+          grid-column-start: $i;
+        }
+      }
+    }
+  }
+}
+
+// mdo-do: add to utilities?
+.grid-cols-subgrid {
+  grid-template-columns: subgrid;
+}
+
+.grid-fill {
+  --#{$prefix}gap: #{$grid-gutter-width};
+
+  display: grid;
+  grid-auto-flow: row;
+  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+  gap: var(--#{$prefix}gap);
+}
+
+// mdo-do: add to utilities?
+.g-col-auto {
+  grid-column: auto/auto;
+}
+
+// mdo-do: add to utilities?
+.grid-cols-3 {
+  --#{$prefix}columns: 3;
+}
+.grid-cols-4 {
+  --#{$prefix}columns: 4;
+}
+.grid-cols-6 {
+  --#{$prefix}columns: 6;
+}

scss/layout/index.scss

@@ -0,0 +1,3 @@
+@import "breakpoints";
+@import "containers";
+@import "grid";

scss/mixins/_container.scss

@@ -1,11 +0,0 @@
-// Container mixins
-
-@mixin make-container($gutter: $container-padding-x) {
-  --#{$prefix}gutter-x: #{$gutter};
-  --#{$prefix}gutter-y: 0;
-  width: 100%;
-  padding-right: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
-  padding-left: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
-  margin-right: auto;
-  margin-left: auto;
-}

scss/mixins/_grid.scss

@@ -1,151 +0,0 @@
-// Grid system
-//
-// Generate semantic grid columns with these mixins.
-
-@mixin make-row($gutter: $grid-gutter-width) {
-  --#{$prefix}gutter-x: #{$gutter};
-  --#{$prefix}gutter-y: 0;
-  display: flex;
-  flex-wrap: wrap;
-  // TODO: Revisit calc order after https://github.com/react-bootstrap/react-bootstrap/issues/6039 is fixed
-  margin-top: calc(-1 * var(--#{$prefix}gutter-y)); // stylelint-disable-line function-disallowed-list
-  margin-right: calc(-.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
-  margin-left: calc(-.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
-}
-
-@mixin make-col-ready() {
-  // Add box sizing if only the grid is loaded
-  box-sizing: if(variable-exists(include-column-box-sizing) and $include-column-box-sizing, border-box, null);
-  // Prevent columns from becoming too narrow when at smaller grid tiers by
-  // always setting `width: 100%;`. This works because we set the width
-  // later on to override this initial width.
-  flex-shrink: 0;
-  width: 100%;
-  max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
-  padding-right: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
-  padding-left: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
-  margin-top: var(--#{$prefix}gutter-y);
-}
-
-@mixin make-col($size: false, $columns: $grid-columns) {
-  @if $size {
-    flex: 0 0 auto;
-    width: percentage(divide($size, $columns));
-
-  } @else {
-    flex: 1 1 0;
-    max-width: 100%;
-  }
-}
-
-@mixin make-col-auto() {
-  flex: 0 0 auto;
-  width: auto;
-}
-
-@mixin make-col-offset($size, $columns: $grid-columns) {
-  $num: divide($size, $columns);
-  margin-left: if($num == 0, 0, percentage($num));
-}
-
-// Row columns
-//
-// Specify on a parent element(e.g., .row) to force immediate children into NN
-// number of columns. Supports wrapping to new lines, but does not do a Masonry
-// style grid.
-@mixin row-cols($count) {
-  > * {
-    flex: 0 0 auto;
-    width: percentage(divide(1, $count));
-  }
-}
-
-// Framework grid generation
-//
-// Used only by Bootstrap to generate the correct number of grid classes given
-// any value of `$grid-columns`.
-
-@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
-  @each $breakpoint in map-keys($breakpoints) {
-    $infix: breakpoint-infix($breakpoint, $breakpoints);
-
-    @include media-breakpoint-up($breakpoint, $breakpoints) {
-      // Provide basic `.col-{bp}` classes for equal-width flexbox columns
-      .col#{$infix} {
-        flex: 1 0 0;
-      }
-
-      .row-cols#{$infix}-auto > * {
-        @include make-col-auto();
-      }
-
-      @if $grid-row-columns > 0 {
-        @for $i from 1 through $grid-row-columns {
-          .row-cols#{$infix}-#{$i} {
-            @include row-cols($i);
-          }
-        }
-      }
-
-      .col#{$infix}-auto {
-        @include make-col-auto();
-      }
-
-      @if $columns > 0 {
-        @for $i from 1 through $columns {
-          .col#{$infix}-#{$i} {
-            @include make-col($i, $columns);
-          }
-        }
-
-        // `$columns - 1` because offsetting by the width of an entire row isn't possible
-        @for $i from 0 through ($columns - 1) {
-          @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
-            .offset#{$infix}-#{$i} {
-              @include make-col-offset($i, $columns);
-            }
-          }
-        }
-      }
-
-      // Gutters
-      //
-      // Make use of `.g-*`, `.gx-*` or `.gy-*` utilities to change spacing between the columns.
-      @each $key, $value in $gutters {
-        .g#{$infix}-#{$key},
-        .gx#{$infix}-#{$key} {
-          --#{$prefix}gutter-x: #{$value};
-        }
-
-        .g#{$infix}-#{$key},
-        .gy#{$infix}-#{$key} {
-          --#{$prefix}gutter-y: #{$value};
-        }
-      }
-    }
-  }
-}
-
-@mixin make-cssgrid($columns: $grid-columns, $breakpoints: $grid-breakpoints) {
-  @each $breakpoint in map-keys($breakpoints) {
-    $infix: breakpoint-infix($breakpoint, $breakpoints);
-
-    @include media-breakpoint-up($breakpoint, $breakpoints) {
-      @if $columns > 0 {
-        @for $i from 1 through $columns {
-          .g-col#{$infix}-#{$i} {
-            grid-column: auto / span $i;
-          }
-        }
-
-        // Start with `1` because `0` is an invalid value.
-        // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
-        @for $i from 1 through ($columns - 1) {
-          .g-start#{$infix}-#{$i} {
-            grid-column-start: $i;
-          }
-        }
-      }
-    }
-  }
-}