Light, portable, responsive javascript (a side step to avoid an attack).
A single purpose library compatible with IE 6, 7, 8, 9, 10. Safari, Chrome, Firefox.
Built with RequireJS in mind.
include henka in your page, no dependencies:
<script src="henka.min.js"></script>small markup to the body tag to add breakpoints:
<body data-henka="[300,600,900,1200]">results in a class being appended if the view-port is inside the bounds:
<!-- the viewport is greater than 600px, but less than 900px -->
<body class="bp900" data-henka="[300,600,900,1200]">modify the class with a custom prefix:
<body class="custom900" data-henka="[300,600,900,1200]" data-henka-prefix="custom">markup some css to respond accordingly:
body {
/* I am the desktop view */
background:grey;
color:#000;
}
body.bp1200 {
background:yellow;
color:#000;
}
body.bp600 {
background:red;
color:#000;
}
body.bp300 {
background:blue;
color:#000;
}with yobidashi you can catch resize broadcasts: https://github.com/toxigenicpoem/yobidashi
//yobidashi pub/subbed for decoupled javascript!
var cb = yobidashi.bind(function(){
var breakpoint = this.currentBreak();
//do some stuff here and you know the breakpoint
}, henka);
yobidashi.sub('/henka/resized', cb);
//current channels are '/henka/resized' and '/henka/updated'
//bind to henka to retrieve currentBreakpointsupport for no conflict mode:
var _henka = henka.noConflict();s in action: https://dl.dropboxusercontent.com/u/10409166/henka/new_henka.html