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-gridIntroduction
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 examplesLicense
Copyright (c) 2017 Lorenzo Girardi