https://github.com/maciej-gurban/responsive-bootstrap-toolkit
Responsive Bootstrap Toolkit allows for easy breakpoint detection in JavaScript
https://github.com/maciej-gurban/responsive-bootstrap-toolkit
breakpoint javascript responsive responsive-layout
Last synced: about 1 year ago
JSON representation
Responsive Bootstrap Toolkit allows for easy breakpoint detection in JavaScript
- Host: GitHub
- URL: https://github.com/maciej-gurban/responsive-bootstrap-toolkit
- Owner: maciej-gurban
- License: mit
- Created: 2014-06-04T11:48:12.000Z (about 12 years ago)
- Default Branch: master
- Last Pushed: 2022-04-29T09:39:45.000Z (about 4 years ago)
- Last Synced: 2025-05-05T05:36:46.915Z (about 1 year ago)
- Topics: breakpoint, javascript, responsive, responsive-layout
- Language: HTML
- Size: 75.2 KB
- Stars: 363
- Watchers: 18
- Forks: 88
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Responsive Bootstrap Toolkit
Responsive 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.
Current version: **2.6.3**
### Documentation
* [Installation](#installation)
* [Demo](#demo)
* [Basic usage](#basic-usage)
* [Execute code on window resize](#execute-code-on-window-resize)
* [Get alias of current breakpoint](#get-alias-of-current-breakpoint)
* [Using with Foundation](#using-with-foundation)
* [Providing your own visibility classes](#providing-your-own-visibility-classes)
### HOW-TO
* [How do I include it in my project?](#how-do-i-include-it-in-my-project)
* [Migrating from an older version](#migrating-from-an-older-version)
* [Dependencies](#dependencies)
### Installation
Using Bower:
````
bower install responsive-toolkit
````
Using NPM:
````
npm install responsive-toolkit
````
### Demo
Live example available on [CodePen](http://codepen.io/dih/full/ivECj). Hosted along with repository are the following usage examples:
* [Bootstrap demo](https://github.com/maciej-gurban/responsive-bootstrap-toolkit/tree/master/demos/bootstrap)
* [Foundation demo](https://github.com/maciej-gurban/responsive-bootstrap-toolkit/tree/master/demos/foundation)
* [Custom breakpoints demo](https://github.com/maciej-gurban/responsive-bootstrap-toolkit/tree/master/demos/custom)
#### Basic usage:
````javascript
// Wrap IIFE around your code
(function($, viewport){
$(document).ready(function() {
// Executes only in XS breakpoint
if(viewport.is('xs')) {
// ...
}
// Executes in SM, MD and LG breakpoints
if(viewport.is('>=sm')) {
// ...
}
// Executes in XS and SM breakpoints
if(viewport.is(''),
'alias-2': $('
'),
'alias-3': $('')
};
viewport.use('Custom', visibilityDivs);
if(viewport.is('alias-1')) {
// ...
}
})(jQuery, ResponsiveBootstrapToolkit);
````
**Note**:
It'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).
#### How do I include it in my project?
Paste just before `