package.json

{
  "name": "@storyous/responsive-bootstrap-toolkit",
  "description": "Responsive Bootstrap Toolkit",
  "version": "2.6.0",
  "devDependencies": {},
  "repository": "https://github.com/Storyous/responsive-bootstrap-toolkit",
  "readme": "# Responsive Bootstrap Toolkit\r\n\r\nResponsive Bootstrap Toolkit provides an easy way of breakpoint detection in JavaScript, detecting changes in currently active breakpoint, as well as executing any breakpoint-specific JavaScript code. Despite the name, you can use it also with Foundation, or any other framework.\r\n\r\nCurrent version: **2.5.1**\r\n\r\n### Documentation\r\n* [Installation](#installation)\r\n* [Demo](#demo)\r\n* [Basic usage](#basic-usage)\r\n* [Execute code on window resize](#execute-code-on-window-resize)\r\n* [Get alias of current breakpoint](#get-alias-of-current-breakpoint)\r\n* [Using with Foundation](#using-with-foundation)\r\n* [Providing your own visibility classes](#providing-your-own-visibility-classes)\r\n\r\n### HOW-TO\r\n* [How do I include it in my project?](#how-do-i-include-it-in-my-project)\r\n* [Migrating from an older version](#migrating-from-an-older-version)\r\n* [Dependencies](#dependencies)\r\n\r\n### Installation\r\n````\r\nbower install responsive-toolkit\r\n````\r\n\r\n### Demo\r\n\r\nLive example available on [CodePen](http://codepen.io/dih/full/ivECj). Hosted along with repository are the following usage examples:\r\n* [Bootstrap demo](https://github.com/maciej-gurban/responsive-bootstrap-toolkit/tree/master/demos/bootstrap)\r\n* [Foundation demo](https://github.com/maciej-gurban/responsive-bootstrap-toolkit/tree/master/demos/foundation)\r\n* [Custom breakpoints demo](https://github.com/maciej-gurban/responsive-bootstrap-toolkit/tree/master/demos/custom)\r\n\r\n\r\n#### Basic usage:\r\n\r\n````javascript\r\n// Wrap IIFE around your code\r\n(function($, viewport){\r\n    $(document).ready(function() {\r\n\r\n        // Executes only in XS breakpoint\r\n        if(viewport.is('xs')) {\r\n            // ...\r\n        }\r\n\r\n        // Executes in SM, MD and LG breakpoints\r\n        if(viewport.is('>=sm')) {\r\n            // ...\r\n        }\r\n\r\n        // Executes in XS and SM breakpoints\r\n        if(viewport.is('<md')) {\r\n            // ...\r\n        }\r\n\r\n        // Execute code each time window size changes\r\n        $(window).resize(\r\n            viewport.changed(function() {\r\n                if(viewport.is('xs')) {\r\n                    // ...\r\n                }\r\n            })\r\n        );\r\n    });\r\n})(jQuery, ResponsiveBootstrapToolkit);\r\n````\r\n\r\n#### Execute code on window resize\r\nAllows using custom debounce interval. The default one is set at 300ms.\r\n\r\n````javascript\r\n$(window).resize(\r\n    viewport.changed(function() {\r\n\r\n      // ...\r\n\r\n    }, 150)\r\n);\r\n````\r\n\r\n#### Get alias of current breakpoint\r\n````javascript\r\n$(window).resize(\r\n    viewport.changed(function() {\r\n        console.log('Current breakpoint: ', viewport.current());\r\n    })\r\n);\r\n````\r\n\r\n#### Using with Foundation\r\n\r\nInstead of Bootstrap's aliases `xs`, `sm`, `md` and `lg`, Foundation uses: `small`, `medium`, `large`, and `xlarge`.\r\n\r\n````javascript\r\n(function($, viewport){\r\n\r\n    viewport.use('Foundation');\r\n\r\n    if(viewport.is('small')) {\r\n        // ...\r\n    }\r\n\r\n})(jQuery, ResponsiveBootstrapToolkit);\r\n````\r\n\r\n**Note:**\r\nCurrently, only Foundation 5 visibility classes are supported. If you'd like to support older version of any framework, or provide your own visibility classes, refer to example below.\r\n\r\n#### Providing your own visibility classes\r\n\r\n````javascript\r\n(function($, viewport){\r\n\r\n    var visibilityDivs = {\r\n        'alias-1': $('<div class=\"device-alias-1 your-visibility-class-1\"></div>'),\r\n        'alias-2': $('<div class=\"device-alias-2 your-visibility-class-2\"></div>'),\r\n        'alias-3': $('<div class=\"device-alias-3 your-visibility-class-3\"></div>')\r\n    };\r\n\r\n    viewport.use('Custom', visibilityDivs);\r\n\r\n    if(viewport.is('alias-1')) {\r\n        // ...\r\n    }\r\n\r\n})(jQuery, ResponsiveBootstrapToolkit);\r\n````\r\n\r\n**Note**:\r\nIt's up to you to create media queries that will toggle div's visibility across different screen resolutions. How? [Refer to this example](https://github.com/maciej-gurban/responsive-bootstrap-toolkit/blob/master/demos/custom/style.css).\r\n\r\n#### How do I include it in my project?\r\n\r\nPaste just before `</body>`\r\n\r\n````html\r\n<!-- Responsive Bootstrap Toolkit -->\r\n<script src=\"js/bootstrap-toolkit.min.js\"></script>\r\n<!-- Your scripts using Responsive Bootstrap Toolkit -->\r\n<script src=\"js/main.js\"></script>\r\n````\r\n\r\n### Migrating from an older version\r\n\r\nRefer to the [changelog](https://github.com/maciej-gurban/responsive-bootstrap-toolkit/blob/master/CHANGELOG.md) for a list of changes in each version of the library.\r\n\r\n#### Dependencies:\r\n* jQuery\r\n* Bootstrap's responsive utility css classes (included in its standard stylesheet package)\r\n",
  "readmeFilename": "README.md",
  "_id": "bootstrap-js-breakpoints@0.1.0",
  "_shasum": "3d3bd6d8a669c6904fd4572a32e078a5cf2e9408",
  "_from": "git://github.com/vojtesaak/responsive-bootstrap-toolkit.git#master",
  "_resolved": "git://github.com/vojtesaak/responsive-bootstrap-toolkit.git#9e9174dfe2cca963ee2fd372f7da3ece3dc2bdb6"
}