ProfessionalWiki / chameleon

Provides a highly flexible and customizable skin using Bootstrap 4
https://www.mediawiki.org/wiki/Skin:Chameleon
Other
115 stars 63 forks source link

added missing 'xxl' to $cmln-grid-breakpoints #341

Closed gesinn-it-gea closed 1 year ago

malberts commented 1 year ago

I have a slight concern with this. Bootstrap 4 never had the xxl breakpoint and adding extra breakpoints will generate extra classes whenever breakpoint-specific classes get generated. Besides the obvious container sizes, there are also things like Dropdown directions (https://getbootstrap.com/docs/4.6/components/dropdowns/#responsive-alignment). I'm not immediately sure how much else is dependent on the breakpoint list.

Of course, we don't necessarily have to be 100% like Bootstrap 4 (and this is going to be necessary once Chameleon is compatible with Bootstrap 5), but I believe the default full Bootstrap is already slightly bloated. And I would imagine most users probably don't expect that breakpoint since it's not in Bootstrap 4.

Have you by any chance checked how much bigger the resulting CSS is?

Would this change not perhaps be better when done on a case-by-case basis per wiki instead of adding to Chameleon? Or have you seen a lot of need for this?

gesinn-it-gea commented 1 year ago

Honestly I did not check the size of the resulting CSS. My use case is a sidebar, that is only applied for larger screens. The existing XL is triggered to early for my use cases. XXL works for me. During working on styles, I was wondering, why XXL was not triggered and found it missing in Chameleon. I currently have XXL in global styles for all of my wikis which is okay for me. I have no worries if this PR is rejected. Just thought it might be helpful for others.

malberts commented 1 year ago

When running in debug mode, the resulting CSS file size looks as follows:

Without xxl: Screenshot_20221106_160916

With xxl: Screenshot_20221106_160936