From 8c7947755943b69a8c0eefd183ca2636be2b3ae7 Mon Sep 17 00:00:00 2001
From: Isabelle <isabelle@dewebsmid.nl>
Date: Wed, 31 Dec 2025 16:54:02 +0100
Subject: [PATCH 1/3] feat(scss): Add bootstrap-5-like grids & media queries

This branch is just for "good to have" optional stand-alone sass features.

In this commit, I aimed to make some things more like bootstrap 5 for ease of use. I  changed the grid breakpoints to match that of Bootstrap 5's and added media query mixins that are more logical like in bootstrap 5.
---
 .../abstracts/variables/bootstrap/_grid.scss  | 24 ++++++++--
 falcon/_dev/css/theme/custom/_custom.scss     |  4 +-
 .../css/theme/custom/abstracts/_mixins.scss   | 44 +++++++++++++++++++
 3 files changed, 68 insertions(+), 4 deletions(-)
 create mode 100644 falcon/_dev/css/theme/custom/abstracts/_mixins.scss

diff --git a/falcon/_dev/css/abstracts/variables/bootstrap/_grid.scss b/falcon/_dev/css/abstracts/variables/bootstrap/_grid.scss
index 7845a36..9b83776 100644
--- a/falcon/_dev/css/abstracts/variables/bootstrap/_grid.scss
+++ b/falcon/_dev/css/abstracts/variables/bootstrap/_grid.scss
@@ -1,3 +1,21 @@
-$grid-columns:                12;
-$grid-gutter-width:           rem-calc(20px);
-$grid-row-columns:            6;
+// Made this more like the breakpoints used in Bootstrap 5
+$grid-breakpoints: (
+    xs: 0,
+    sm: 576px,
+    md: 768px,
+    lg: 992px,
+    xl: 1200px,
+    xxl: 1400px,
+);
+
+$container-max-widths: (
+    sm: 540px,
+    md: 720px,
+    lg: 960px,
+    xl: 1140px,
+    xxl: 1320px,
+);
+
+$grid-columns: 12;
+$grid-gutter-width: rem-calc(20px);
+$grid-row-columns: 6;
diff --git a/falcon/_dev/css/theme/custom/_custom.scss b/falcon/_dev/css/theme/custom/_custom.scss
index 806fc61..ca0aba9 100644
--- a/falcon/_dev/css/theme/custom/_custom.scss
+++ b/falcon/_dev/css/theme/custom/_custom.scss
@@ -6,7 +6,9 @@ https://medium.com/@diyorbekjuraev77/be-a-master-at-creating-the-7-1-sass-patter
 ⚠️NOTE: All bootstrap overrides have been configured under themes/falcon/_dev/css/abstracts/variables/bootstrap */
 
 //Abstracts: Things used throughout the site such as utility classes and generic overrides.
-//@import "abstracts/mixins";
+@import "abstracts/mixins";
+//@import "abstracts/base";
+//@import "abstracts/utilities";
 
 // Components: parts of the theme itself that are not associated with a module.
 //@import "components/buttons";
diff --git a/falcon/_dev/css/theme/custom/abstracts/_mixins.scss b/falcon/_dev/css/theme/custom/abstracts/_mixins.scss
new file mode 100644
index 0000000..522481e
--- /dev/null
+++ b/falcon/_dev/css/theme/custom/abstracts/_mixins.scss
@@ -0,0 +1,44 @@
+// Bootstrap 5-style responsive mixins (more intuitive than Bootstrap 4)
+// Learn the difference here https://getbootstrap.com/docs/5.0/migration/#sass
+
+@mixin bs5-media-breakpoint-up($name) {
+    $min: map-get($grid-breakpoints, $name);
+    @if $min and $min > 0 {
+        @media (min-width: $min) {
+            @content;
+        }
+    } @else {
+        @content;
+    }
+}
+
+@mixin bs5-media-breakpoint-down($name) {
+    $max: map-get($grid-breakpoints, $name);
+    @if $max {
+        @media (max-width: calc(#{$max} - 0.02px)) {
+            @content;
+        }
+    } @else {
+        @content;
+    }
+}
+
+@mixin bs5-media-breakpoint-between($lower, $upper) {
+    $min: map-get($grid-breakpoints, $lower);
+    $max: map-get($grid-breakpoints, $upper);
+    @if $min and $max {
+        @media (min-width: $min) and (max-width: calc(#{$max} - 0.02px)) {
+            @content;
+        }
+    }
+}
+
+@mixin bs5-media-breakpoint-only($name) {
+    $breakpoint-names: map-keys($grid-breakpoints);
+    $index: index($breakpoint-names, $name);
+    $next-name: nth($breakpoint-names, $index + 1);
+
+    @include bs5-media-breakpoint-between($name, $next-name) {
+        @content;
+    }
+}

From 47f985815ac909e17a8282261eb5a89034a0ab78 Mon Sep 17 00:00:00 2001
From: Isabelle <isabelle@dewebsmid.nl>
Date: Wed, 31 Dec 2025 16:56:10 +0100
Subject: [PATCH 2/3] feat(scss): Add  gap and font-size utility functions

---
 falcon/_dev/css/theme/custom/_custom.scss       |  3 ++-
 .../css/theme/custom/abstracts/_functions.scss  | 17 +++++++++++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)
 create mode 100644 falcon/_dev/css/theme/custom/abstracts/_functions.scss

diff --git a/falcon/_dev/css/theme/custom/_custom.scss b/falcon/_dev/css/theme/custom/_custom.scss
index ca0aba9..9d98505 100644
--- a/falcon/_dev/css/theme/custom/_custom.scss
+++ b/falcon/_dev/css/theme/custom/_custom.scss
@@ -6,8 +6,9 @@ https://medium.com/@diyorbekjuraev77/be-a-master-at-creating-the-7-1-sass-patter
 ⚠️NOTE: All bootstrap overrides have been configured under themes/falcon/_dev/css/abstracts/variables/bootstrap */
 
 //Abstracts: Things used throughout the site such as utility classes and generic overrides.
-@import "abstracts/mixins";
 //@import "abstracts/base";
+@import "abstracts/functions";
+@import "abstracts/mixins";
 //@import "abstracts/utilities";
 
 // Components: parts of the theme itself that are not associated with a module.
diff --git a/falcon/_dev/css/theme/custom/abstracts/_functions.scss b/falcon/_dev/css/theme/custom/abstracts/_functions.scss
new file mode 100644
index 0000000..cc4565e
--- /dev/null
+++ b/falcon/_dev/css/theme/custom/abstracts/_functions.scss
@@ -0,0 +1,17 @@
+@use "sass:math";
+
+// Font size utility classes generator
+// Generates utility classes like .fs-14, .fs-16, etc.
+@for $i from 8 through 72 {
+    .fs-#{$i} {
+        font-size: rem-calc($i * 1px) !important;
+    }
+}
+
+// gap size utility classes generator
+// Generates utility classes like .gap-4
+@for $i from 1 through 35 {
+    .gap-#{$i} {
+        gap: rem-calc($i * 1px) !important;
+    }
+}

From ff9b9a35708f6925b4aba3c3845eef59a0035ad4 Mon Sep 17 00:00:00 2001
From: Isabelle <isabelle@dewebsmid.nl>
Date: Wed, 31 Dec 2025 16:57:43 +0100
Subject: [PATCH 3/3] feat(scss): Replace font-size-base to 14px

This has been standard in the projects I've worked on so far so might as well replace it.
---
 .../css/abstracts/variables/bootstrap/_typography.scss    | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/falcon/_dev/css/abstracts/variables/bootstrap/_typography.scss b/falcon/_dev/css/abstracts/variables/bootstrap/_typography.scss
index 3423a8c..9c5c573 100644
--- a/falcon/_dev/css/abstracts/variables/bootstrap/_typography.scss
+++ b/falcon/_dev/css/abstracts/variables/bootstrap/_typography.scss
@@ -1,10 +1,10 @@
 $font-family-sans-serif:      "Roboto", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 $font-family-base:            $font-family-sans-serif;
 
-$font-size-base:              rem-calc(16px);
-$font-size-lg:                $font-size-base * 1.125;
-$font-size-sm:                $font-size-base * .875;
-$font-size-xs:                $font-size-base * .6875;
+$font-size-base: rem-calc(14px);
+$font-size-lg: $font-size-base * 1.125;
+$font-size-sm: $font-size-base * 0.875;
+$font-size-xs: $font-size-base * 0.6875;
 
 $font-weight-lighter:         200;
 $font-weight-light:           300;