# soap-rem

> A library to calculate and set rem automatically.

Latest version **0.0.6** (published 2017-04-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install soap-rem
pnpm add soap-rem
yarn add soap-rem
bun add soap-rem
```

## 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.0.6 |
| Published | 2017-04-07 |
| First published | 2016-10-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Louis Chao |
| Maintainers | madsoap |

## Links

- npm: https://www.npmjs.com/package/soap-rem
- npm.io page: https://npm.io/package/soap-rem

## Recent versions

- 0.0.6 (latest) — 2017-04-07
- 0.0.4 — 2017-03-30
- 0.0.3 — 2017-02-23
- 0.0.2 — 2017-02-23
- 0.0.1 — 2016-10-21

## README

# soap-rem
> A js library to dynamically reset rem as the viewport width changing.

## Installation
``` bash
npm install soap-rem --save-dev
```

## Concepts
* **rem**: The font-size value of the root element, used as a unit in web document. 
* **Drawing Width**: The width of the drawing that designer gave you.
* **hwr**: The ratio of viewport-height to viewport-width.

## Usage
Import the package and it will calculate and set rem automatically. The default drawing width is 750px.

``` js
// In ES6 way:
import REM from 'soap-rem'; 
// Or in CommonJS way:
const REM = require('soap-rem');
```

If the width of your drawing is not 750px but, for example, 720px, just do as follows:

``` js
import REM from 'soap-rem';
REM.setDrawingWidth( 720 );
```

## API
### REM.setDrawingWidth(width)
Pass the width of your design drawing in, and the lib will calculate and set the proper rem value for you.

### REM.getRem()
Get the current value of rem.

### REM.getViewportWidth()
Get the width of viewport.

### REM.getViewportHeight()
Get the height of viewport.

### REM.getValues()

### REM.addAfterHook(fn)
Register a hook that will be executed after each setting of rem.

> **rem_full_width** is a special class name defined by this library. The height of any element with this class name will be automatically set to viewport-height. 

## License
MIT

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