Press "Enter" to skip to content

jQuery Plugin View Current Breakpoint Information in Responsive Web Page | rwdKit

rwdKit jQuery plugin can help developers display the current breakpoint detector in a responsive webpage and creates a debug bar to display the current media/device type and viewport size after window resizing.

responsive breakpoints px, responsive breakpoints 2022, responsive breakpoints css, breakpoints web design, responsive breakpoints bs, common responsive breakpoints

How to make use of it:

1. Download and insert the rwdUtility plugin after the most recent 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 particular container or the entire doc.

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

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

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

3. Override the default media queries breakpoints.

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

4. Change the position of the breakpoint detector.

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

5. Determine whether or not to indicate the breakpoint change data within the console log as an alternative.

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

6. Customize the looks of the breakpoint detector.

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

7. Force to make use of Bootstrap 3 breakpoints. False = Uses Bootstrap 4 breakpoints.

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

Breakpoint Detection In jQuery, jQuery rwdKit 2 Plugin/Github, screen sizes for responsive design


See Demo And Download

Official Website(avantage-digital): Click Here

This superior jQuery/javascript plugin is developed by avantage-digital. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.