In 2013 was released the first version of r$ that has had many downloads but little support from the community.
Despite this we are about to implement the second version of r$ even more powerful and improved and we need your feedback to make the product that best meets your needs.
Here its a list of new features that will be shipped into new version :
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".
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.
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.
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
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.