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

Go to Restive.JS Docs

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.

Go to Restive.JS Docs

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.

Get It From Github

+ Business Services

Do you have a Website that you want to make Mobile-Friendly? We can Convert your Desktop Website to a Responsive Website in days at a reasonable cost.

Get Business Services

Awesome Features that will help you be a better Web Designer
Built-in event callbacks that enable you execute functions when specific events occur e.g. onRotate
User-friendly and intuitive methods you can use in your Javascript code
Modify the code if you need to
We can make Wordpress Themes and Dreamweaver Templates fully Responsive to virtually all Tablets and Smartphones
Building a new Responsive Website can take months. We can tweak your old one in just days
You spent good money on your old Website. For a little extra we can make it Mobile-friendly, saving you a bundle in Responsive Web Design costs
  You have already signed up for our newsletter!
  Thank you for signing up! We will keep you posted!
  You must provide a full name! Please try again!
  You must provide an email address! Please try again!
  The email address you provided is not valid! Please try again!
  We couldn't send your info! Please make sure your Internet is active then try again!

Want to be a Better Web Designer?!

Sign up for the free Restive Web Design Newsletter today, and we'll send you periodic (no more than weekly) content ranging from Tips and Tutorials, Blog Posts, and Online Courses (including exclusive offers and giveaways) to Events and other activities that can help you be a Better Web Designer.

We won't spam you, and you can unsubscribe at any time