syze is a library for JavaScript that lets you easily target your designs by device or browser sizes. syze makes designing for desktops, televisions, tablets, and mobile devices simultaneously as easy as CSS. syze works before page load so there is no flicker. Size can update on window resize and orientation change - it works cross-browser, cross-device, cross-library and is less than 1KB.
Download syze.min.js, syze.js or get the latest release at GitHub.
To use syze, include this script anywhere in your page.
<script src="//rezitech.github.com/syze/syze.min.js"></script>
syze is easy to use - all you need is one command to begin.
syze.sizes(320, 480, 768, 1024, 1920);
With the above code, you could now use the following CSS because syze adds these class names to the <html> element.
body { background: no-repeat center center; }
.is320 body { background-image: url(mobile-tall-128x128.png); }
.is480 body { background-image: url(mobile-wide-128x128.png); }
.is768 body { background-image: url(tablet-tall-256x256.png); }
.is1024 body { background-image: url(tablet-wide-256x256.png); }
.is1920 body { background-image: url(hdsize-wide-512x512.png); }
It gets better. We're using syze and a callback right now to see that your browser window supports 1920 content. Resize or rotate this window and see what this reads then.
You can configure syze to assign friendly names to your desired resolutions.
// set sizes and size names
syze.sizes(320, 480, 768, 1024, 1920).names({ 320:'MobileTall', 480:'MobileWide', 768:'TabletTall', 1024:'TabletWide', 1920:'HdSizeWide' });
// How it might work:
// a browser window of 320x480 (eg. an iPhone upright) gets: "isMobileTall ltMobileWide ltTabletTall ltTabletWide ltHdSizeWide"
// a browser window of 1920x1080 (eg. a Desktop or TV) gets: "gtMobileTall gtMobileWide gtTabletTall gtTabletWide isHdSizeWide"
// To clarify:
// a browser window of 0-479px is "MobileTall"
// a browser window of 480-767px is "MobileWide"
// a browser window of 768-1023px is "TabletTall"
// a browser window of 1024-1079px is "TabletWide"
// a browser window of 1920px+ is "HdSizeWide"
You could also simplify the approach.
// set sizes and size names
syze.sizes(480, 768, 1920).names({ 320:'Mobile', 768:'Tablet', 1920:'HdSize' });
// Mobile: 0-767, Tablet: 768-1079, HdSize: 1920+
// a browser window of 320x480 (eg. an iPhone upright) would get "isMobile ltTablet ltHdSize"
// a browser window of 768x1024 (eg. an iPad upright) would get "gtMobile isTablet ltHdSize"
// a browser window of 1920x1080 (eg. a Desktop or TV) would get "gtMobile gtTablet isHdSize"
syze can read either the resolution of the browser window or the entire device, and it even factors in your device's orientation.
// set sizes and read size from device
syze.sizes(480, 768, 1920).from('device');
// a browser window of 320x480 on a device of 1920x1080 would get "gt480 gt768 is1920"
// a browser window of 1920x1080 on a device of 320x480 would get "is480 lt768 lt1920"
syze makes a slim hit to your CPU with its built-in debouncer and gives you control over the rate at which it will fire.
// set sizes and the debounce rate syze.sizes(480, 768, 1920).debounceRate(500); // fires no more than once every half-second
syze lets you add your own events into the mix. Let syze handle the resize and debouncing logic - enjoy the benefits. syze is a perfect companion for your existing javascript library.
// set sizes and add a callback
syze.sizes(320, 480, 768, 1024, 1920).callback(
function(currentSize) {
document.getElementsByTagName('p')[0].innerHTML = 'Your browser window supports '+currentSize+' content.';
}
);
syze includes a nice set of features that give you the control you want.
Sets the sizes to match against. Sizes may be set by a series of arguments or an array.
syze.sizes(100, 200, 300); // checks size against 100, 200, 300 syze.sizes([100, 200, 300]); // checks size against 100, 200, 300
Sets the names of the sizes which are used when syze adds class names to the page.
syze.sizes(480, 768, 1920); // checks size against 480, 768, 1920
syze.names({480: 'Mobile'}, 768: 'Tablet', 1920: 'HdSize'); // substitutes the class names 480 for 'Mobile', 768 for 'Tablet', and 1920 for 'HdSize'
Sets the object syze will size from. Syze accepts the arguments 'browser' (reads the browser window), 'device' (reads the device resolution), or whatever is specified, which may be a variable or a "live" string. The default object sized from is browser window.
syze.from('device'); // sizes from the device
syze.from('browser'); // sizes from the browser window
syze.from(document.body.clientWidth); // sizes from the immediate value of document.body.clientWidth
syze.from('document.body.clientWidth'); // sizes from the live value (during each resize) of document.body.clientWidth
Sets the debounce rate, which is the minimum ammount of time that must pass between syze running. The default debounce rate is set at 50ms.
syze.debounceRate(200); // syze fires no more than once every 200ms
Sets a function to be run when syze fires. Syze passes the current size as an argument.
syze.callback(function(currentSize) { console.log(currentSize); }); // logs the current size each time syze runs
Syze uses a dual MIT/GPL-2.0 License. The MIT License is recommended for most projects, because it is simple, easy to understand, and it places almost no restrictions on what you can do with Syze. If the GPL-2.0 License suits your project better, then you are also free to use Syze under that license.
You don't have to do anything special to choose one license or the other, and you don't have to notify anyone which license you are using. You are free to use Syze in commercial projects as long as the copyright header is left intact.
git checkout -b my_syze)
git commit -am "Added Awesomeness")
git push origin my_syze)