@jporto/vue-flex-layout NPM

@jporto/vue-flex-layout

logo

A VueJS flexbox partitionable layout

Checkout the Demo which contains the component documentation.

If you enjoy this component, feel free to drop me feedback, either via the repository, or via joseporto@icloud.com.
Also, please verify my project at torre.co.

Instalation

yarn add @jporto/vue-flex-layout

npm install @jporto/vue-flex-layout

Setup

Vue.js

Add the following to you application main.js file:

import VueFlexLayout from '@jporto/vue-flex-layout'

Vue.use(VueFlexLayout)

import the styles

@import '@jporto/vue-flex-layout/dist/@jporto/main.scss';

NuxtJS

Similar as with Vue.js, but I recomend adding a components.js file to plugins, with the following content:

import Vue from 'vue'
import VueFlexLayout from '@jporto/vue-flex-layout';
Vue.use(VueFlexLayout);

plugins: [
  '@/plugins/components',
],

Configure

note: configuration is still experimental.

Override the following variables prior to importing the main.scss file:

Variable Name	Description	Default
$layout-max-width	maximum width of a non fluid container	1420
$layout-columns	maximum number of columns	12
$layout-gutter	gutter size in px	16
$layout-color-debug-container	base color for when `container` is in `debug` mode	rgb(57, 169, 219)
$layout-color-debug-row	base color for when `row` is in `debug` mode	rgb(163, 221, 122)
$layout-color-debug-column	base color for when `column` is in `debug` mode	rgb(242, 103, 48)
$layout-color-guide-right-limit	color for the rightmost limit for column guide	#ED0579
$layout-color-guide-left-limit	color for the leftmost limit for column guide	#01ABA3
$layout-color-guide-column	color for the line representing each column limit	transparentize(#F06925, .2)
$layout-color-guide-gutter	color for the line representing each column gutter	transparentize(#0071BD, .9)
$layout-guides-zindex	guides base z-index	2147483647