Skip to content

Commit

Permalink
Pushed version
Browse files Browse the repository at this point in the history
  • Loading branch information
davidmenger committed Dec 14, 2015
1 parent 634c9f8 commit c2421b7
Showing 1 changed file with 1 addition and 2 deletions.
3 changes: 1 addition & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
{
"name": "responsive-bootstrap-toolkit",
"description": "Responsive Bootstrap Toolkit",
"version": "0.1.1",
"version": "2.5.2",
"devDependencies": {

},
"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",
"gitHead": "9e9174dfe2cca963ee2fd372f7da3ece3dc2bdb6",
"_id": "[email protected]",
"_shasum": "3d3bd6d8a669c6904fd4572a32e078a5cf2e9408",
"_from": "git://github.com/vojtesaak/responsive-bootstrap-toolkit.git#master",
Expand Down

0 comments on commit c2421b7

Please sign in to comment.