# yl-response

> A front end smoothing response solution based on REM.

Latest version **1.3.0** (published 2019-03-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install yl-response
pnpm add yl-response
yarn add yl-response
bun add yl-response
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.0 |
| Published | 2019-03-01 |
| First published | 2018-11-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 23.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | yuri2 |
| Maintainers | yuri2 |
| Keywords | yuri2, response, rem |

## Links

- npm: https://www.npmjs.com/package/yl-response
- Repository: https://github.com/yuri2peter/yl-response
- Homepage: https://github.com/yuri2peter/yl-response#readme
- Issues: https://github.com/yuri2peter/yl-response/issues
- npm.io page: https://npm.io/package/yl-response

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 1.3.0 (latest) — 2019-03-01
- 1.2.3 — 2019-03-01
- 1.2.2 — 2019-03-01
- 1.2.1 — 2019-03-01
- 1.2.0 — 2019-03-01
- 1.1.0 — 2019-03-01
- 1.0.0 — 2018-11-21

## README

# yl-response

A front end smoothing response solution based on REM(font size of the root element).

# Features

- Set up  with some check points, then gets a smooth curve map from screen width to REM value.
- Real time display of change trend is the current stage.
- Automatically set the REM value and the class names of DOM HTML to replace the media queries.

### Before
```css
@media screen and (max-width:480px){
  html {  font-size: 12px;  }
  .box {  /* specific style code */  }
}
@media screen and (min-width:600px) and (max-width:900px){
  html {  font-size: 24px;  }
  .box {  /* specific style code */  }
}
```

### After
```css
html.xs .box {  /* specific style code */  }
html.sm .box {  /* specific style code */  }
html.md .box {  /* specific style code */  }
```

### Most Important Things

REM in different media query interval is discrete, which may cause style mutation.

Using this tool, we can ensure that this change is smooth.

> We use the Bessel curve to do this job, refer to `transition-timing-function in css3`.

# Import

### Webpack
`npm i yl-response`
```javascript
const ylResponse = require('yl-response');
```
### Html
```html
<script src="./lib/index.js"></script>
<script>
  var ylResponse = window.ylResponse;
</script>
```

# How to Use

```javascript
const watcher = ylResponse([
  'xs',
  [768, 40],
  'sm',
  [992, 70],
  'md',
  [1440, 100],
  'lg',
  [1920, 150],
  'xl',
], {
  monitor: true,
  watch: true,
  onChange: console.log,
  watchDebounce: 10,
});
```

# DEMO

See `/test/index.html`.

# API

### ylResponsive(params, options)

@param params { Array }

Arrays describing response intervals.
For example:
```javascript
[
  'sm', // When the screen width is less than 900px, stage is 'sm'.
  [960, 40], // When the screen width is 900px, rem is 40px.
  'md', // Stage 'md' when the screen width is between 960px and 1440px.
  [1440, 70], // When the screen width is 1440px, rem is 70px.
  'lg', // Stage name also will be the class name of DOM html.
  [1920, 100], // Another check point.
  'xl', // When the screen width is greater than 900px, stage is 'xl'.
]
```

### @param options { object }

|   Key   |   Description   |   Default Value   |
| ---- | ---- | ---- |
|   monitor   |   Enable monitor. Show the change curve and the current stage. Pretty useful at the development stage. |   false   |
|   watch   |   Enable monitoring of screen size changes. If false, you need to monitor by yourself(use `watcher`).   |   false   |
|   watchDebounce   |   debounce idle of `watch`(unit: ms).   |   20   |
|   onChange   |   callback when screen size changed   |   -   |
|   bodyFontSize   |   set body font size   |   '16px'   |

### @return function watcher

You should monitor screen size changes by it.

```javascript
  window.onresize = () => {
    console.log(watcher())
  }
  /* Logs looks like:
  {
    rem: 60.23, // current rem (px)
    width: 1200, // current screen width (px)
    part: {
      color: "rgb(82,148,133)",
      cps: (4) [{…}, {…}, {…}, {…}],
      stage: "md" // current stage name
    }
  }
  */
```

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