No Code Attached Yet
avatar brianteeman
brianteeman
14 Mar 2022

I'm looking at the scss for cassiopeia and I see that one of the most used variables is $cassiopeia-grid-gutter

However as the value of $cassiopeia-grid-gutter is $grid-gutter-width I can't see that we actually need this additional variable

// Grid columns
$grid-gutter-width: 1em !default;
$cassiopeia-grid-gutter: $grid-gutter-width;

Assuming that I am correct and we don't need this variable I propose to remove it and use grid-gutter-width instead. This will make the css less "cassiopeia-specific" and might even result in the need for less.

Happy to do the work but would like a sanity check from @hans2103 and/or @drmenzelit first that it is indeed a useless variable.

edit : I already did a search and replace and compared the generated css and the results are the same

avatar brianteeman brianteeman - open - 14 Mar 2022
avatar joomla-cms-bot joomla-cms-bot - change - 14 Mar 2022
Labels Added: No Code Attached Yet
avatar joomla-cms-bot joomla-cms-bot - labeled - 14 Mar 2022
avatar brianteeman brianteeman - change - 14 Mar 2022
The description was changed
avatar brianteeman brianteeman - edited - 14 Mar 2022
avatar hans2103
hans2103 - comment - 14 Mar 2022

History of these two variables:

PR [4.0] New Frontend (Aurora) Template #14864
add

// Gutter
$grid-gutter-width-base:             15px !default;

PR [4.0] Move Aurora to CSS Grid #16810
add

$aurora-grid-gutter:                 15px;

PR [4.0] Update Bootstrap to beta-1 #17496
change

$grid-gutter-width:                  15px !default;
$aurora-grid-gutter:                 $grid-gutter-width;

PR [4.0] Rename aurora #18418
rename Aurora to Cassiopeia

$grid-gutter-width:                  15px !default;
$cassiopeia-grid-gutter:          $grid-gutter-width;

Commit ? override Bootstrap 4 px sizes by em sizes
change pc => em

$grid-gutter-width:                  1em !default;
$cassiopeia-grid-gutter:             $grid-gutter-width;

No changes afterwards.

The variable $grid-gutter-width is a Bootstrap 5 variable and set to 1.5rem in bootstrap itself.
https://github.com/twbs/bootstrap/blob/a9a89debc7535a1c5857ced28c1002a2f682889f/scss/_variables.scss#L466

In Cassiopeia an override is created to change this variable to 1em.

I agree with the suggestion made by @brianteeman and replace $cassiopeia-grid-gutter by $gtid-gutter-width

avatar brianteeman brianteeman - change - 14 Mar 2022
Status New Closed
Closed_Date 0000-00-00 00:00:00 2022-03-14 10:06:26
Closed_By brianteeman
avatar brianteeman brianteeman - close - 14 Mar 2022
avatar brianteeman
brianteeman - comment - 14 Mar 2022

OK thanks for confirming I will submit the PR

avatar brianteeman
brianteeman - comment - 14 Mar 2022

please test #37266

Add a Comment

Login with GitHub to post a comment