Modernizr style testing for viewport width. Sizrizr will add a class to the <html> element for each point added in the format .sizrizr-{{point_name}} as well as creating an object to test against Sizrizr.{{name}}.test
- Include the
sizrizr.min.jsfile - Add points to test against, eg
Sizrizr.addPoint( "small", "under", 580 ); - Init -
Sizrizr.run(); - Test - If your viewport width is under 580px,
Sizrizr.small.testwill returntrueand the classsizrizr-smallis added to the<html>element - Refresh - When necessary (like when adding another point since init, or viewport resize) fire the
Sizrizr.run()function to update the truthyness of the tests and update the<html>'s classes
Sizrizr.addPoint( name, type, point ) : Create a new breakpoint
- name : a string that will be the name of the point to test against later or to be used for classes
- type : a string with the possible value "over", "under", or "between" - this indicates how to test the points
- point : an array or integer, if
typeis "over" or "under" this is an integer to test against, iftypeis "between" this is an array of [bottom, top] to test between.
Once Sizrizr.run() is called you can test against the point using Sizrizr.{{name}}.test to return true or false.
Sizrizr.run() : the first call for Sizrizr, this caches the existing html classes then test all points that have been registered thus far.
Sizrizr.run() : refreshes all registered points and applies the approprate classes to the <html> element
Sizrizr.width() : Returns the current window width
Sizrizr.onchange_to("small", function(){ alert("I'm now small") }) : adds a callback that fires when a point becomes true
Sizrizr doesn't include a native resize event so that you can roll your own as best suites your use case. Just fire Sizrizr.run() whenever necessary. For a lightweight example you can use the debulked onresize handler from Louis Remi.
<script type="text/javascript">
// debulked onresize handler - https://github.com/louisremi/jquery-smartresize
function on_resize(c,t){onresize=function(){clearTimeout(t);t=setTimeout(c,100)};return c};
window.on_resize( Sizrizr.run );
</script>
Currently the test site is leveraging middleman.
$ bundle install
# => installs necessary gems
$ rake server
# => launches a preview on port 4567
$ rake build
# => builds sizrizr and sizrizr.min to /buildReleased under the MIT License