Vue JavaScript CSS
Latest commit 661b1bc Feb 19, 2017 @alexchopin bump to 1.2
Permalink
Failed to load latest commit information.
build clean useless dependencies Feb 11, 2017
src add column offset Feb 19, 2017
test add test Feb 11, 2017
.babelrc add config Feb 11, 2017
.editorconfig proper config Feb 11, 2017
.eslintignore add config Feb 11, 2017
.eslintrc.js delete old boilerplate Feb 11, 2017
.gitignore add config Feb 11, 2017
.stylelintrc add config Feb 11, 2017
CONTRIBUTING.md add config Feb 11, 2017
LICENSE add config Feb 11, 2017
README.md doc offset Feb 19, 2017
package.json bump to 1.2 Feb 19, 2017
yarn.lock add config Feb 11, 2017

README.md

vue-flexboxgrid

Vue components made with Flexboxgrid library.

npm vue2

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:

reverse: { 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 } }