# breaky

> Breaky JavaScript Plugin

Latest version **0.1.7** (published 2022-07-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install breaky
pnpm add breaky
yarn add breaky
bun add breaky
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.7 |
| Published | 2022-07-26 |
| First published | 2016-08-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 12.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 26 |
| Author | Qrious |
| Maintainers | tlatenchi, mauricengo |
| Keywords | css, breakpoints, responsive, js, media-queries |

## Links

- npm: https://www.npmjs.com/package/breaky
- Repository: https://github.com/qriousagency/breaky
- Homepage: https://github.com/qriousagency/breaky#readme
- Issues: https://github.com/qriousagency/breaky/issues
- npm.io page: https://npm.io/package/breaky

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 0.1.7 (latest) — 2022-07-26
- 0.1.6 — 2022-07-26
- 0.1.5 — 2018-03-10
- 0.1.4 — 2016-08-26
- 0.1.3 — 2016-08-26
- 0.1.2 — 2016-08-13
- 0.1.1 — 2016-08-13

## README

# BREAKY.JS

**A javascript plug-in for detecting/syncing CSS media-queries**

Lightweight and easy-to-use plugin for Javascript media-queries detection. Includes automated functions
management to assign functions to specific breakpoints.

Original Documentation: [http://qrious.com/breaky/](http://qrious.com/breaky/)

DOWNLOAD FROM NPM
----
```
npm install breaky --save
```


SET-UP
----
**Incude:** breaky.js
```js
<script href="breaky.js"></script>
```
**CSS:** Use the pseudo-element :before and property content on the HTML to list the breakpoints for Breaky to detect. Each breakpoints' name must be separated by commas and in order from smallest to largest viewport. Name it anything and set as many breakpoints as you want.
```css
html:before {
	content: "mobile,tablet,desktop";
	display: none;
}
```
Use the pseudo-element :before and property content on the BODY set media-queries for Breaky to detect. It should follow the same naming convention as the list set in the HTML.

```css
body:before {
	content: "mobile";
	display: none; 
}
@media (min-width: 320px) {
	body:before {
		content: "mobile";
	}
}
@media (min-width: 768px) {
	body:before {
		content: "tablet";
	}
}
@media (min-width: 960px) {
	body:before {
		content: "desktop";
	}
}
```

ASSIGNING FUNCTIONS TO BREAKPOINTS
----
**JS:** There are four Breaky methods to utilize when assigning functions to one or a series of breakpoints: at, above, below, and between.

Assign a function to one breakpoint: **at()**
```js
breaky.at("mobile", function() {
    // custom logic
});
```

Assign a function to and above a breakpoint: **above()**
```js
breaky.above("mobile", function() {
    // custom logic
});
```

Assign a function to and below a breakpoint: **below()**
```js
breaky.below("desktop", function() {
    // custom logic
});
```

Assign a function between breakpoints: **between()**
```js
breaky.between("mobile", "tablet", function() {
    // custom logic
});
```

---
_Source: https://npm.io/package/breaky · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._