Breakpoint Detection In jQuery - rwdKit

rwdKit is a breakpoint detector for developers that detects breakpoint changes and creates a debug bar to display the current media/device type and viewport size after window resize.

How to use it:

1. Download and insert the rwdUtility plugin after the latest jQuery library.

<script src="/path/to/cdn/jqueryslim.min.js"></script>
<script src="/path/to/jquery.rwdkit.js"></script>

2. Initialize the plugin to generate the breakpoint detector in a specific container or the whole document.

$(function(){
  $(document).rwdKit();
});

// or
$(function(){
  $('body').rwdKit();
});

// or
$(function(){
  $('.container').rwdKit();
});

3. Override the default media queries breakpoints.

$(document).rwdKit({
  media: {
    xs: 0,
    sm: 576,
    md: 768,
    lg: 992,
    xl: 1200,
    xxl: 1400,
  }
});

4. Change the position of the breakpoint detector. Default: 'bottom'.

$(document).rwdKit({
  position: 'top'
});

5. Determine whether to show the breakpoint change info in the console log instead. Default: false.

$(document).rwdKit({
  console: true
});

6. Customize the appearance of the breakpoint detector.

$(document).rwdKit({
  color: 'white',
  backgroundColor: 'rgba(14,120,200,.9)',
});

7. Force to use old Bootstrap breakpoints. False = Uses Bootstrap 5 breakpoints.

$(document).rwdKit({
  bootstrap: false
});

Changelog:

v2.4.2 (2023-01-14)

• Add left and right keys in iframe

v2.4 (2022-02-19)

• Add bootstrap 5 breakpoints
• Set bootstrap 5 default version

v2.3 (2021-05-17)

• Add navigation breakpoint in iframe view
• Change jquery each function by native for of
• Fix error width size when iframe load

v2.2 (2021-02-24)

• Change filename

v2.1 (2020-12-06)

• Added iframe width in an input to change precisely the size
• Fixed iframe width calculation

v2.0 (2020-11-07)

• Add F4 key to reload page without cache
• Add mobile view in iframe
• Add reload button
• Bootstrap 4 default param
• Remove font-size param

v1.2 (2020-05-11)

• rename plugin name
• modify design of toolbar

2019-12-08

• v1.1.0: Added Bootstrap 4 option

 

---

This awesome jQuery plugin is developed by julienagullo. For more Advanced Usages, please check the demo page or visit the official website.