Allow custom breakpoints to be defined

codepuncher commented 3 years ago

Is your feature request related to a problem? Please describe. We use Bootstrap to build most of our frontend and gives our designers much more control and freedom with their designs. Clients often have differences in their list of most popular screen resolutions used by their users. One client may need designs to prioritise the 1366px width breakpoint. But that is one of the multiple breakpoints that a design will need to address. Unfortunately, Beaver Builder only gives you 3 defined breakpoints to work with (small, medium and large). Whilst you can of course write your own CSS, it feels like a "hack" and not something that should need to be done. Why define some values in the BB settings and the rest in custom CSS? It can become difficult or tedious to manage.

Describe the solution you'd like It would be a huge improvement for Beaver Builder to allow a custom set of breakpoints. Maybe adding a PHP filter like fl_builder_breakpoints which would contain the current ones we see in the UI. We could then use the filter to add our own to the array.

add_filter('fl_builder_breakpoints', function (array $breakpoints): array {
    $breakpoints['xxl'] = (object) [
        'label' => __('Extra Large Desktop', 'fl-builder'),
        'value' => 1600,
        'unit' => 'px',
    ];

    return $breakpoints;
});

This is my preference and I imagine that I could also extract Bootstrap SCSS variables into JSON which I could then also use in the above filter to automatically add new breakpoints in a Bootstrap project.

Describe alternatives you've considered Of course, you can just add your own CSS breakpoints (either in the BB Global CSS, WP Customiser or your own theme styles). My current approach is adding a Bootstrap .container class to the fl-col-group element (e.g. class="fl-col-group fl-node-606482b0a905e container"). This allows our project-wide container max-widths and padding values to be applied to the rows. Although "containers", "rows" and "columns" don't work the same in BB, the solution works for some cases.

Additional context None

itineris-milos commented 3 years ago

👍

NikoNice44 commented 3 years ago

This 🙌🏻🙌🏻🙌🏻

ramshengale commented 3 years ago

👍

csirvatka commented 3 years ago

Yes!!!! I was glad to find this. I would LOVE to be able to add more breakpoints! There are always more than 2 necessary to have a responsive design look good: consider when the browser window is resized on a desktop or laptop. I always end up having to CSS in several media queries. I feel like BB relies heavily on the user having to resort to a LOT of CSS in general. This one thing would help save a lot of time and hair pulling for me!

codente commented 2 years ago

Just wanted to update that we did look into this for 2.6 but it would be very, very complex to support custom breakpoints. As such, we opted to go a different route and instead we'll be looking at adding another breakpoint.

edellingham commented 2 years ago

Just having an additional couple break points available would be super useful.

csirvatka commented 2 years ago

One additional would be good! Two would be even better! :-) Thank you though!! You could even add more set breakpoints like you have, but allow users to change the widths like we can now. Just a thought. Thank you!!

codente commented 2 years ago

Just wanted to update that we did look into this for 2.6 but it would be very, very complex to support custom breakpoints. As such, we opted to go a different route and instead we'll be looking at adding another breakpoint.

Just a note on this.. we haven't ruled out custom breakpoints which is why this is still open. :)

jodzeee commented 2 years ago

Thanks for the update!

csirvatka commented 2 years ago

Well that helps! Thank you!

From: Jme @.> Sent: Wednesday, August 10, 2022 10:55 AM To: beaverbuilder/feature-requests @.> Cc: csirvatka @.>; Comment @.> Subject: Re: [beaverbuilder/feature-requests] Allow custom breakpoints to be defined (#139)

Just wanted to update that we did look into this for 2.6 but it would be very, very complex to support custom breakpoints. As such, we opted to go a different route and instead we'll be looking at adding another breakpoint.

Just a note on this.. we haven't ruled out custom breakpoints which is why this is still open. :)

— Reply to this email directly, view it on GitHub https://github.com/beaverbuilder/feature-requests/issues/139#issuecomment-1210905503 , or unsubscribe https://github.com/notifications/unsubscribe-auth/AQL4CSFUGLZH5NRYYPTOP23VYPGFFANCNFSM425WG3NQ . You are receiving this because you commented. https://github.com/notifications/beacon/AQL4CSEVDLME6PU7LWMO72LVYPGFFA5CNFSM425WG3N2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOJAWPHHY.gif Message ID: @. @.> >

beaverbuilder / feature-requests

Allow custom breakpoints to be defined #139