isabelle/Falcon-PrestaShop-9
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(scss): Add bootstrap-5-like grids & media queries

Browse Source 
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.
This commit is contained in:
Isabelle Oving - Anno
2025-12-31 16:54:02 +01:00
parent 3e96574e0a
commit 8c79477559
3 changed files with 68 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
falcon/_dev/css/abstracts/variables/bootstrap/_grid.scss
View File

@ -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;

4
falcon/_dev/css/theme/custom/_custom.scss
View File

@ -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";

44
falcon/_dev/css/theme/custom/abstracts/_mixins.scss Normal file
View File

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