The Easiest Way to make your Website Responsive or Adaptive!
What is Restive.JS?
Restive.JS is a JQuery Plugin that helps you quickly and easily add features to your Web Site to enable it respond and adapt to virtually every Web-enabled Device. Using a combination of Device Detection, Advanced Breakpoints Management, and Orientation Management, Restive.JS will give your Web site an uncanny ability to stay robust in the face of a constantly changing device landscape.
Why do I need Restive.JS?
You're a Web designer or developer [or both] of human origin
You know enough HTML + CSS + JS [meh! you get by] to build or tweak Web pages
You build or tweak Web Sites for Smartphones, Tablets, and other Web-enabled Devices
You are not satisfied with all the plugins, polyfills, and hacks you have to knit together to almost accomplish this
You don't appreciate the amount of time you have to spend working on CSS Media Queries
You enjoy doing seemingly complex tasks in no time [and revel in the feeling of awesomeness that it brings]
Restive.JS helps you become an Expert in Responsive + Adaptive Web Design in Minutes!
What are some of its Features?!
-
Simple. Lightweight. Fast
Restive.JS requires minimal knowledge of JavaScript. Plus it's pretty lightweight (less than 17k minified and gzipped), and it's quite fast too
-
JQuery Goodness
Restive.JS will work on any browser that supports Javascript [and that is practically all browsers]. Plus, you can be sure it's going to be a joy to use
-
Single Point of Markup
Restive.JS gives you the freedom to define all your Responsive or Adaptive Enhancements at a single location within your CSS Markup [unlike Media Queries]
-
Platform + Form-factor Detection
Restive.JS can detect device platforms: iOS, Android, Symbian, Blackberry, Windows; and form-factors too: Phone, Tablet, TV, Desktop
-
Graphic Display Resolution Support
Restive.JS has embedded support for over 50 graphic display resolutions (GDR), so more breakpoint options for you e.g. qHD, VGA, etc. See supported resolutions
-
Multiple Breakpoint Styles and Mixes
Restive.JS allows you to define breakpoints in pixel [320] and in resolution [xga]. You can also mix these different styles together and the Plugin will make it all just work
-
Platform + Form-factor Segmentation
Ever wanted to use one set of breakpoints for iOS and another for Android?! How about one set of breakpoints for Phones, and another for Tablets?! Now you can!
-
Orientation Support
Restive.JS can detect changes in orientation. Plus it provides Orientation Callbacks that you can use to enable orientation-based functionality
-
Breakpoints with Orientation Markers
Restive.JS lets you define breakpoints to match only when in a specific orientation e.g. "640-p" will match a 640 pixel wide viewport only if the device is in portrait mode
-
Modular
Need to make your Website components respond to changes in the sizes of their containers [not just the size of the viewport]?! Restive.JS can do that
How do I Install it?!
// Link CSS
<link rel="stylesheet" href="your-stylesheet.css" />
// Link JQuery
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
// Link Restive.JS
<script type="text/javascript" src="restive.min.js"></script>
// Initialize Restive.JS
<script type="text/javascript">
$(document).ready(function () {
$('selector').restive(options);
});
</script>
NOTE: You can use any version of JQuery above 1.7; 'selector' should be replaced with an actual reference to your DOM element; your-stylesheet.css is just the CSS file where you have defined all your styles.
Please consult the Restive.JS Documentation for more on Installation
How about some Usage examples?!
Making a Web Site Responsive without using Breakpoints
$('body').restive({
breakpoints: ['10000'],
classes: ['nb'],
turbo_classes: 'is_mobile=mobi,is_phone=phone,is_tablet=tablet,is_landscape=landscape'
});
Explanation: We first set a very high range in breakpoints to ensure that Restive.JS will catch all viewports and add the class nb (which we just use to signify that we are using no-breakpoints) to the <body> tag for every device it encounters (being that every device will definitely have a viewport width less than 10000 pixels. turbo_classes will tell Restive.JS to add some additional classes when certain conditions are met. From our settings, those conditions are: (1) if the device is mobile, add class mobi; (2) if the device is a phone, add class phone; (3) if the device is a tablet, add class tablet; and (4) if the device orientation is landscape, add class landscape. When one or more of these conditions are met, it [Restive.JS] will add one or more corresponding classes.
For example, if someone with a Google Nexus 5 visits our Web site, nb mobi phone will be added to the class attribute of the <body> tag, because this device is a mobile device and also a phone. And if they switch orientation to landscape, nb mobi phone landscape will be added. Restive.JS handles these class additions automatically and instantaneously as they occur.
This approach gives you a lot more flexibility and speed as you can now focus on Form-factors and Orientation directly within your CSS Markup:
/** For Desktops **/
#sidebar {display: block; float: right; width: 320px;}
/** For Phones **/
.mobi.phone #sidebar {display: none;}
/** For Tablets in Landscape Orientation **/
.mobi.tablet.landscape #sidebar {display: block; width: 35%;}
Make a Web Site Responsive using Pixel Breakpoints
$('body').restive({
breakpoints: ['240', '320', '480', '640', '960'],
classes: ['css-240', 'css-320', 'css-480', 'css-640', 'css-960']
});
Explanation: Restive.JS will actively monitor the viewport of any devices that visit your web site for the following width ranges: 0 to 240px, 241 to 320px, 321 to 480px, 481 to 640px, and 641 to 960px. If the viewport is between 0 and 240 pixels wide, it will add the class css-240 to the <body> tag; if the viewport is between 241 and 320 pixels wide, it will add the class css-320, and so on.
Make a Web Site Responsive using Pixel + Orientation Breakpoints
$('body').restive({
breakpoints: ['240', '320', '480', '640-p', '640-l', '960'],
classes: ['css-240', 'css-320', 'css-480', 'css-640-p', 'css-640-l', 'css-960']
});
Explanation: Restive.JS will actively monitor the viewports of any devices that visit your web site for the following width ranges: 0 to 240px, 241 to 320px, 321 to 480px, 481 to 640px, and 641 to 960px. If the viewport is between 0 and 240 pixels wide, it will add the class css-240 to the <body> tag; if the viewport is between 241 and 320 pixels wide, it will add the class css-320, and so on.
In addition, due the presence of Orientation Markers, if the viewport is between 481 and 640px, it will also check if the device's orientation is portrait, and if it is, it will add the class "css-640-p" to the <body> tag. On the other hand, if the viewport is between 481 and 640px, but in landscape, it will add the class "css-640-l".
Make a Web Site Responsive using Resolution Breakpoints
$('body').restive({
breakpoints: ['qvga', 'hvga', 'wvga', 'dvga', 'xga', 'sxga', 'uxga'],
classes: ['css-qvga', 'css-hvga', 'css-wvga', 'css-dvga', 'css-xga', 'css-sxga', 'css-uxga']
});
Explanation: Restive.JS will actively monitor the viewports of any devices that visit your web site. From its built-in database, it will abstract the listed resolution breakpoints (e.g. hvga, dvga, etc.) to pixel breakpoints (e.g. 320, 640, etc.) in the proper order i.e. lowest width to highest width. So if the visitor's device is rated as hvga, it will add the class "css-hvga" to the <body> tag; and so on. This feature may come in handy when you're building Websites for Smart TVs.
Click here to see a full list of Graphic Display Resolutions that are allowed for use in Restive.JS.
Making a Web Site both Responsive and Adaptive
$.restive.startMulti();
$('body').restive({
platform: 'ios',
breakpoints: ['240', '320', '480', '640', '960', '1024'],
classes: ['css-i-240', 'css-i-320', 'css-i-480', 'css-i-640', 'css-i-960', 'css-i-1024']
});
$('body').restive({
platform: 'android',
breakpoints: ['240', '320', '480', '640', '960', '1024'],
classes: ['css-a-240', 'css-a-320', 'css-a-480', 'css-a-640', 'css-a-960', 'css-a-1024']
});
$.restive.endMulti();
Explanation: Restive.JS will actively monitor the viewports of any devices that visit your web site for the following width ranges: 0 to 240px, 241 to 320px, 321 to 480px, 481 to 640px, 641 to 960px, and 961 to 1024px; and the following device platforms: iOS and Android. If the viewport is between 481 and 640 pixels wide, and the device is an iOS device e.g. iPhone 4, it will add the class css-i-640 to the <body> tag; if the viewport is between 641 and 960 pixels wide, and the device is an Android device e.g. Nexus 4, it will add the class css-a-960, and so on.
Making your Web Site Components Responsive
$('#container-1').restive({
breakpoints: ['480', '1024'],
classes: ['css-el-480', 'css-el-1024']
});
Explanation: Restive.JS will actively monitor the DOM element identified by ID "container-1" for the following width ranges: 0 to 480px, 481 to 1024px. If the width of element is between 0 and 480 pixels wide, it [Plugin] will add the class css-el-480 to the tag of the DOM element with id container-1; if the width of the element is between 481 and 1024 pixels wide, it [Plugin] will add the class css-el-1024.
Please read the Documentation for more information on Restive.JS Usage.
Get Started with Restive.JS!
Download For Free
Restive.JS is an Easy-to-Use, Virtually Set-and-Forget Framework that helps you make short work of building Responsive + Adaptive Websites.
+ Business Solutions
Are you Building a New Website, or maybe you're trying to Modernize an Existing one?! We'd love to Partner with You and contribute to the Success of your Website Project.