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
• Usage
• Documentation
• Browser Support
• Bugs and feature requests
• Copyright and License

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.

<div class='header' mq-range-width-481px-768px-add-class='header-mobile'></div>

• 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 -->
<div class='header' mq-min-width-481px-add-class='header-desktop'></div>
<!-- Add the multiple classes -->
<div class='header' mq-min-width-481px-add-class='header-tablet, header-desktop'></div>

mq-min-width-{min-width-pixel}-remove-class:

<!-- Remove the single class -->
<div class='header header-mobile' mq-min-width-481px-remove-class='header-mobile'></div>
<!-- Remove the multiple classes -->
<div class='header header-mobile-1 header-mobile-2' mq-min-width-481px-remove-class='header-mobile-1, header-mobile-2'></div>

mq-max-width-{max-width-pixel}-add-class:

<!-- Add the single class -->
<div class='header' mq-max-width-480px-add-class='header-mobile'></div>
<!-- Add the multiple classes -->
<div class='header' mq-max-width-480px-add-class='header-mobile-1, header-mobile-2'></div>

mq-max-width-{max-width-pixel}-remove-class:

<!-- Remove the single class -->
<div class='header header-desktop' mq-max-width-480px-remove-class='header-desktop'></div>
<!-- Remove the multiple classes -->
<div class='header header-desktop-1 header-desktop-2' mq-max-width-480px-remove-class='header-desktop-1, header-desktop-2'></div>

mq-range-width-{min-width-pixel}-{max-width-pixel}-add-class:

<!-- Add the single class -->
<div class='header' mq-range-width-481px-768px-add-class='header-tablet'></div>
<!-- Add the multiple classes -->
<div class='header' mq-range-width-480px-768px-add-class='header-tablet-1, header-tablet-2'></div>

mq-range-width-{min-width-pixel}-{max-width-pixel}-remove-class:

<!-- Remove the single class -->
<div class='header header-desktop' mq-range-width-481px-768px-remove-class='header-desktop'></div>
<!-- Remove the multiple classes -->
<div class='header header-mobile header-desktop' mq-max-width-481px-768px-remove-class='header-mobile, header-desktop'></div>

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:

$('*').responsive(); // Implement the responsive for all DOM elements
$('.header').responsive(); // Implement the responsive for the elements that have the '.header' class
$('.header, .content').responsive(); // Implement the responsive for the elements that have the '.header' or '.content' class

Browser 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