rwdKit jQuery plugin can help developers display the current breakpoint detector in a responsive webpage and creates a debug bar to display current media/device type and viewport size after window resizing.
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
See Demo And Download
Official Website(avantage-digital): Click Here
This superior jQuery/javascript plugin is developed by avantage-digital. For extra Advanced Usages, please go to the official website.
Be First to Comment