vue-flexboxgrid

Vue components made with Flexboxgrid library.

A Vue.js Plugin

Installation

npm install --save vue-flexboxgrid

Usage

Bundler (Webpack, Rollup)

import Vue from 'vue'
import VueFlexboxgrid from 'vue-flexboxgrid'
 
Vue.use(VueFlexboxgrid)

<style src="vue-flexboxgrid/dist/vue-flexboxgrid.css"/>

Browser

<!-- Include after Vue -->
<link rel="stylesheet" href="vue-flexboxgrid/dist/vue-flexboxgrid.css"></link>
<script src="vue-flexboxgrid/dist/vue-flexboxgrid.js"></script>

Components and Props

Container

Component:

<container>
  Your content
</container>

Props:

hero: { type: Boolean, default: false },
fluid: { type: Boolean, default: false }

Row

Component:

<row>
  Your content
</row>

Props:

reverse: { type: Boolean, default: false },
startXs: { type: Boolean, default: false },
centerXs: { type: Boolean, default: false },
endXs: { type: Boolean, default: false },
topXs: { type: Boolean, default: false },
middleXs: { type: Boolean, default: false },
bottomXs: { type: Boolean, default: false },
aroundXs: { type: Boolean, default: false },
betweenXs: { type: Boolean, default: false },
startSm: { type: Boolean, default: false },
centerSm: { type: Boolean, default: false },
endSm: { type: Boolean, default: false },
topSm: { type: Boolean, default: false },
middleSm: { type: Boolean, default: false },
bottomSm: { type: Boolean, default: false },
aroundSm: { type: Boolean, default: false },
betweenSm: { type: Boolean, default: false },
startMd: { type: Boolean, default: false },
centerMd: { type: Boolean, default: false },
endMd: { type: Boolean, default: false },
topMd: { type: Boolean, default: false },
middleMd: { type: Boolean, default: false },
bottomMd: { type: Boolean, default: false },
aroundMd: { type: Boolean, default: false },
betweenMd: { type: Boolean, default: false },
startLg: { type: Boolean, default: false },
centerLg: { type: Boolean, default: false },
endLg: { type: Boolean, default: false },
topLg: { type: Boolean, default: false },
middleLg: { type: Boolean, default: false },
bottomLg: { type: Boolean, default: false },
aroundLg: { type: Boolean, default: false },
betweenLg: { type: Boolean, default: false }

Column

Component:

<column>
  Your content
</column>

Props:

firstXs: { type: Boolean, default: false },
lastXs: { type: Boolean, default: false },
firstSm: { type: Boolean, default: false },
lastSm: { type: Boolean, default: false },
firstMd: { type: Boolean, default: false },
lastMd: { type: Boolean, default: false },
firstLg: { type: Boolean, default: false },
lastLg: { type: Boolean, default: false },
xsOffset: { type: String, validator (v) { var i = parseInt(v); return !isNaN(i) && v > 0 && v < 13 } },
smOffset: { type: String, validator (v) { var i = parseInt(v); return !isNaN(i) && v > 0 && v < 13 } },
mdOffset: { type: String, validator (v) { var i = parseInt(v); return !isNaN(i) && v > 0 && v < 13 } },
lgOffset: { type: String, validator (v) { var i = parseInt(v); return !isNaN(i) && v > 0 && v < 13 } },
xs: { type: String, default: '12', validator (v) { var i = parseInt(v); return !isNaN(i) && v > 0 && v < 13 } },
sm: { type: String, validator (v) { var i = parseInt(v); return !isNaN(i) && v > 0 && v < 13 } },
md: { type: String, validator (v) { var i = parseInt(v); return !isNaN(i) && v > 0 && v < 13 } },
lg: { type: String, validator (v) { var i = parseInt(v); return !isNaN(i) && v > 0 && v < 13 } }