Wiki

Welcome to responsive.js wiki, here you can find the documentation for r$ library.

Documentation for Version: 1.0 beta

Summary

Introduction

Responsive.js is a tiny javascript library that extends the classic techniques of responsive web design using the concept of "dynamic media query/css styles client rendering". Define your responsive css rules using a functional notations with fluent interface:
property(element) = function(width) become r$.set(property).as(function(width){return func(width)}).applyTo(selector);
results in dynamic client rendering of media query rappresenting a discrete function slicing width axis (with w from minWidth to maxWidth and epsilon an arbitrarily small positive quantity):

...
@media only screen and (min-width:w-ε) and (max-width:w) { selector { property:func(w-ε)}}
@media only screen and (min-width:w) and (max-width:w+ε) { selector { property:func(w)}}
@media only screen and (min-width:w+ε) and (max-width:w+2ε) { selector { property:func(w+ε)}}
...

or in a dynamic rendering or the right css rules for the current width.
Its also available linear interpolation as :
r$.breakpoints(b1,b2,b3,...bn);
r$.set(property).values(v1,v2,v3,..vn).linear().applyTo(selector);
and many other features.

Installation

Download

responsive.js

and install it in your public javascripts directory.
No other libraries dependency.

Usage

Plain script loading:

<script type='text/javascript' src='responsive.js' />

r$

The base singleton object you must use to access all functionality of responsive.js is named r$. It is based on the concept of Fluent Interface.
A fluent interface is an Object Oriented programming model based on using method chaining to relay the instruction context of a subsequent call.
There is three kind of context :

defined through the return value of a called method
self-referential, where the new context is equivalent to the last context
terminated through the return of a void context.

Methods	Descriptions
settings	Allows to get or set responsive.js settings. usage r$.settings() return current settings. r$.settings(setting) set new settings. (setting is a JSON object) List of setting property indent (true/false) indentation of rendered dynamic css staticWrapper - id of styles node for static (rendered one time) css dynamicWrapper - id of styles node for dynamic (calculated every resize) css useMediaQuery true/false - indicates if r$ renders rules based on media query or normal css styles debug true/false - activate debug mode maxWidth - max width supported minWidth - min width supported defaultStep - default interpolation step
start	enable r$ functionalities.
stop	disable r$ functionalities.
reset	reset r$ rules and events.
render	render defined rules.
breakpoints	define the default breakpoints points. usage r$.breakpoints(300,480,800,1200,1600); r$.breakpoints([300,480,800,1200,1600]);
fireEvents	call all events handlers (functions,dynamic, etc.)
extend	allow to extend r$ functionalities. usage r$.extend(module1,module2,....,modulen); r$.extend(module);