<commit_before># Restive Plugin

The Web today is [Restive](http://blog.restive.io/posts/8359732/restive-web-design)! Restive Plugin is a JQuery Plugin that helps you quickly and easily add features to your Web Site that enable it respond and adapt to virtually every Web-enabled Device. Using a combination of Device Detection, Advanced Breakpoints Management, and Orientation Management, the Plugin will give your Web site an uncanny ability to stay robust in the face of a constantly changing device landscape.



## Why Restive Plugin?!

As a Web Designer, designing Web sites for Personal Computers and for Mobile Devices is enough work already. You can design all your layouts using HTML and CSS, but enabling your Web sites to be Responsive/Adaptive usually requires a lot more work than is reasonable. 

If you find that you fit one or more of the criteria below, then you might want to consider using Restive Plugin:

- You design Web Sites that need to be Responsive or Adaptive
- You are not completely satisfied with the tools and/or approaches you currently use to achieve this "Responsiveness" or "Adaptiveness"
- You need ONE solution and do not want (nor have the time) to cobble together multiple polyfills and shims to enable your desired features
- You need more functionality than CSS Media Queries can possibly provide at the moment
- You need a solution that you can truly 'Set-and-Forget'
- You need a solution that is very easy to understand, use, and maintain

**Restive Plugin enables you to Become an Expert in Responsive + Adaptive Web Design in Minutes!**



## Requirements

- [jQuery](http://jquery.com/) (>= 1.7.1 is recommended)



## Versions

There are two versions of the Restive Plugin:

1. Basic Version: this is the version available here on Github
2. Pro Version: this is available exclusively via the [Restive Plugin Web Site](http://plugin.restive.io)

The Pro Version has some additional features like `Modularity` and `Breakpoint Analytics`. See the **[Restive Plugin Docs](http://docs.restive.io/plugin)** for more information.



## License

[Click here to view the License Agreement](/LICENSE.md) for the Basic Version of Restive Plugin.

Please note that Restive Plugin Basic is **FREE** (and always will be) for Non-Commercial and Personal Projects. If you plan to use Restive Plugin Basic in a Commercial Project, you will need to purchase a Basic Commercial License. Pay Once, Use Forever `#POUF`.

[![Buy Basic Commercial License](/img_button_plugin_buynow_pouf.png)](https://restive.dpdcart.com/cart/buy?product_id=72269&product_price_id=74835&quantity=1&gateway=creditcard)

Use Coupon Code **GITHUB-SAVE** to get 10% off Original License Price. Valid for first 500 users.

[Click here for more information on what is considered **Commercial**](/WHAT-IS-COMMERCIAL.md)



## Changelog

[Click here to view the Changelog](/CHANGELOG.md)



## Installation

Include script *after* the jQuery library:

```html
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/restive.min.js"></script>
```    



## Usage

The basic format for using Restive Plugin is as follows:

```html
<script>
    $(document).ready(function () {
        $('selector').restive(options);
    });
</script>
```

Let's try a basic example. Say we have designed a HTML5 Web site and we want to make it Responsive to a specific set of breakpoints: 240, 320, 480, 640, 960, 1024, and 1280. Our Restive Plugin Setup will look something like this:

```html
<script>
    $(document).ready(function () {
        $('body').restive({
			breakpoints: ['240', '320', '480', '640', '960', '1024', '1280'],
            classes: ['css-240', 'css-320', 'css-480', 'css-640', 'css-960', 'css-1024', 'css-1280']            
		});
    });
</script>
```

**So what does the above setup mean?!** Restive Plugin will actively monitor the viewport of any devices that visit your web site for the following declared breakpoint ranges: 0 to 240 pixels, 241 to 320 pixels, 321 to 480 pixels, 481 to 640 pixels, 641 to 960 pixels, 961 to 1024 pixels, and 1025 to 1280 pixels (Please note that these are `device pixels` by default and **NOT** `device-independent pixels`). If the viewport of the device is between 0 and 240 pixels wide, Restive Plugin will add the class `css-240` to the `<body>` tag; if the viewport is between 241 and 320 pixels wide, it will add the class `css-320`, and so on.

So if I have a `Google Nexus 4` (768 pixels wide by 1280 pixels high when in portrait orientation) and I visited a Web site with the above Restive Plugin configuration, the plugin would add the class `css-960` to the body tag, because the viewport of the device falls within 640 pixels and 960 pixels wide. You could then tweak your CSS file and add any required style rules required to customize your layout.

Please See the Blog Post Titled **'[Getting Started with Restive Plugin](http://blog.restive.io/posts/5852603/getting-started-with-restive-plugin)'** for a broader explanation of how the Restive Plugin can work for you in a real-life Web Design scenario.

**NOTE**: We strongly advise that you use either `html` or `body` as your preferred selector always.



## Known Limitations

- This plugin uses AmplifyJS Store functionality to store data in SessionStorage (by default and if available). If SessionStorage is not available, LocalStorage is used; And if Session Storage and LocalStorage are not available, it relies on AmplifyJS Store to make a suitable selection. As a result, behavior on very old browsers may be unpredictable.  



## Script Reference Warnings

Please be mindful to disable the following Javascript libraries from your Web pages before using Restive Plugin (i.e. if you have them enabled):

- [AmplifyJS Store](http://amplifyjs.com/api/store/)
- [JSON2.js](https://github.com/douglascrockford/JSON-js)
- [jquery-cookie](https://github.com/carhartl/jquery-cookie)
- [iOS-Orientation-Fix](https://github.com/PeterWooster/iOS-Orientationchange-Fix)

These libraries are already embedded within Restive Plugin.



## Credits

Restive will like to thank the following third-parties for script usage (and some inspiration):

- AppendTo - [AmplifyJS Store](http://amplifyjs.com/api/store/)
- <NAME> - [JSON2.js](https://github.com/douglascrockford/JSON-js)
- <NAME> - [PHPJS](https://github.com/kvz/phpjs)
- <NAME> - [JQuery Cookie](https://github.com/carhartl/jquery-cookie) 
- <NAME>, <NAME> - [iOS-OrientationChange-Fix](https://github.com/PeterWooster/iOS-Orientationchange-Fix)
- <NAME> - [Response.js](https://github.com/ryanve/response.js)



## API Reference

### Options

These are the options available within **Restive Plugin**. The default values are also listed.


#### breakpoints

An itemized list of dimensions that define a specific range within which an adaptive action should take place. Restive Plugin allows for 2 distinct types of breakpoints:

1. Pixel e.g. 320
2. Resolution e.g. nHD, SVGA, XGA, etc.

Breakpoints are defined as an array:

```javascript
    //example
    breakpoints: ['240', '320', '480', '640']
```

The above setting means that the plugin will monitor the viewport for the following width ranges: 0 to 240px, 241 to 320 pixels, 321 to 480 pixels, and 481 to 640 pixels. It will then apply classes (see next option) to the DOM based on which declared range the viewport width matches.

**NOTE**: Do not start from zero when defining breakpoints. Always start from the upper limit of the implied range. For example, if you specify `240` as the first item in the `breakpoints` option, the plugin will enable a range of 0 to 240; if 480 is the next item, the plugin will enable a range of 241 to 480 and so on.

**NOTE**: Do NOT use commas when defining breakpoints that are in the thousands e.g. never do '1,000'; do '1000' instead.

**NOTE**: Ensure that you define your breakpoints based on device pixels [and not css/device-independent pixels]. For example, if you want to match a device width of 720 pixels, use 720 even when you know the Device-Independent Pixel Width is 360. You can override this behavior by using the `force_dip` option.


#### classes

An itemized and corresponding list of CSS classes that will be set to the matched element defined in the Restive Plugin selector, in lock-step with the corresponding breakpoints.

Classes are defined as an array:

```javascript
    //example
    classes: ['240-c', '320-c', '480-c', '640-c']
```

The above setting will add the class `320-c` to the selected DOM element when the viewport is between 241 and 320 pixels (considering the `breakpoints` options defined earlier).

**NOTE**: The number of `classes` defined here must be identical to the number of breakpoint items defined in the `breakpoints` option.

**NOTE**: You can also add multiple classes to the matched element defined in the Restive Plugin selector. Simply space-separate your classes e.g. 'myclass1 myclass2' is valid


#### force_dip

This option provides an override capability that forces the `breakpoints` option to consider device-independent pixels instead of device pixels (which is the default behavior). Setting this option to true enables the override.

For example, say you have an `iPad 2` and an `iPad Air` (which has a `retina` display), and your Restive Plugin settings are as set up below:

```javascript
$('body').restive({
    breakpoints: ['768', '1280'],
    classes: ['768-c', '1280-c']
});
```

If a user uses the `iPad 2` to visit your web site (in portrait orientation), the class `768-c` will be added to the class attribute of the `<body>` tag. However, if the `iPad Air` is used, nothing gets added to the `<body>` tag because the iPad Air viewport width is 1536 pixels (i.e. considering device pixels). This is the default behavior for `breakpoints`.<commit_msg>Content Refresh<commit_after># Restive Plugin

The Web today is [Restive](http://blog.restive.io/posts/8359732/restive-web-design)! Restive Plugin is a JQuery Plugin that helps you quickly and easily add features to your Web Site that enable it respond and adapt to virtually every Web-enabled Device. Using a combination of Device Detection, Advanced Breakpoints Management, and Orientation Management, the Plugin will give your Web site an uncanny ability to stay robust in the face of a constantly changing device landscape.



## Why Restive Plugin?!

As a Web Designer, designing Web sites for Personal Computers and for Mobile Devices is enough work already. You can design all your layouts using HTML and CSS, but enabling your Web sites to be Responsive/Adaptive usually requires a lot more work than is reasonable. 

If you find that you fit one or more of the criteria below, then you might want to consider using Restive Plugin:

- You design Web Sites that need to be Responsive or Adaptive
- You are not completely satisfied with the tools and/or approaches you currently use to achieve this "Responsiveness" or "Adaptiveness"
- You need ONE solution and do not want (nor have the time) to cobble together multiple polyfills and shims to enable your desired features
- You need more functionality than CSS Media Queries can possibly provide at the moment
- You need a solution that you can truly 'Set-and-Forget'
- You need a solution that is very easy to understand, use, and maintain

**Restive Plugin enables you to Become an Expert in Responsive + Adaptive Web Design in Minutes!**



## Requirements

- [jQuery](http://jquery.com/) (>= 1.7.1 is recommended)



## Versions

There are two versions of the Restive Plugin:

1. Basic Version: this is the version available here on Github
2. Pro Version: this is available exclusively via the [Restive Plugin Web Site](http://plugin.restive.io)

The Pro Version has some additional features like `Modularity` and `Breakpoint Analytics`. See the **[Restive Plugin Docs](http://docs.restive.io/plugin)** for more information.



## License

[Click here to view the License Agreement](/LICENSE.md) for the Basic Version of Restive Plugin.

Please note that Restive Plugin Basic is **FREE** (and always will be) for Non-Commercial and Personal Projects. If you plan to use Restive Plugin Basic in a Commercial Project, you will need to purchase a Basic Commercial License. Pay Once, Use Forever `#POUF`.

[![Buy Basic Commercial License](/img_button_plugin_buynow_pouf.png)](https://restive.dpdcart.com/cart/buy?product_id=72269&product_price_id=74835&quantity=1&gateway=creditcard)

Use Coupon Code **GITHUB-SAVE** to get 10% off Original License Price. Valid for first 500 users.

[Click here for more information on what is considered **Commercial**](/WHAT-IS-COMMERCIAL.md)



## Changelog

[Click here to view the Changelog](/CHANGELOG.md)



## Installation

Include script *after* the jQuery library:

```html
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/restive.min.js"></script>
```    



## Usage

The basic format for using Restive Plugin is as follows:

```html
<script>
    $(document).ready(function () {
        $('selector').restive(options);
    });
</script>
```

Let's try a basic example. Say we have designed a HTML5 Web site and we want to make it Responsive to a specific set of breakpoints: 240, 320, 480, 640, 960, 1024, and 1280. Our Restive Plugin Setup will look something like this:

```html
<script>
    $(document).ready(function () {
        $('body').restive({
			breakpoints: ['240', '320', '480', '640', '960', '1024', '1280'],
            classes: ['css-240', 'css-320', 'css-480', 'css-640', 'css-960', 'css-1024', 'css-1280']            
		});
    });
</script>
```

**So what does the above setup mean?!** Restive Plugin will actively monitor the viewport of any devices that visit your web site for the following declared breakpoint ranges: 0 to 240 pixels, 241 to 320 pixels, 321 to 480 pixels, 481 to 640 pixels, 641 to 960 pixels, 961 to 1024 pixels, and 1025 to 1280 pixels (Please note that these are `device pixels` by default and **NOT** `device-independent pixels`). If the viewport of the device is between 0 and 240 pixels wide, Restive Plugin will add the class `css-240` to the `<body>` tag; if the viewport is between 241 and 320 pixels wide, it will add the class `css-320`, and so on.

So if I have a `Google Nexus 4` (768 pixels wide by 1280 pixels high when in portrait orientation) and I visited a Web site with the above Restive Plugin configuration, the plugin would add the class `css-960` to the body tag, because the viewport of the device falls within 640 pixels and 960 pixels wide. You could then tweak your CSS file and add any required style rules required to customize your layout.

Please See the Blog Post Titled **'[Getting Started with Restive Plugin](http://blog.restive.io/posts/5852603/getting-started-with-restive-plugin)'** for a broader explanation of how the Restive Plugin can work for you in a real-life Web Design scenario.

**NOTE**: We strongly advise that you use either `html` or `body` as your preferred selector always.



## Known Limitations

- This plugin uses AmplifyJS Store functionality to store data in SessionStorage (by default and if available). If SessionStorage is not available, LocalStorage is used; And if Session Storage and LocalStorage are not available, it relies on AmplifyJS Store to make a suitable selection. As a result, behavior on very old browsers may be unpredictable.  



## Script Reference Warnings

Please be mindful to disable the following Javascript libraries from your Web pages before using Restive Plugin (i.e. if you have them enabled):

- [AmplifyJS Store](http://amplifyjs.com/api/store/)
- [JSON2.js](https://github.com/douglascrockford/JSON-js)
- [jquery-cookie](https://github.com/carhartl/jquery-cookie)
- [iOS-Orientation-Fix](https://github.com/PeterWooster/iOS-Orientationchange-Fix)

These libraries are already embedded within Restive Plugin.



## Credits

Restive will like to thank the following third-parties for script usage (and some inspiration):

- AppendTo - [AmplifyJS Store](http://amplifyjs.com/api/store/)
- <NAME> - [JSON2.js](https://github.com/douglascrockford/JSON-js)
- <NAME> - [PHPJS](https://github.com/kvz/phpjs)
- <NAME> - [JQuery Cookie](https://github.com/carhartl/jquery-cookie) 
- <NAME>, <NAME> - [iOS-OrientationChange-Fix](https://github.com/PeterWooster/iOS-Orientationchange-Fix)
- <NAME> - [Response.js](https://github.com/ryanve/response.js)



## API Reference

### Options

These are the options available within **Restive Plugin**. The default values are also listed.


#### breakpoints

An itemized list of dimensions that define a specific range within which an adaptive action should take place. Restive Plugin allows for 2 distinct types of breakpoints:

1. Pixel e.g. 320
2. Resolution e.g. nHD, SVGA, XGA, etc.

Breakpoints are defined as an array:

```javascript
//example
breakpoints: ['240', '320', '480', '640']
```

The above setting means that the plugin will monitor the viewport for the following width ranges: 0 to 240px, 241 to 320 pixels, 321 to 480 pixels, and 481 to 640 pixels. It will then apply classes (see next option) to the DOM based on which declared range the viewport width matches.

**NOTE**: Do not start from zero when defining breakpoints. Always start from the upper limit of the implied range. For example, if you specify `240` as the first item in the `breakpoints` option, the plugin will enable a range of 0 to 240; if 480 is the next item, the plugin will enable a range of 241 to 480 and so on.

**NOTE**: Do NOT use commas when defining breakpoints that are in the thousands e.g. never do '1,000'; do '1000' instead.

**NOTE**: Ensure that you define your breakpoints based on device pixels [and not css/device-independent pixels]. For example, if you want to match a device width of 720 pixels, use 720 even when you know the Device-Independent Pixel Width is 360. You can override this behavior by using the `force_dip` option.


#### classes

An itemized and corresponding list of CSS classes that will be set to the matched element defined in the Restive Plugin selector, in lock-step with the corresponding breakpoints.

Classes are defined as an array:

```javascript
//example
classes: ['240-c', '320-c', '480-c', '640-c']
```

The above setting will add the class `320-c` to the selected DOM element when the viewport is between 241 and 320 pixels (considering the `breakpoints` options defined earlier).

**NOTE**: The number of `classes` defined here must be identical to the number of breakpoint items defined in the `breakpoints` option.

**NOTE**: You can also add multiple classes to the matched element defined in the Restive Plugin selector. Simply space-separate your classes e.g. 'myclass1 myclass2' is valid


#### force_dip

This option provides an override capability that forces the `breakpoints` option to consider device-independent pixels instead of device pixels (which is the default behavior). Setting this option to true enables the override.

For example, say you have an `iPad 2` and an `iPad Air` (which has a `retina` display), and your Restive Plugin settings are as set up below:

```javascript
$('body').restive({
    breakpoints: ['768', '1280'],
    classes: ['768-c', '1280-c']
});
```

If a user uses the `iPad 2` to visit your web site (in portrait orientation), the class `768-c` will be added to the class attribute of the `<body>` tag. However, if the `iPad Air` is used, nothing gets added to the `<body>` tag because the iPad Air viewport width is 1536 pixels (i.e. considering device pixels). This is the default behavior for `breakpoints`.
{'fraction_non_alphanumeric': 0.08941512707971828, 'fraction_numerical': 0.03082576298867, 'mean_word_length': 4.316060770482908, 'pattern_counts': {'":': 0, '<': 37, '<?xml version=': 0, '>': 39, 'https://': 18, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4450840', 'n_tokens_mistral': 5969, 'n_tokens_neox': 5208, 'n_words': 2700}