Staff replied SP Page Builder

Why is SPPB 5 using the bootstrap 3 grid?

Asked by Alvaro 3 years ago Last activity 3 years ago

The control of devices in SPPB 5 has remained the same as version 4, which was compatible with Bootstrap 5, with the difference that they have eliminated the control for XXL, which I think is correct, also it was not finished to implement. Also in SPPB4 bootstrap 5 was included with classes like sppb-col, sppb-col-sm-* (576px to 767.98px), sppb-col-md-*(768px to 991.98px), sppb-col-lg-*( 992px to 1199.98px), and sppb-col-xl-*(1200px to more because XXL does not implementes). This made the sppb-col-*-* classes a perfect team with the SPPB4 column drivers that are maintained in SPPB5.

The problem is that in SPPB5 they have removed the bootsrap5 grid to use the version 3 grid, leaving us with classes sppb-col-sm, sppb-col-md and col-sppb-lg and that have different breakpoints than the controls of editor of SPPB5. For example the small (sm) editor breakpoint is up to 767.98px and the sppb-col-sm class is from 768px. This causes addons that use classes to create columns to not work correctly and we have run out of classes to control addon columns up to 767.98px and 1200px and up.

IMPORTANT, I'm talking about columns inside addons which are created with classes, not the controller columns that work correctly.

I would like to know why this regression to the past that no longer uses frameworks like Bootstrap or TailWind

6 replies

Mehtaz Afsana Borsha Staff

3 years ago

Thanks for contacting us. I need to talk about it with our team then I will let you know.

-Regards.

Toufiq Senior Staff

3 years ago

Hi there,

I appreciate you reaching out. I sincerely apologize for this oversight. It is used for the backward compatibility purposes.

-Thanks

Alvaro Asked this

3 years ago

Hi Toufiq

In that case they are neglecting the new ones, which is where we are all headed. I honestly don't understand why go back to the old sm, md and lg breakpoints if the new one supports those breakpoints plus xs and xl that gives us more control.

Is there any plan to improve this by loading the old grid for older versions and the new one for new ones? Or should I just settle?

Regards

Toufiq Senior Staff

3 years ago

We had to keep this grid system for the backward compatibility. If you create a new page then you will get a new grid system except the previous version grid system. I hope you will understand the process. Thanks

Alvaro Asked this

3 years ago

Apparently they didn't understand, I will try to explain better.

There are addons that use sppb-col-* classes to create columns of content within the addon, columns that cannot be controlled with the column editor of the SPPB editor, because it is based on classes that are in sppagebuilder.css. These classes are the ones that are using Bootstrap 3 breakpoints with only 3 breakpoints sm (768px to more), md (992px to more) and lg (1200px to more).

As you must have already realized, your sppb-col- classes only have 3 breakpoints, while the SPPB5 editor has 5 and to make matters worse they don't even match the breakpoint because for example your sppb-col-sm class is from FROM 768px to more, while the editor's is UP TO 767.98px.

*I'm talking about columns created by sppb-col- classes within addons not columns that are created within sections using the editor.**

Note: Following Toufiq's advice, do a new Joomla installation, install SPPB5, install Helix, create new page, drag Person addon, choose the layout that has the image on the right. The result is that it loads the sppb-col-sm-5 and sppb-col-sm-7 classes and as I said many times it has the breakpoint from 768px or more, when to coincide with the breakpoints of the editor and bootstrap 5 it must be up to 767.98px. THAT'S THE PROBLEM

Regards

Paul Frankowski Senior Staff

3 years ago · edited

If I may....

Talking about Boostrap 3 and SPPB 4.x in Sep 2023 doesn't make sense, sorry. Even native Joomla 4.3 uses BT5 files only. We can focus & talk about SPPB 5.x and BT 5.x only. But I understand & grateful your observations.
So that 1px in 767.98px - 768px - makes a big problem for you, okay. I will check deeply and inform developer to correct that according to BT5 rules in one of upcoming updates.

Paul Frankowski Senior Staff

3 years ago · edited

Offcial Bootstrap 5 Grid options

and we have ≥768px in CSS BT5 guides:

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

also in current BT 5.3 it looks that same. Inside all versions of BT 5.x (file bootstrap.css) the real used breakpoints code is:

also inside sppagebuilder.css (SPPB 5) we used:

@media (min-width: 768px) { ....

But it's from Bootstrap 5.3 (not used yet by us) and it's used for tables and offcanvas.

And let's not talk about what was a few years ago, but please focus only on current (and used by us now) versions.

Alvaro Asked this

3 years ago

I appreciate you taking the time to craft your response.
I keep insisting that you are using Bootstrap 3 breakpoints (I'm just talking about the breakpoints)

It can't be bootstrap 5 because this one has 5 breakpoints and yours has 3.

You also say that in BT5 sm is from 576px or more and that your sm is 768px, therefore it is within the bootstrap guide. Which is a lie because you forget to say that in BT5 the max-width for sm is 767.98px and 768px is already md. This still leaves your sppb-col-sm on BT3.

Demonstrating with examples:

The images demonstrate that the sppb-col- classes do not use bootstrap 5 breakpoints.

So why does sppagebuilder.css have different breakpoints than Helix, or the same SPPB5 Edtior, which has 5 breakpoints that coincide with bootstrap 5 and that are used to control the columns in the sections?

Regards

Paul Frankowski Senior Staff

3 years ago

Thank you for the clarification, we will definitely include this in one of the next SPPB updates.