a designer-friendly JQuery toolkit for building mobile-friendly websites

Get it from Github  

Don't forget to give us a star

Why?

The main reason restive.js exists is to make it easier for you as a Web designer to add responsive and/or mobile-friendly enhancements to your Web pages. Yes, CSS media queries kinda does this, but it has some major issues. Let's take a closer look.

Say you need to build a Web page, and you also need to make that Web page mobile-friendly. With CSS media queries, you have to contrive breakpoints that break the flow of the cascade, and don't really work exactly as you might expect. With restive.js, you simply use classes to do some really powerful customization.

  • CSS Media Queries
    css
    /* Smartphones (all orientations) */
    @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
        #my-element-1 {color: #ff0000;}
    }
    
    /* Smartphones (landscape) */
    @media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) {
        #my-element-1 {color: #00ff00;}
    }
    
    /* Smartphones (portrait) */
    @media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) {
        #my-element-1 {color: #0000ff;}
    }
  • vs.

  • restive.js
    css
    /* Smartphones (all orientations) */
    .r_mobi #my-element-1 {color: #ff0000;}
    
    /* Smartphones (landscape) */
    .r_mobi.r_phone.r_landscape #my-element-1 {color: #00ff00;}
    
    /* Smartphones (portrait) */
    .r_mobi.r_phone.r_portrait #my-element-1 {color: #0000ff;}

As you can see, using CSS media queries isn't very intuitive, and you can't leverage device classes. Plus, your breakpoints will break in ways that are quite difficult to predict.

With restive.js, you can leverage both breakpoints and device classes from within CSS. And, you have 99% certainty that your CSS is going to do exactly what you want it to do.

Getting started

Getting up and running with Restive.js is quick and easy:

Install + Use
html
// Link CSS
<link rel="stylesheet" href="your-stylesheet.css" />

// Link JQuery (1.7.1 or higher)
<script type="text/javascript" src="jquery.min.js"></script>

// Link Restive.JS
<script type="text/javascript" src="restive.min.js"></script>

// Energize Restive.JS
<script type="text/javascript">
      $(document).ready(function () {
            $('body').restive(options);
      });
</script>

where options are the setup parameters [in JSON object format] that you pass to restive.js.

It's that simple! Now, you go to your CSS...and you dominate!

Examples

Let's go over a few examples to see just what we can do with restive.js.

Making a Web page mobile-friendly
js
$('body').restive({
    breakpoints: ['10000'],
    classes: ['nb'],
    turbo_classes: 'is_mobile=r_mobi,is_phone=r_phone,is_tablet=r_tablet,is_landscape=r_landscape',
    force_dip: true
});

So we've defined four options: breakpoints, classes, and turbo_classes, and force_dip.

The breakpoints option is used to define breakpoints, but since we're not using any, we just set a high number so that restive.js catches everything between 0 and 10,000 pixels. The classes option is used to define classes to be added to the selector [<body> in this case].

turbo_classes tells restive.js to add some additional classes when certain conditions are met. From our settings, these conditions are: (1) if the device is mobile, add class r_mobi; (2) if the device is a smartphone, add class r_phone; (3) if the device is a tablet, add class r_tablet; and (4) if the device's orientation is landscape, add class r_landscape. force_dip set to true tells restive.js to consider pixels as device-independent (this is important for retina devices)

So here's what happens when a mobile device hits your Web page. If someone with a Google Nexus 5 visits our Web page while in portrait orientation, nb r_mobi r_phone will be added to the class attribute of the <body> tag, because this device is a mobile device and also a smartphone. And if they switch orientation to landscape, nb r_mobi r_phone r_landscape will be added. Restive.JS handles these class additions automatically and instantaneously as they occur.

So you go to your CSS file and write something like this:

css
/** For Desktops **/
#sidebar {display: block; float: right; width: 320px;}

/** For Phones **/
.r_mobi.r_phone #sidebar {display: none;}

/** For Tablets in Landscape Orientation **/
.r_mobi.r_tablet.r_landscape #sidebar {display: block; width: 35%;}

Super-simple. Super-quick. Super-awesome.

Making a Web page Responsive
js
$('body').restive({
    breakpoints: ['240', '320', '480', '640', '960'],
    classes: ['css-240', 'css-320', 'css-480', 'css-640', 'css-960'],
    force_dip: true
});

In this example, the use of breakpoints is a little more evolved. So, restive.js will actively monitor the viewport of any devices that visit your Web page 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.

Making a Web page Responsive + Orientation Breakpoints
js
$('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'],
    force_dip: true
});

In this example, we see how we can make breakpoints even more powerful using orientation markers. Again, restive.js will actively monitor the viewport: 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, restive.js 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".

Making a Web page Mobile-friendly + Responsive
js
if($.restive.isPC())
{
    $('body').restive({
        breakpoints: ['560', '960'],
        classes: ['r_mobi r_phone', 'r_mobi r_tablet'],
        force_dip: true
    });
}
else if ($.restive.isMobile())
{
    $('body').restive({
        breakpoints: ['10000'],
        classes: ['nb'],
        turbo_classes: 'is_mobile=r_mobi,is_phone=r_phone,is_tablet=r_tablet,is_landscape=r_landscape',
        force_dip: true
    });
}

In this example, we see how we can make a Web page both mobile-friendly and responsive. Above we have two if conditional statements. The first [if($.restive.isPC()){...}] segments desktop users, and the second [if($.restive.isMobile()){...}] segments mobile users.

So, in the first conditional statement, we've setup restive.js to track the following viewport ranges [for desktop users only]: 0 to 560px, and 561 to 960px. If the viewport is between 0 and 560 pixels wide, r_mobi r_phone will be added to the <body> tag; and if the viewport is between 561 and 960 pixels wide, r_mobi r_tablet will be added.

In the second conditional statement, we're not using breakpoints, but we're using the turbo-classes feature; just like we did in the first example. The turbo_classes option tells restive.js to add some additional classes when certain conditions are met.

The result of all this is that you can write CSS for 3 layouts [desktop, phone, and tablet], and then have these layouts intelligently applied based on our settings. So, on desktops, our default layout is used when the viewport is above 960 pixels, the tablet layout is used when the viewport is between 561 and 960 pixels, and the phone layout is used when the viewport is 560 pixels or less. And, on mobile, the tablet layout will be applied for tablet devices, and the phone layout will be applied for smartphones.

This saves from having to write [and manage] a ton of CSS media queries just to make your Web page behave well in both a desktop and mobile context. All you do is write CSS for 3 device classes, and your layout will be automatically responsive and mobile-friendly. Truly awesome for your workflow.

One Giant Leap!

    

restive.js is becoming rScript. Zero jQuery dependency, automatic turbo-classes, page performance optimization, and scroll breakpoints are just some of the awesome new features you can look forward to. rScript will be a great toolkit for building websites that are mobile-friendly, fast, and intelligent.

If you're already using restive.js, don't worry 'bout a thing. There are only a few changes you need to make to use rScript. More details soon.

Services

Do you need help building a new mobile-friendly website, or making your existing website mobile-friendly? We can help using our professional services.

Get Services