@jporto/vue-flex

A Vue JS Flex component for generic layout


Keywords
flex, flexbox, vuejs, nuxt, resize, resizable, fluid, responsive
License
MIT
Install
npm install @jporto/vue-flex@1.1.1

Documentation

@jporto/vue-flex

logo

build status npm-publish semantic-release language count

A Vue JS Flex component for generic 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

or

npm install @jporto/vue-flex

Setup

Vue.js

  • Add the following to you application main.js file:
import VueFlex from '@jporto/vue-flex'

Vue.use(VueFlex)
  • import the styles
@import '@jporto/vue-flex/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 VueFlex from '@jporto/vue-flex';
Vue.use(VueFlex);
  • 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!