# light-responsive-js

> The Light Responsive JS is a lightweight web responsive library written by JavaScript. It is easy to use and configure. Just call once and add the responsive configurations via the convention attributes and then call the responsive.

Latest version **1.0.0** (published 2015-02-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install light-responsive-js
pnpm add light-responsive-js
yarn add light-responsive-js
bun add light-responsive-js
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2015-02-10 |
| First published | 2015-02-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 13 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Phat Ly |
| Maintainers | phatly27 |
| Keywords | responsive, javascript, front-end, css |

## Links

- npm: https://www.npmjs.com/package/light-responsive-js
- Repository: https://github.com/phatly27/light-responsive-js
- Issues: https://github.com/phatly27/light-responsive-js/issues
- npm.io page: https://npm.io/package/light-responsive-js

## Dependencies (13)

- [jquery](https://npm.io/package/jquery.md) >= 1.4.2 <= 1.11.2
- [express](https://npm.io/package/express.md) ^4.11.2
- [grunt-cli](https://npm.io/package/grunt-cli.md) *
- [jit-grunt](https://npm.io/package/jit-grunt.md) *
- [phantomjs](https://npm.io/package/phantomjs.md) 1.9.7-14
- [grunt-casperjs](https://npm.io/package/grunt-casperjs.md) ^2.1.0
- [load-grunt-config](https://npm.io/package/load-grunt-config.md) *
- [grunt-contrib-copy](https://npm.io/package/grunt-contrib-copy.md) *
- [grunt-contrib-jade](https://npm.io/package/grunt-contrib-jade.md) *
- [grunt-contrib-less](https://npm.io/package/grunt-contrib-less.md) *
- [grunt-contrib-concat](https://npm.io/package/grunt-contrib-concat.md) *
- [grunt-contrib-uglify](https://npm.io/package/grunt-contrib-uglify.md) *
- [grunt-express-server](https://npm.io/package/grunt-express-server.md) ^0.4.19

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2015-02-10

## README

# [Light Responsive JS](https://www.github.com/phatly27/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](https://github.com/phatly27/light-responsive-js/releases).

# Table Of Contents
- [Installation](#installation)
- [Usage](#usage)
- [Documentation](#documentation)
- [Browser Support](#browser-support)
- [Bugs and feature requests](#bugs-and-feature-requests)
- [Copyright and License](#copyright-and-license)

## Installation
Four quick start options are available:
- [Download the latest release](https://github.com/phatly27/light-responsive-js/archive/v1.0.0.zip).
- 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](dist/light-responsive.js) after jQuery. Requires the jQuery 1.4.+
```javascript
<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](#usage) part.
* Add the media query attribute into DOM element.
```html
<div class='header' mq-range-width-481px-768px-add-class='header-mobile'></div>
```
* Call the responsive.
```jquery
// 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:
```html
<!-- 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:
```html
<!-- 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:
```html
<!-- 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:
```html
<!-- 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:
```html
<!-- 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:
```html
<!-- 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:
```javascript
$('*').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](https://github.com/phatly27/light-responsive-js/issues/new).

## Copyright and License
Copyright 2015 by Phat Ly released under the [MIT license](LICENSE)

---
_Source: https://npm.io/package/light-responsive-js · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._