# dock-n-liquid
> Liquid alignment for border-box element
Latest version **0.5.3** (published 2018-04-28) · MIT license · 0 weekly downloads
## Install
```sh
npm install dock-n-liquid
pnpm add dock-n-liquid
yarn add dock-n-liquid
bun add dock-n-liquid
```
## 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.5.3 |
| Published | 2018-04-28 |
| First published | 2017-04-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 118.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | vzg03566@gmail.com |
| Maintainers | vzg03566 |
| Keywords | Liquid, border-box, box-sizing |
## Links
- npm: https://www.npmjs.com/package/dock-n-liquid
- Repository: https://github.com/takamin/dock-n-liquid
- Homepage: https://github.com/takamin/dock-n-liquid#readme
- Issues: https://github.com/takamin/dock-n-liquid/issues
- npm.io page: https://npm.io/package/dock-n-liquid
## Dependencies (3)
- [b-box](https://npm.io/package/b-box.md) ^0.1.1
- [fullscrn](https://npm.io/package/fullscrn.md) ^1.3.1
- [rough-name](https://npm.io/package/rough-name.md) ^1.0.0
## Alternatives
- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads
## Recent versions
- 0.5.3 (latest) — 2018-04-28
- 0.5.2 — 2017-07-10
- 0.5.1 — 2017-06-08
- 0.5.0 — 2017-06-07
- 0.4.0 — 2017-06-06
- 0.3.1 — 2017-05-04
- 0.3.0 — 2017-04-30
- 0.2.0 — 2017-04-29
- 0.1.3 — 2017-04-18
- 0.1.2 — 2017-04-17
- 0.1.1 — 2017-04-10
- 0.1.0 — 2017-04-09
## README
DOCK'n'LIQUID - npm `dock-n-liquid`
===================================
This module helps the liquid designing.
It aligns the child elements to dock to its parent recursively.
APIs
----
### CLASS
* `dock_n_liquid` - enables a simple liquid layout.
The instance references a single html element which is the root of docking structure.
The static method 'select' creates and returns an instance of this class.
### STATIC METHOD
* __`dock_n_liquid.init()`__ - initializes all `dock` classed elements as a `dock_n_liquid` panel.
Those will be aligned the layouts in automatic.
* `dock_n_liquid.select(element)` - selects a html element and returns `dock_n_liquid` instance.
* `dock_n_liquid.requestFullscreen(element)` - requests to be a fullscreen mode.
* `dock_n_liquid.exitFullscreen()` - exits from the fullscreen mode.
* `dock_n_liquid.detach()` - detaches the element from its layout tree.
* `dock_n_liquid.attach()` - re-attaches the element to its layout tree.
### INSTANCE METHOD
* `dock_n_liquid.show(state)` - shows or hides the panel.
AVAILABLE CLASS NAME for HTML ELEMENT
-------------------------------------
* `dock` - declares the element is the panel.
* `top` - declares the element docks to the top of the parent element. the `height` style or attribute must be specified.
* `left` - docks to the left. `width` must be specified.
* `right` - to the right. `width` must be specified.
* `bottom` - to the bottom. `height` required.
* `resizable` - The panel could be resized by dragging a handle generated on its edge.
After the completion of resizing, a `window.resize` event will be dispatched.
EXAMPLE
-------
Sorry, too long code....
```html
Docking to the top
menu#1
menu#2
menu#3
menu#4
menu#5
content#1
content#2
content#3
content#4
content#5
The Content that occupies the rest of client area.
MIT LICENSE
```
LICENSE
-------
This software is released under the MIT License, see [LICENSE](LICENSE)
---
_Source: https://npm.io/package/dock-n-liquid · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._