The Official Weblog for Restive Labs

Getting Started with Restive.JS

  Obinwanne Hill        November 26th 2013
Getting Started with Restive.JS

Designing Web Sites for Smartphones and Tablets sounds really great when you read about it on Web Design Blogs. You get all excited about the awesome possibilities of having your Web site look and feel good on multiple mobile devices [and non-mobile devices alike]. However, when you actually stop the dreaming and get to the doing, your joy literally gets knocked in the teeth by the fearless fists of sorrow.

Have you ever been so frustrated that you shout out the phrase that is identified by those notorious initials "WTF", but you're so gobsmacked with said frustration that you skip the first word and then can't even finish the expletive, you're just like "...THE FFFFF...?!" Well, that's what it was like for me about a year ago when I was trying to get the hang of this Responsive and Adaptive Web Design thing, and I'm pretty sure I'm not the only one. It was - to put it lightly and like Jerry Maguire - "An Up-at-dawn, Pride-swallowing Siege". Numerous CSS Media Queries, Polyfills, and Shims, all conspiring like minions to make me less productive. This whole scenario is one of primary reasons I felt compelled to develop the Restive.JS.

So what is the Restive.JS?! Basically, it's a JQuery Plugin that enables any Web designer to put together Responsive and Adaptive Web Sites like they were an expert at it. The only real skill you need to have is HTML and CSS (which every Web Designer would need to have anyway). Most Web Designers can pretty much design any web site they want for any screen size using HTML and CSS. The real problem is getting everything to work, and Restive.JS helps make this happen.

A Working Example

Let's say today is "Hello World" Day for the Restive.JS, the day we're going to build our first Web site using Restive.JS [with the help of HTML and CSS]. I find that it's usually easier and better to get one's head around something tough when you go through a simple example. So let's do that right now.

So let's assume we have an existing Web site that we had initially designed primarily for a Personal Computer experience, but which we now want to make responsive and/or adaptive to mobile devices [This is the scenario most of us will be saddled with as not everyone has the luxury of "Mobile-First"].

Our Web site code base is as follows:

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Restive.JS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="global.css" type="text/css">

</head>

<body>

    <header>
    	<section id="hs-level-1">
        	<article id="hs-level-1-content">
            	<div class="logo"></div>
            </article>
        </section>
        <section id="hs-level-2">
        	<article id="hs-level-2-content">
            	<nav>
                    <ul class="menu">
                	    <li><a href="#">Item 1</a></li>
                        <li><a href="#">Item 2</a></li>
                        <li><a href="#">Item 3</a></li>
                        <li><a href="#">Item 4</a></li>
                        <li><a href="#">Item 5</a></li>
                        <li><a href="#">Item 6</a></li>
                    </ul>
                </nav>
            </article>
        </section>
    </header>

	<div id="wrapper">
    	<section id="bs-level-1">
        	<article id="bs-level-1-content">
            	<h1>My Page Title</h1>
                <p>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus venenatis lacus nec dignissim. Pellentesque nisl diam, congue nec purus ut, convallis consectetur dui. Proin aliquam mauris et nunc accumsan tristique vulputate eu eros. Pellentesque eget massa in magna pellentesque dapibus. Suspendisse accumsan eu mi id lacinia. Nullam sit amet dolor quis ipsum consequat tempor ut ornare mi. Vestibulum volutpat dictum adipiscing. Etiam ac justo condimentum, molestie diam eu, pulvinar elit. Nullam sagittis, ante sagittis eleifend bibendum, nunc elit commodo nunc, ut euismod lectus dui id neque. Etiam ut commodo eros. Aenean sagittis viverra tincidunt. Nunc posuere posuere consectetur. Integer tincidunt tortor eget nulla cursus, ut consectetur leo tristique.
                 </p>
                 <p>
Donec tempus consectetur tellus, non elementum nunc consectetur at. Nunc quis turpis ac ligula tincidunt aliquam. Mauris ante est, pharetra id sem ac, ultricies semper orci. Pellentesque sit amet mauris non massa lobortis ultrices a accumsan est. Donec tempor interdum ante, vitae volutpat neque faucibus eu. Integer sit amet blandit velit. Curabitur justo odio, consectetur vitae urna et, consectetur pharetra nibh. Nunc consectetur porttitor leo, non accumsan velit ultrices eget. Pellentesque vitae consectetur elit, non pharetra odio. Vivamus dictum laoreet dui, a sodales purus tristique sed. Nunc quis elit quam. Praesent facilisis tempor tempus. Etiam ullamcorper felis quis dui auctor aliquam. Cras luctus orci ut porta viverra. Ut eu dui sed libero convallis adipiscing sed ut elit.
				</p>
            </article>
        </section>
    </div>

    <footer>
    	<section id="fs-level-1">
        	<article id="fs-level-1-content">
            	<div class="contact">
                <p>1 WhereIWork Lane, WhereILive, USA 10101</p>
                </div>
            </article>
        </section>
        <section id="fs-level-2">
        	<article id="fs-level-2-content">
            	<div class="legal">
                <p>Copyright &copy; 2013 Business Inc.</p>
                </div>
            </article>
        </section>
    </footer>

</body>
</html>

CSS

/** global.css **/
/*
	CSS Reset by Eric Meyer - Released under Public Domain
    http://meyerweb.com/eric/tools/css/reset/
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0; font-size: 100%; font-weight:normal; vertical-align: baseline; background: transparent;}
body              {line-height: 1;}
ol, ul            {list-style: none;}
blockquote, q     {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';	content: none;}
:focus            {outline: 0;}
ins               {text-decoration: none;}
del               {text-decoration: line-through;}
table             {border-collapse: collapse;border-spacing: 0;}
small, sub, sup { font-size: .83em; }
sub             { vertical-align: sub;}
sup             { vertical-align: super; }

/*------------------------------------------
Global Styles
-------------------------------------------*/
/* 	SET ALL ELEMENTS TO BOX-SIZING : BORDER-BOX */
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	*behavior: url(boxsizing.htc);
	/*	If you need support for IE7 and lower make
		sure the boxsizing.htc file is linked properly.
		More info here:  https://github.com/Schepp/box-sizing-polyfill */
}

body {font-family: Arial, Verdana, sans-serif; font-size: 100%;  background-color: #ffffff; margin: 0 auto; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility;}
img{max-width: 100%;}

/*------------------------------------------
Layout
-------------------------------------------*/
.clear{clear: both; display:block; overflow:hidden; visibility:hidden;}
#ie .clear{clear:both; display:block; overflow:hidden; visibility:hidden; width:0; height:1px;}
.clearfix:after {visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}
.clearfix {display: inline-block;}
/* start commented backslash hack \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* close commented backslash hack */


header {width: 100%;}
header #hs-level-1 {height: 70px;}
header #hs-level-2 {height: 60px;}

#wrapper {width: 100%; padding: 30px 0 15px 0;}
#wrapper #bs-level-1 {}
#wrapper #bs-level-1-content{}

footer {width: 100%;}
footer #fs-level-1 {}
footer #fs-level-1-content {background-color: #eee;}
footer #fs-level-2 {}
footer #fs-level-2-content {background-color: #ddd;}

section article {width: 960px; margin: 0 auto;}

/*------------------------------------------
Typography
-------------------------------------------*/
h1, h2, h3, h4 {font-weight: bold;}
p {font-size: 110%; padding: 0 0 15px 0; line-height: 1.6em;}

#wrapper section article p {font-size: 120%; padding: 0 0 25px 0;}
#wrapper section article h1{font-size: 180%; padding: 0 0 15px 0;}
footer p {font-size: 100%; padding: 0 0 5px 0; color: #666;}

/*------------------------------------------
Menu
-------------------------------------------*/
header nav {}
header nav ul.menu {margin:0px; padding:0px; list-style-type: none; height: 60px;}
header nav ul.menu li {float: left; background-color: #000; width: 160px; height: 60px; line-height: 60px; vertical-align:middle; text-align: center;}
header nav ul.menu li a {color: #fff;}
header nav ul.menu li a:hover {text-decoration: none;}

/*------------------------------------------
Embellishments
-------------------------------------------*/
header #hs-level-1-content .logo {font-size: 420%; font-weight: bold;}
footer #fs-level-1-content .contact {}
footer #fs-level-2-content .legal {}

/*------------------------------------------
Mobile - for Restive.JS
-------------------------------------------*/

NOTE: Just in case you didn't notice, our CSS file is embedded by link tag via global.css and not inline.

NOTE: We have placed a section header in our CSS file titled "Mobile - for Restive.JS" in anticipation of the CSS code we will be adding later on.

As it stands, the above code is neither responsive nor adaptive.

So let's now use the Restive.JS to make our Web Site mobile-optimized. However, before we start, let's identify all the things we want to have happen to the Web site when a Mobile device is accessing it. We would like to:

  • Change the layout width from 960px to a fluid value of 100%, and add 10px padding on either side
  • Align the logo to the right of the layout if the device is a tablet; and align the logo to the center of the layout if the device is a phone
  • Collapse the horizontal menu to a vertical one, and reduce the height of each menu item if the device is a phone
  • Reduce the text size in the footer area

The list above is a simple list of design changes for our Web site. You don't actually have to do this in detail, because the way Restive.JS works, you can do this on-the-fly.

So now let's install and initialize the Restive.JS by adding the following to our existing HTML code:

HTML

<!-- Install JQuery version 1.7 or higher -->
<script type="text/javascript" src="jquery.min.js"></script>

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

<!-- Initialize Plugin -->
<script>
$( document ).ready(function() {
    $('body').restive({
        breakpoints: ['240', '320', '480', '640', '720', '960', '1280'],
        classes: ['rp_240', 'rp_320', 'rp_480', 'rp_640', 'rp_720', 'rp_960', 'rp_1280'],
        turbo_classes: 'is_mobile=mobi,is_phone=phone,is_tablet=tablet',
        force_dip: true
    });
});
</script>

The Installation part is pretty straighforward, we just link the JQuery and Restive.JS.

From the Initialization part, we see that we have defined four options for Restive.JS: breakpoints, classes, turbo_classes, and force_dip. Let's now explain what this all means.

The Restive.JS will actively monitor the viewport of any devices that visit your web site for the following declared breakpoint ranges (as we have defined them above): 0 to 240px, 241 to 320px, 321 to 480px, 481 to 640px, 641 to 720px, 721 to 960px, and 961 to 1280px (Please note that these are device pixels by default and NOT device-independent pixels). If the viewport of the device that visits our Web site is between 0 and 240 pixels wide, Restive.JS will detect this and it will add the class rp_240 to the <body> tag (which is our JQuery selector); if the viewport is between 241 and 320 pixels wide, it [Restive.JS] will add the class rp_320, and so on. This is basically how breakpoints and classes work. If you notice, the number of breakpoints items is equivalent to the number of classes items.

turbo_classes is a special feature of Restive.JS that will add one or more classes [in addition to any other classes previously added] to our <body> tag when certain conditions are met. From our settings, we have specified that we want to add three classes; mobi, phone, and tablet when the device is a mobile device, a phone, and/or a tablet. So if an iPhone 4 visits our web site, the turbo_classes option will tell Restive.JS to add mobi and phone as classes to the <body> because an iPhone 4 is a mobile device and a phone also. If it was an iPad 2 instead, then what would get added would be mobi and tablet. You'll see why this is useful later on.

Finally, the force_dip option will force breakpoints to consider device-independent pixels [instead of device pixels] in its declared ranges. Restive.JS by default considers device pixels. However, in certain scenarios, you might want to go with device-independent pixels instead and the force_dip option let's you do this. Consider an iPad 4, which has a retina display [pixel ratio of 2] and a device pixel width of 1536 in portrait orientation. This means that it will not match any of our defined ranges since our breakpoints top out at 1280. However, as our Web site is not so complicated as to warrant additional CSS rules for retina tablets, we want all retina tablets to be classified the same as non-retina tablets e.g. iPad 2. So by setting force_dip to true, Restive.JS will see only in device-independent pixels, so 1536 [device pixels] will be considered as 768 [device-independent pixels], which obviously matches one of our declared breakpoint ranges.

So let's now append our additional style rules to our CSS file:

CSS

/*------------------------------------------
Mobile - for Restive.JS
-------------------------------------------*/
.mobi {font-size: 110%;}

.mobi section article {width: 100%; padding: 0 10px;}

.mobi.tablet header #hs-level-1-content .logo {text-align: right;}
.mobi.phone header #hs-level-1-content .logo {text-align: center;}

.mobi.phone header #hs-level-2 {height: auto;}
.mobi.phone header nav ul.menu {height: auto;}
.mobi.phone header nav ul.menu li {float: none; width: 100%; height: 40px; line-height: 40px; border-bottom: 1px dashed #aaa;}

.mobi footer p {font-size: 80%;}

NOTE: This CSS code is appended to our earlier CSS file where we made space for it under "Mobile - for Restive.JS".

So if we now visit this web page with an iPhone 4, Restive.JS will add mobi phone rp_320 to the class attribute of the <body> tag. Note that if we didn't set force_dip to true, this value would have been mobi phone rp_640, since Restive.JS would be considering only device pixels [and not device-independent pixels] in the declared ranges.

So after Restive.JS does its work, and based on our additional CSS rules, we can expect the following outcomes:

  • The font-size for mobile devices will be 110%
  • The layout will become fluid and padding of 10px for the left and right sides will be applied
  • The alignment of our logo will be right for tablets, and center for phones
  • The menu will be collapsed vertically (for phones) i.e. float will be removed, the width will be 100%, and the height of the menu layout has been reset to auto. The height of menu items (<li>) will also become 40px, and a bottom-border will be added to delineate each item.
  • Finally, the footer paragraph font-size will be reduced to 80%

In Closing

So with Restive.JS, and with just a few lines of additional code in JS and CSS, we can make a relatively rigid web page much more responsive and adaptive to mobile devices. I wonder how long it would take us to do the same thing using CSS Media Queries?!

Restive.JS actually has a lot more features than were demonstrated here so please have a look at the Restive.JS Docs for more on what the plugin has to offer.

I would urge you to give Restive.JS a trial in your Mobile Web Design Project and see if it makes your life a little easier.

Happy Less Coding!

What is Restive?!

Restive Labs is a creator of software and services for helping Web designers, developers, and enthusiasts build Websites that are both Responsive and Fast.