https://github.com/vxsx/bootstrap-breakpoints

Tiny script to easily check what the current bootstrap breakpoint is
https://github.com/vxsx/bootstrap-breakpoints

bootstrap breakpoint breakpoints javascript

Last synced: about 3 hours ago
JSON representation

Tiny script to easily check what the current bootstrap breakpoint is

• Host: GitHub
• URL: https://github.com/vxsx/bootstrap-breakpoints
• Owner: vxsx
• License: mit
• Created: 2014-12-27T07:48:14.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2016-12-15T16:53:51.000Z (almost 8 years ago)
• Last Synced: 2024-11-10T15:51:22.349Z (9 days ago)
• Topics: bootstrap, breakpoint, breakpoints, javascript
• Language: JavaScript
• Homepage: http://vxsx.github.io/bootstrap-breakpoints/
• Size: 274 KB
• Stars: 10
• Watchers: 2
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
Boostrap Breakpoints

====================

[![Build Status](https://travis-ci.org/vxsx/bootstrap-breakpoints.svg?branch=master)](https://travis-ci.org/vxsx/bootstrap-breakpoints)

[![Code Climate](https://codeclimate.com/github/vxsx/bootstrap-breakpoints/badges/gpa.svg)](https://codeclimate.com/github/vxsx/bootstrap-breakpoints)

[![Test Coverage](https://codeclimate.com/github/vxsx/bootstrap-breakpoints/badges/coverage.svg)](https://codeclimate.com/github/vxsx/bootstrap-breakpoints)

Tiny script to enable easier checks for current responsive breakpoint. Assumes you are using bootstrap, but can potentially work with other custom breakpoints.

## Usage

Put the script somewhere in the html as you usually do.

For now the script depends on jQuery and works in IE9+.

```js

Breakpoint.init();

if (Breakpoint.is('xs')) {

    //do mobile stuff

}

if (Breakpoint.is('sm')) {

    //do tablet stuff

}

$(window).on('change:breakpoint', function (e, current, previous) {

    console.log('previous breakpoint was', previous);

    console.log('current breakpoint is', current);

});

//etc

```

If you need to customize breakpoint values, you do

```

Breakpoint.init({

    xs: {

        min: 0,

        max: 499

    },

    sm: {

        min: 500,

        max: 1000

    }

    //etc

});

```

## How it works

On init script registers an event handler on window resize where it just checks window.width 

and if correct breakpoint is found it sets the value internally as well as triggering 'change:breakpoint' event

on window.  You may want to throttle the event handler, but it's not yet possible without modifying source code. Also, keep in mind that it is assumed that breakpoints you provide are mutually exclusive, otherwise detected current breakpoint may be not the one you expect.

## API

### `.is(breakpoint)`

Returns true if passed value is a correct breakpoint.

### `.current()`

Returns string representing current breakpoint (xs, sm, etc).

### `.getBreakpoints()`

Get all the breakpoints values.

### `.init(breakpoints)`

Initializes the script. Without calling this first - won't work.

### `.destroy()`

Removes resize watcher.

## Demo

[http://vxsx.github.io/bootstrap-breakpoints/](http://vxsx.github.io/bootstrap-breakpoints/)

## Contributing

Make PR, write your stuff, don't forget tests.