A simple responsive elements script. Inspired by https://github.com/kumailht/responsive-elements but simpler and without any dependencies.
Add breakpoints to responsive elements
<div data-breaks="320,480,768,1280">...</div>
Add CSS styles for the sizes
.\>320 {
background-color: peachpuff;
}
.\>768 {
background-color: aliceblue;
}
Add breaks2000 script to page
<script src="https://unpkg.com/breaks2000"></script>
or if you prefer to self-host
<script src="/path/to/breaks2000.min.js"></script>
Call initialization function on page load
breaks2000.init();
When adding elements to page call
breaks2000.update();
If, for some reason, breaks2000 has to be deactivated on a page call
breaks2000.uninit();
Modern browsers and optionally IE8.
- UMD bundle
- unpkg CDN example
- ES6 module support
- CJS module support
- Bower support
- Bugfixes
- Added optional
uninit()
function for removing breaks2000.
- Class names changed from
gt-[size]
/lt-[size]
to>[size]
/<[size]
. This is a breaking change from 1.0.0
Released under MIT License.