Light Responsive JS
The Light Responsive JS is a cross-browser lightweight web responsive library written by JavaScript. It is easy to use and configure. Just add the responsive configurations via the convention attributes into the HTML DOM and then call the responsive.
It lets you build the front-end website which supports the responsive easier than. You can add any responsive support on any the HTML DOM which you want. Because the responsive is programmatically called, you can control any logic before/after it.
To get started, please download the stable release version at here.
Table Of Contents
Installation
Four quick start options are available:
- Download the latest release.
- Clone the repository:
git clone https://github.com/phatly27/light-responsive-js.git - Install npm:
npm install light-responsive-js - Install bower:
bower install light-responsive-js
Usage
You only need to include light-responsive.js after jQuery. Requires the jQuery 1.4.+
<script src="jquery.js"></script><script src="light-responsive.js"></script>Documentation
You just do simple in three steps to implement the web responsive for your website using the Light Responsive:
- Add the library as the usage part.
- Add the media query attribute into DOM element.
- Call the responsive.
// Responsive all elements that have the 'header' class// This says that if your current window width is between// 481px and 768px(>=481px and <=768px), the .header element// will be added a new class '.header-mobile'$('.header').responsive();This library consists of six following convention media query configuration attributes to define the responsive:
| Media query attribute name | Description |
|---|---|
| mq-min-width-{min-width-pixel}-add-class | If your current window width >= {min-width-pixel}, then add class(es) into the DOM element. |
| mq-min-width-{min-width-pixel}-remove-class | If your current window width >= {min-width-pixel}, then remove class(es) into the DOM element. |
| mq-max-width-{max-width-pixel}-add-class | If your current window width <= {max-width-pixel}, then add class(es) into the DOM element. |
| mq-max-width-{max-width-pixel}-remove-class | If your current window width <= {max-width-pixel}, then remove class(es) into the DOM element. |
| mq-range-width-{min-width-pixel}-{max-width-pixel}-add-class | If your current window width >= {min-width-pixel} and <= {max-width-pixel}, then add class(es) into the DOM element. |
| mq-range-width-{min-width-pixel}-{max-width-pixel}-remove-class | If your current window width >= {min-width-pixel} and <= {max-width-pixel}, then remove class(es) into the DOM element. |
For examples:
mq-min-width-{min-width-pixel}-add-class:
<!-- Add the single class --><!-- Add the multiple classes -->mq-min-width-{min-width-pixel}-remove-class:
<!-- Remove the single class --><!-- Remove the multiple classes -->mq-max-width-{max-width-pixel}-add-class:
<!-- Add the single class --><!-- Add the multiple classes -->mq-max-width-{max-width-pixel}-remove-class:
<!-- Remove the single class --><!-- Remove the multiple classes -->mq-range-width-{min-width-pixel}-{max-width-pixel}-add-class:
<!-- Add the single class --><!-- Add the multiple classes -->mq-range-width-{min-width-pixel}-{max-width-pixel}-remove-class:
<!-- Remove the single class --><!-- Remove the multiple classes -->You have to call the responsive function after to be defined. This function accepts an object with 3 parameters:
- ele: this is jQuery element. Default is $('*')
- autoRun: auto run the responsive after to be initialized. Default is true.
- transition: animate the CSS3 transition. Default is all 0.3s ease-in-out
For examples:
; // Implement the responsive for all DOM elements; // Implement the responsive for the elements that have the '.header' class; // Implement the responsive for the elements that have the '.header' or '.content' classBrowser Support
This library supports almost all modern browsers:
- IE6+.
- Firefox 3.5+.
- Google Chrome.
- Safari 5.1+.
- Opera.
Bugs and Feature Requests
Have a bug or a feature request? If your problem or idea is not addressed yet, please open a new issue.
Copyright and License
Copyright 2015 by Phat Ly released under the MIT license