@lbzg/vue-div

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:

<vdiv text="xlarge hover:bold" actions="hover">Sample text</vdiv>

Installation

npm i @lbzg/vue-div

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:

<vdiv container margin padding inline flex grid>...</vdiv>

---

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:

<vdiv
  actions="click hover" # enable click and hover mods
  text="xlarge click:bold"
  line="hover:under active:through"
  width="1-1 1-2@l active[1-1 1-4@l]"
  border="xsmall success:success fail:danger"
  :active="var" # bind to variable
  :success="var" # ...
  :fail="var" # ...
  @click="method"
>
  Sample text
</vdiv>

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.

Vue.component('vdiv', vdiv({
  red: 'red',
  primary: '#af20d2',
  secondary: 'rgba(255,0,0,0.3)',
}))

Default color palette:

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',