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; + } +}