Skip to content

Commit 1340d9c

Browse files
manicomanico
committed
Cleanup
1 parent 245f0f8 commit 1340d9c

File tree

3 files changed

+72
-13
lines changed

3 files changed

+72
-13
lines changed

‎README.md

+63-11
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,73 @@
1+
[![Build Status](https://travis-ci.org/manico/vue-grid.svg?branch=master)](https://travis-ci.org/manico/vue-grid) [![codecov](https://codecov.io/gh/manico/vue-grid/branch/master/graph/badge.svg)](https://codecov.io/gh/manico/vue-grid)
2+
13
# vue-grid
24

35
> Vue implementation of css grid layout
46
5-
## Build Setup
7+
## Installation
8+
9+
```bash
10+
# npm
11+
npm install vue-grid
12+
```
13+
14+
## Using
15+
16+
### Import globally
617

7-
``` bash
8-
# install dependencies
9-
npm install
18+
```javascript
19+
import Vue from 'vue';
20+
import { VGrid } from 'vue-grid';
21+
import App from './App';
1022

11-
# serve with hot reload at localhost:8080
12-
npm run dev
23+
Vue.config.productionTip = false;
24+
Vue.use(VGrid);
1325

14-
# build for production with minification
15-
npm run build
26+
/* eslint-disable no-new */
27+
new Vue({
28+
el: '#app',
29+
template: '<App/>',
30+
components: { App },
31+
});
32+
```
33+
34+
### Import locally
35+
36+
```javascript
37+
import { VGrid, VGridItem } from 'vue-grid';
1638

17-
# build for production and view the bundle analyzer report
18-
npm run build --report
39+
export default {
40+
name: 'app',
41+
components: {
42+
VGrid,
43+
VGridItem,
44+
},
45+
data() {
46+
return {
47+
};
48+
},
49+
};
1950
```
2051

21-
For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
52+
### Use in template
53+
54+
```html
55+
<template>
56+
<div id="app">
57+
<v-grid class="grid"
58+
template-columns="2fr 1fr 1fr"
59+
:auto-rows="['50px', '120px']"
60+
gap="10px">
61+
<v-grid-item :column-start="1"
62+
:column-end="4">
63+
</v-grid-item>
64+
<v-grid-item></v-grid-item>
65+
<v-grid-item></v-grid-item>
66+
<v-grid-item></v-grid-item>
67+
<v-grid-item :column-start="1"
68+
:column-end="4">
69+
</v-grid-item>
70+
</v-grid>
71+
</div>
72+
</template>
73+
```

‎index-template.html

+1-2
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,9 @@
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
66
<meta http-equiv="x-ua-compatible" content="ie=edge">
7-
<title>vue-grid</title>
7+
<title>Vue Grid</title>
88
</head>
99
<body>
1010
<div id="app"></div>
11-
<!-- built files will be auto injected -->
1211
</body>
1312
</html>

‎travis.yml

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
language: node_js
2+
node_js:
3+
- "8"
4+
install:
5+
- npm install
6+
script:
7+
- npm lint && codecov
8+
- npm run build

0 commit comments

Comments
 (0)