@jporto/vue-flex-layout

A VueJS flexbox partitionable layout.

View Demo View Github

Instalation

yarn add @jporto/vue-flex-layout

or

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);
  • Register the plugin in nuxt.config.js:
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

note: values are represented exaclty as they are in the _variables.scss file. No units are used!