Skip to content
A powerful flexbox grid system for Vue.js 2.x, built with inline-styles
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
docs
es
example 📦 Removed unused deps Nov 29, 2017
src
umd
.babelrc
.eslintrc.js
.gitignore 🎉 Initial commit Nov 28, 2017
.npmignore
.npmrc
LICENSE
README.md
package-lock.json
package.json
rollup.config.js

README.md

vue-grid

A powerful flexbox grid system for Vue.js 2.x, built with inline-styles

Installation

  npm install @liqueflies/vue-grid --save
  # or
  yarn add @liqueflies/vue-grid

Introduction

vue-grid use principles of bootstrap layout providing a responsive grid made with components, props and inline-styles.

Example usage

import { VueGrid } from '@liqueflies/vue-grid'

Vue.use(VueGrid, { /* your configuration */ })

This object is the default confguration representing the properties that you can override:

{
  columns: 12,
  gutter: 16,
  breakpoints: {
    xs: 320,
    sm: 576,
    md: 768,
    lg: 992,
    xl: 1200
  },
}

This instruction will install 4 components, Container, Row, Column, Hidden. Please refer to Documentation for more details.

An example of code using vue-grid:

<container xl="1200">
  <row>
    <column :sm="6" :md="3">
      <img src="http://unsplash.it/800x800" class="img-fluid" alt="placeholder" />
    </column>
    <column :sm="6" :md="3">
      <img src="http://unsplash.it/800x800" class="img-fluid" alt="placeholder" />
    </column>
    <column :sm="6" :md="3">
      <img src="http://unsplash.it/800x800" class="img-fluid" alt="placeholder" />
    </column>
    <column :sm="6" :md="3">
      <img src="http://unsplash.it/800x800" class="img-fluid" alt="placeholder" />
    </column>
  </row>
  <hidden :from="sm" :until="lg">
    This is only visible from sm to lg breakpoints
  </hidden>
</container>

Documentation

View the Documentation

Examples

  npm run examples

License

MIT

Copyright (c) 2017 Lorenzo Girardi

You can’t perform that action at this time.