ResponsiveJS
ResponsiveJS

Responsive Web Design made simple! Dynamic CSS rendering


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".

Benefits

  • functional (fluent interface) styles definition with javascript
  • simplified management of all resolutions, unlimited breakpoints
  • no css download, dynamic css rendering on client side
  • highly maintainable
  • no javascript css emulation. css based results.
  • supports for devices that doesnt support media queries
  • css templating rendering

Quick Links

Download   Wiki   Examples   Donate
Follow on

The problem

Responsive Web Design (often abbreviated to RWD) is a particular technique of Web design for the creation of websites in which the pages automatically adapt their own layout to provide optimal viewing for the environment in which are displayed.
(on desktop pc with different resolutions, tablets, smartphones, cell phones older generation, Web TV)
A site designed with RWD uses CSS, and in particular, media queries, to adapt the layout at the environment in which it is displayed, using proportional fluid grids, flexible images, and some ?pure? css framework.
Media Queries allows the page to use sets of CSS rules depending on some characteristics of the device on which they are displayed, most commonly the width of the viewport, as for example for pc relatives to the browser window in which the page is displayed.
The fluid grid concept calls for page element sizing to be in relative units like percentages or Ems or REMs, rather than absolute units like pixels or points, to obtain a sort of ?automatic? adapting of the content when page size changes.
Many CSS frameworks provide a set of classes for flexible grids that allow the realization of responsive templates, very quickly, based on concepts of row class and many columns class adapting them, usually, to a single point of breakpoints.
A breakpoint point is a value of horizontal resolution that establishes a difference between the ways content is displayed when resolution is greater or less than it is. It is therefore possible to divide the set of values of the resolutions in many subsets for which have different views of content.

For example, if we simply change the background color of the body of the page to a breakpoint point of 767px we have:

@media only screen and (max-width:767px)
{
      body{
             background-color:red;
      }
}
@media only screen and (min-width:767px)
{
      body{
             background-color:blue;
       }
}

The media queries ?min-width? and ?max-width? are the most used in RWD and allows you to divide the "world" of the resolutions in many subsets and not only the use of a single breakpoint point. There are many different resolutions for many different devices and the management of each of them requires a too high effort by designers for handling all.The design process and testing of various media queries are rather onerous in terms of time and often results as big css files with many repetitions for setting different styles for different breakpoints. The maintenance of a website can become very difficult in the case of many different templates and styles.
There is an intrinsic limitation of the use of "only css" solutions caused by the static definition of the rules, compared to the dynamic context of the web page, and some css language limitations. Other strategies for RWD are ?Mobile First? (based on media query) and ?Unobtrusive Javascript/Progressive Enhancement?.
Various solutions around enables javascript to emulate media queries managing events such ?resize? or ?orientationChange? providing a solution for devices that does not support media queries. Using javascript to handle RWD process does not provide quick solutions to handle many situations and involves having to program any change in the presentation of the content.
It is useful in some situations but it would be better to use css to styles elements in all the situations when it is possible.


The solution

Responsive.js (aka r$) proposes an alternative solution to this, allowing you to use the concept of native CSS media queries in combination with the dynamic nature of javascript offering a dynamic rendering of the rules for RWD.
Defining css throught javascript permits to remove some natural limitations of css/media query allowing you to manage the dynamic nature of a web layout depending by the resolution. Therefore, we will describe in an easy way the variations of content presentations in terms of resolution-device width using a functional definition and dynamic rules rendering.
r$ models the problem of RWD as binding a css properties of an element with a function dependent on the width of the device-browser.

  • property (element) = function (width)

This binding is not obtainable, for non-trivial problems, with css due to the static nature of the style rules definitions but it is more simple and intuitive to obtain it with javascript solutions. I think that in many simple situations it is a "waste of resources" having javascript functions called at each resize to manage simple changes as font size and so on (example having from 200 to 500 11px, 12px from 600 to 800, etc.).

It is preferable, however, ?Reddite quae sunt Caesaris Caesari et quae sunt Dei Deo? that is ?Render unto Caesar the things which are Caesar's, and unto God the things that are God's? or in ours case ?Render unto css the things which css can handle, and unto javascript the things that can?t be handled by css?.

r$ allows you to define media queries/css styles thought javascript that will be rendered at runtime as native media queries/styles binded to little width intervals but defined in a dynamic way thanks to javascript (taking in consideration the dependency with width variable). It will be possible to slice the width axis and define a discrete function for each of them and set every css property of elements on the page with a fluent interface syntax :

r$.set(property).as(func(w)).applyTo(selectors);

Learn more reading the Wiki


Contributing

If you think that this library helped you or you wanna contribuite to future developement you can make a free donation.
It is appreciate if you use this library for commercial use to contribute for maintenance of this site and library with a donation.
Thanks in advance.