# @lbzg/vue-div
> Vue.js component for responsive and declarative css templating.
Latest version **2.0.10** (published 2020-01-10) · ISC license · 0 weekly downloads
> **Deprecated.** This package is deprecated.
## Install
```sh
npm install @lbzg/vue-div
pnpm add @lbzg/vue-div
yarn add @lbzg/vue-div
bun add @lbzg/vue-div
```
## Health
**Score 10/100 (F)** — status: deprecated.
Negative: deprecated.
## Facts
| | |
|---|---|
| Version | 2.0.10 |
| Published | 2020-01-10 |
| First published | 2019-04-12 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 215.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | lbzg |
| Maintainers | lbzg |
## Links
- npm: https://www.npmjs.com/package/@lbzg/vue-div
- Repository: https://github.com/lbzg/vue-div
- Issues: https://github.com/lbzg/vue-div/issues
- npm.io page: https://npm.io/package/@lbzg/vue-div
## Recent versions
- 2.0.10 (latest) — 2020-01-10
- 2.0.9 — 2020-01-10
- 2.0.8 — 2020-01-10
- 2.0.7 — 2020-01-07
- 2.0.6 — 2020-01-02
- 2.0.5 — 2020-01-02
- 2.0.4 — 2019-12-29
- 2.0.3 — 2019-12-28
- 2.0.2 — 2019-12-28
- 2.0.1 — 2019-12-26
- 2.0.0 — 2019-12-26
- 1.1.3 — 2019-10-10
- 1.1.2 — 2019-10-09
- 1.1.1 — 2019-10-09
- 1.1.0 — 2019-10-09
- … 28 more at https://npm.io/package/@lbzg/vue-div/versions
## README
# vue-div
Vue.js component for responsive and declarative css templating.
Partially based on uikit.
## Introduction
**Vue div** component comes equipped with multiple properties for managing styles on a webpage. It can be used for applying a wide range of styles; from managing basics such as texts and backgrounds, to creating layouts and controlling styles through different states.
Example:
```sh
Sample text
```
## Installation
```sh
npm i @lbzg/vue-div
```
```sh
import vdiv from '@lbzg/vue-div'
Vue.component('vdiv', vdiv())
# vdiv accepts optional configuration parameter
```
## Properties
| property | style | values | default | description |
| -------------- | --------------------- | ----------------------------------------------- | ------- | ------------------------ |
| **bg** | background-color | `colors` | - | - |
| **border** | border-width | `sizes` | xsmall | - |
| ... | border-style | none, hidden, dotted, solid, dashed | solid | - |
| ... | border-color | `colors` | - | - |
| **color** | color | `colors` | - | text color |
| **text** | font-size | `sizes`, title-`sizes` | - | - |
| ... | line-height | `sizes`, title-`sizes` | - | - |
| ... | font-weight | thin, light, normal, bold, black | - | - |
| ... | font-style | italic, no-style | - | - |
| ... | text-transform | capitalize, uppercase, lowercase, no-transform | - | - |
| **fillet** | border-radius | `sizes` | small | - |
| **inline** | display | - | inline | _display: inline_ |
| **line** | text-decoration-line | none, under, over, through | under | - |
| ... | text-decoration-color | `colors` | - | - |
| ... | text-decoration-style | none, solid, double, dotted, dashed | solid | - |
| **overflow** | overflow | visible, hidden, scroll, auto | - | - |
| **wrap** | overflow-wrap | break-word, anywhere, normal | - | - |
| **transition** | transition-property | _css properties_ | bg | applies 0.2s ease-in-out |
| **container** | _(classes)_ | default, xsmall, small, large, expand | default | - |
| **flex** | _(classes)_ | default, inline | default | - |
| ... | - | stretch, top, mid, bot | stretch | vertical align |
| ... | - | left, center, right, between, around + `@mods` | left | horizontal align |
| ... | - | first, last + `@mods` | - | item position |
| ... | - | column, column-reverse, row, row-reverse | row | direction |
| ... | - | wrap, wrap-reverse, nowrap | nowrap | wrap behavior |
| ... | - | wrap-stretch/between/around/top/mid/bot | - | wrap modifiers |
| ... | - | none, auto, 1 | auto | item dimensions |
| **grid** | _(classes)_ | default, small, medium, large, collapse | default | gap size |
| ... | - | column-small/medium/large/collapse | - | column gap |
| ... | - | row-small/medium/large/collapse | - | row gap |
| ... | - | divide | - | add dividers |
| ... | - | match | - | match heights |
| ... | - | masonry | - | no gap if diff. heights |
| **height** | _(classes)_ | 1-1, viewport | - | - |
| ... | - | none, 0, 1px, 2px, 5px, small, medium, large | - | - |
| ... | - | max-small, max-medium, max-large | - | - |
| **width** | _(classes)_ | 1-1 to 1-6 _and everything between_ + `@mods` | - | - |
| ... | - | auto, expand + `@mods` | - | - |
| ... | - | small, medium, large, xlarge, xxlarge + `@mods` | - | - |
| **childwidth** | _(classes)_ | _same as width_ | - | affects child elements |
| **margin** | _(classes)_ | default, small, medium, large, xlarge | default | margin size |
| ... | - | top, bot, left, right | - | margin direction |
| ... | - | small/medium/large/xlarge-top/bot/left/right | - | margin size-direction |
| ... | - | remove(-top/bot/vertical/adjecent) | - | margin remove |
| ... | - | remove-left/right + `@mods` | - | - |
| ... | - | remove-first-child, remove-last-child | - | - |
| ... | - | auto, auto-left, auto-right + `@mods` | - | auto margin (/align) |
| ... | - | auto-top, auto-bot, auto-vertical | - | - |
| **padding** | _(classes)_ | default, small, medium, large, remove | default | padding size |
| ... | - | remove-top/bot/left/right/vertical/horizontal | - | remove direction |
| **visibility** | _(classes)_ | hide + `@mods` | - | removes el from document |
| ... | - | invisible | - | makes el invisible |
| ... | - | visible`@mods` | - | - |
| ... | - | hide-touch, hide-notouch | - | - |
| ... | - | toggle-hover _(enables hide/invisible-hover)_ | - | apply to parent |
| ... | - | hide-hover, invisible-hover | - | apply to child |
`sizes`: xsmall, small, medium, large, xlarge
`@mods`: @s, @m, @l, @xl
`colors`: white, black, light, dark, muted, primary, secondary, tertiary, success, warning, danger
Props with default values can be applied without explicitly setting a value. Example:
```sh
...
```
---
## States
| property | values | description |
| ------------ | --------------------- | ------------------------------------------------------------------- |
| **disabled** | boolean | activates disabled modifiers |
| **pending** | boolean | activates pending modifiers |
| **fail** | boolean | activates fail modifiers |
| **success** | boolean | activates success modifiers |
| **active** | boolean | activates active modifiers |
| **actions** | click, hover (string) | enables click and hover modifiers / **required for @click to work** |
**Priorities:** disabled > pending > fail > success > active > click > hover (> default)
`Disabled` and `pending` states **do not allow any other states** except default state to coexist.
**Other states can coexist** (when applied to different css styles of same property).
Single and multi value syntax: **state:value** _or_ **state[value value2 value3]**
(Overblown) example:
```sh
Sample text
```
## Screen modifiers
Breakpoints:
@s - 640px and up
@m - 960px and up
@l - 1200px and up
@xl - 1600px and up
## Configuration
Color palette is configurable. Accepts any valid css colors (hex, rgb/a, hsl/a, name...).
Example: add 'red' color and override 'primary' and 'secondary' color.
```sh
Vue.component('vdiv', vdiv({
red: 'red',
primary: '#af20d2',
secondary: 'rgba(255,0,0,0.3)',
}))
```
Default color palette:
```sh
light: '#f2f2f2',
dark: '#2f2f2f',
muted: '#e0e0e0',
primary: '#1e87f0',
secondary: '#dee5e5',
tertiary: '#9dc5bb',
success: '#32d296',
warning: '#faa05a',
danger: '#f0506e',
black: '#000',
white: '#fff',
gray: '#777',
grey: '#777',
```
---
_Source: https://npm.io/package/@lbzg/vue-div · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._