johann-s / bs-breakpoints Goto Github PK

Is code getting actual breakpoints also from defined BS4 CSS custom properties? It seems they are only hardcoded inside script? Or I'm wrong?
Of course, values of breakpoints may vary from project to project. So the definition in the script would then have to be changed.
As you know, there are available CSS custom properties from which the current breakpoints values can be read:

:root {
...
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
...
}

What do you think?

Discussion o about this twbs/bootstrap#25124 (comment)

Hello @Johann-S !

I tried to install your library to my BS4 project without success. I use laravel mix (webpack based) compilation.

All my js files:

becomes one another big app-landing.js file

that I include before </body>:

...
        </main>

        <!-- Bootstrap core JavaScript
        ================================================== -->
        <script src="{{ mix('landing/js/app-landing.js') }}"></script>
    </body>
</html>

app-landing.js (1st image) content:

require('./bootstrap');
require('./custom');

In bootstrap.js file I put your library line. Full file content:

try {
    window.$ = window.jQuery = require('jquery');
    require('bootstrap');
    //!!!here
    require('bs-breakpoints');
    require('jquery.easing');

    //lg
    require('lightgallery');
    require('lg-zoom');

    //fontawesome
    require('./fontawesome');
} catch (e) {}

And in custom.js I put two lines:

...
//all loaded
$(document).ready(function() {
    console.log('loaded');
    bsBreakpoints.init();
    console.log(bsBreakpoints);
...

Finally in console:

What I'm doing wrong?

p.s. https://github.com/sachinchoolur/lightGallery library works fine in same situation.

How to use this with conditional?

Ex. if( bsBreakpoints() == "xs" ) { // do something } else { // do something }

Thanks

I've tried to use a package in Next.JS project with server-side rendering SSR.

On first reload window is not defined error is thrown.

When a component is rendered, state value for a breakpoint is null

Bootstrap 5 adds the bs- prefix by default, turning properties like --breakpoint-sm into --bs-breakpoint-sm.
To not lose BS4 support I recommend checking if the --breakpoint-sm formatted property names return NaN, and then attempting to get the prefixed ones.

See my PR #36

Hi I ran the following jQuery code under Safari on an iPhone 4 with iOS 7.1.2:

$(window).on('init.bs.breakpoint', function (e) {
alert('init ' + e.breakpoint);
})

e.breakpoint ended up being null.

Do you know is bs-breakpoints works under iOS 7 or do you know what the issue may be?

Hey thanks for the plugin - this looks great but I'm struggling to use it properly with jQuery

I can see the breakpoint if I query it like so:
console.log($.Event(bsBreakpoints.getCurrentBreakpoint()).type);

but reading your documentation I believe I should be able to access the breakpoint type on change by default? Could you please provide an example of the following:

"when breakpoint type changes fire XXX"

I could put it within a wrapper like: $(window).on('load resize scroll', function () { }
But I believe this has already been taken care of so not the correct way to handle it?

Bs-breakpoint is returning undefined in IE 11 although it is returning correct value in chrome