PHPackages                             aklump/breakpointx - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. aklump/breakpointx

ActiveLibrary

aklump/breakpointx
==================

0.9.3(1y ago)0711[1 issues](https://github.com/aklump/breakpointX/issues)[1 PRs](https://github.com/aklump/breakpointX/pulls)BSD-3-ClauseJavaScriptPHP ^7.4 || ^8.0CI passing

Since Mar 29Pushed 3mo ago1 watchersCompare

[ Source](https://github.com/aklump/breakpointX)[ Packagist](https://packagist.org/packages/aklump/breakpointx)[ RSS](/packages/aklump-breakpointx/feed)WikiDiscussions master Synced 2mo ago

READMEChangelogDependencies (2)Versions (43)Used By (0)

Breakpoint X (Crossing)
=======================

[](#breakpoint-x-crossing)

[![Breakpoint X (Crossing)](images/breakpoint-x.jpg)](images/breakpoint-x.jpg)

Summary
-------

[](#summary)

Define responsive breakpoints, which can fire JS callbacks; optionally apply CSS classes to designated elements.

This zero-dependency project provides a means to define points along the horizontal axis of the window, breakpoints, which can fire JS callbacks when the width crosses those breakpoints. It provides a setting, which will apply CSS classes to designated elements. It provides a PHP class with a similar form, that can be useful if you're using, say, a CMS for coordinating breakpoints.

A breakpoint is defined as a single point along the horizontal axis. To the left lies a segment, and to the right of the highest value breakpoint lies the ray. To the right of all but the highest value breakpoint, likes a segment. See the section below *Breakpoint Theory*.

**Visit  for full documentation.**

Installation
------------

[](#installation)

Install using `yarn add @aklump/breakpointx` or `npm i @aklump/breakpointx`

Install with Composer
---------------------

[](#install-with-composer)

1. Require this package:

    ```
    composer require aklump/breakpointx:^0.9

    ```

Quick Start
-----------

[](#quick-start)

```
var bp = new BreakpointX([480, 768]);

```

[![Basic Usage](images/basic.png)](images/basic.png)

Get segment info using any point along the axis:

```
bp.getSegment(200);
bp.getSegment(480);
bp.getSegment(1000);

```

### Named Segments

[](#named-segments)

It can be helpful to name your segments:

```
var obj = new BreakpointX([480, 768], ['small', 'medium', 'large']);

```

[![Basic Usage](images/named.png)](images/named.png)

Then you can also retrieve segment info using a name, which includes items such as the width, from point, to point, media query, image width, name, and more.

[![segment dump](images/console.jpg)](images/console.jpg)

```
bp.getSegment(300);
bp.getSegment('small');

var name = bp.getSegment('small').name;
var query = bp.getSegment('small')['@media'];
var imageWidth = bp.getSegment(300).imageWidth;

```

CSS Classes
-----------

[](#css-classes)

To cause CSS classes to be written on an element, pass the appropriate settings, where `addClassesTo` is a DOM object. It becomes a property of the instance as `.el`, so it can be accessed in callbacks, if necessary. The example shows adding classes to the `html` element. If you're using jQuery you could do `addClassesTo: $('html').get(0)`.

```
// Breakpoints only with settings.
var obj = new BreakpointX([768], ['mobile', 'desktop'], {
  addClassesTo: document.documentElement,
  classPrefix: 'bpx-',
});

```

The element will look like this when the browser gets larger and crosses 768px.

```

```

Or when crossing 768px getting smaller.

```

```

Callbacks When Breakpoints Are Crossed
--------------------------------------

[](#callbacks-when-breakpoints-are-crossed)

When the window width changes, and a breakpoint is hit or crossed, callbacks can be registered to fire as a result. `this` points to the BreakpointX instance.

```
// When the window crosses any breakpoint in either direction
bp.addCrossAction(function(segment, direction, breakpoint, previousSegment) {
  ... do something in response.
});

// When the window crosses 768 in either direction
bp.addBreakpointCrossAction(function(segment, direction, breakpoint, previousSegment) {
  ... do something in response.
});

// When the window crosses 768 getting smaller
bp.addBreakpointCrossSmallerAction(768, function (segment, direction, breakpoint, previousSegment) {
  ... do something in response.
});

// When the window crosses 768 getting bigger
bp.addBreakpointCrossBiggerAction(768, function (segment, direction, breakpoint, previousSegment) {
  ... do something in response.
});

```

In Terms of Devices
-------------------

[](#in-terms-of-devices)

Here is an example which demonstrates how you might construct an instance when thinking in terms of physical devices. It's given in PHP, however the JS methods are exactly the same.

[![Device-centric appproach](images/devices.png)](images/devices.png)

```