Skip to content

Commit b4fb93b

Browse files
andrelmlinsandrelmlins
committed
Improvements in example
1 parent bf25499 commit b4fb93b

File tree

7 files changed

+355
-45
lines changed

7 files changed

+355
-45
lines changed

‎docs/App.vue

Lines changed: 243 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,245 @@
11
<template>
2-
<row :gutter="12" :columns="24">
3-
<column :xs="12" :sm="6" :lg="4">
4-
<p>teste</p>
5-
</column>
6-
<column :xs="12" :sm="6" :lg="4">
7-
<p>teste</p>
8-
</column>
9-
<column :xs="12" :sm="6" :lg="4">
10-
<p>teste</p>
11-
</column>
12-
<column :xs="12" :sm="6" :lg="4">
13-
<p>teste</p>
14-
</column>
15-
<column :xs="12" :sm="6" :lg="4">
16-
<p>teste</p>
17-
</column>
18-
<column :xs="12" :sm="6" :lg="4">
19-
<p>teste</p>
20-
</column>
21-
</row>
2+
<main>
3+
<div class="title">
4+
<img
5+
alt="Vue Framework"
6+
src="https://vuejs.org/images/logo.png"
7+
width="200"
8+
/>
9+
<h1>Vue Grid Responsive</h1>
10+
</div>
11+
<br />
12+
<h2>Without define sizes</h2>
13+
<div class="card">
14+
<div>
15+
<row :gutter="12">
16+
<column>
17+
<div class="col">col</div>
18+
</column>
19+
<column>
20+
<div class="col">col</div>
21+
</column>
22+
<column>
23+
<div class="col">col</div>
24+
</column>
25+
</row>
26+
<row :gutter="12">
27+
<column>
28+
<div class="col">col</div>
29+
</column>
30+
<column>
31+
<div class="col">col</div>
32+
</column>
33+
<column>
34+
<div class="col">col</div>
35+
</column>
36+
<column>
37+
<div class="col">col</div>
38+
</column>
39+
<column>
40+
<div class="col">col</div>
41+
</column>
42+
</row>
43+
</div>
44+
<code-highlight>
45+
{{ codeFirst }}
46+
</code-highlight>
47+
</div>
48+
<h2>Specifying sizes</h2>
49+
<div class="card">
50+
<row :gutter="12">
51+
<column :xs="12" :md="4" :lg="3">
52+
<div class="col">xs=12 md=4 lg=3</div>
53+
</column>
54+
<column :xs="12" :md="4" :lg="3">
55+
<div class="col">xs=12 md=4 lg=3</div>
56+
</column>
57+
<column :xs="12" :md="4" :lg="3">
58+
<div class="col">xs=12 md=4 lg=3</div>
59+
</column>
60+
<column :xs="12" :md="4" :lg="3">
61+
<div class="col">xs=12 md=4 lg=3</div>
62+
</column>
63+
<column :xs="12" :lg="6">
64+
<div class="col">xs=12 lg=6</div>
65+
</column>
66+
<column :xs="12" :lg="6">
67+
<div class="col">xs=12 lg=6</div>
68+
</column>
69+
<column :lg="4">
70+
<div class="col">lg=4</div>
71+
</column>
72+
<column :lg="4">
73+
<div class="col">lg=4</div>
74+
</column>
75+
<column :lg="4">
76+
<div class="col">lg=4</div>
77+
</column>
78+
</row>
79+
<code-highlight>
80+
{{ codeSecond }}
81+
</code-highlight>
82+
</div>
83+
<h2>Setting columns count</h2>
84+
<div class="card">
85+
<row :gutter="12" :columns="10">
86+
<column :xs="10" :md="5" :lg="2">
87+
<div class="col">xs=10 md=5 lg=2</div>
88+
</column>
89+
<column :xs="10" :md="5" :lg="2">
90+
<div class="col">xs=10 md=5 lg=2</div>
91+
</column>
92+
<column :xs="10" :md="5" :lg="2">
93+
<div class="col">xs=10 md=5 lg=2</div>
94+
</column>
95+
<column :xs="10" :md="5" :lg="2">
96+
<div class="col">xs=10 md=5 lg=2</div>
97+
</column>
98+
<column :xs="10" :md="5" :lg="2">
99+
<div class="col">xs=10 md=5 lg=2</div>
100+
</column>
101+
<column :xs="10" :lg="3">
102+
<div class="col">xs=10 lg=3</div>
103+
</column>
104+
<column :xs="10" :lg="4">
105+
<div class="col">xs=10 lg=4</div>
106+
</column>
107+
<column :xs="10" :lg="3">
108+
<div class="col">xs=10 lg=3</div>
109+
</column>
110+
</row>
111+
<code-highlight>
112+
{{ codeThird }}
113+
</code-highlight>
114+
</div>
115+
<h2>Changing gutter</h2>
116+
<div class="card">
117+
<row :gutter="50">
118+
<column :xs="12" :md="4" :lg="3">
119+
<div class="col">xs=12 md=4 lg=3</div>
120+
</column>
121+
<column :xs="12" :md="4" :lg="3">
122+
<div class="col">xs=12 md=4 lg=3</div>
123+
</column>
124+
<column :xs="12" :md="4" :lg="3">
125+
<div class="col">xs=12 md=4 lg=3</div>
126+
</column>
127+
<column :xs="12" :md="4" :lg="3">
128+
<div class="col">xs=12 md=4 lg=3</div>
129+
</column>
130+
</row>
131+
<code-highlight>
132+
{{ codeFourth }}
133+
</code-highlight>
134+
</div>
135+
</main>
22136
</template>
137+
138+
<script>
139+
export default {
140+
data() {
141+
return {
142+
codeFirst: `
143+
<row :gutter="12">
144+
<column>
145+
<div class="col">col</div>
146+
</column>
147+
<column>
148+
<div class="col">col</div>
149+
</column>
150+
<column>
151+
<div class="col">col</div>
152+
</column>
153+
</row>
154+
`,
155+
codeSecond: `
156+
<row :gutter="12">
157+
<column :xs="12" :md="4" :lg="3">
158+
<div class="col">xs=12 md=4 lg=3</div>
159+
</column>
160+
<column :xs="12" :md="4" :lg="3">
161+
<div class="col">xs=12 md=4 lg=3</div>
162+
</column>
163+
<column :xs="12" :md="4" :lg="3">
164+
<div class="col">xs=12 md=4 lg=3</div>
165+
</column>
166+
<column :xs="12" :md="4" :lg="3">
167+
<div class="col">xs=12 md=4 lg=3</div>
168+
</column>
169+
<column :xs="12" :lg="6">
170+
<div class="col">xs=12 lg=6</div>
171+
</column>
172+
<column :xs="12" :lg="6">
173+
<div class="col">xs=12 lg=6</div>
174+
</column>
175+
</row>
176+
`,
177+
codeThird: `
178+
<row :gutter="12" :columns="10">
179+
<column :xs="10" :md="5" :lg="2">
180+
<div class="col">xs=10 md=5 lg=2</div>
181+
</column>
182+
<column :xs="10" :md="5" :lg="2">
183+
<div class="col">xs=10 md=5 lg=2</div>
184+
</column>
185+
<column :xs="10" :md="5" :lg="2">
186+
<div class="col">xs=10 md=5 lg=2</div>
187+
</column>
188+
<column :xs="10" :md="5" :lg="2">
189+
<div class="col">xs=10 md=5 lg=2</div>
190+
</column>
191+
<column :xs="10" :md="5" :lg="2">
192+
<div class="col">xs=10 md=5 lg=2</div>
193+
</column>
194+
</row>
195+
`,
196+
codeFourth: `
197+
<row :gutter="50">
198+
<column :xs="12" :md="4" :lg="3">
199+
<div class="col">xs=12 md=4 lg=3</div>
200+
</column>
201+
<column :xs="12" :md="4" :lg="3">
202+
<div class="col">xs=12 md=4 lg=3</div>
203+
</column>
204+
<column :xs="12" :md="4" :lg="3">
205+
<div class="col">xs=12 md=4 lg=3</div>
206+
</column>
207+
<column :xs="12" :md="4" :lg="3">
208+
<div class="col">xs=12 md=4 lg=3</div>
209+
</column>
210+
</row>
211+
`
212+
};
213+
}
214+
};
215+
</script>
216+
217+
<style scoped>
218+
main {
219+
padding: 20px 38px;
220+
box-sizing: border-box;
221+
color: #263238;
222+
}
223+
h1 {
224+
margin-top: 0;
225+
}
226+
.title {
227+
text-align: center;
228+
}
229+
.col {
230+
width: 100%;
231+
padding: 15px 8px;
232+
box-sizing: border-box;
233+
color: #263238;
234+
text-align: center;
235+
background-color: white;
236+
font-size: 14pt;
237+
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
238+
0 2px 4px -1px rgba(0, 0, 0, 0.3);
239+
}
240+
.card {
241+
border-radius: 2px;
242+
box-sizing: border-box;
243+
margin-bottom: 50px;
244+
}
245+
</style>

‎docs/main.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
1+
import 'vue-code-highlight/themes/duotone-sea.css';
2+
13
import Vue from 'vue';
4+
import { component as VueCodeHighlight } from 'vue-code-highlight';
25
import { Row, Column } from '../src';
36
import App from './App.vue';
47

58
Vue.component('row', Row);
69
Vue.component('column', Column);
10+
Vue.component('code-highlight', VueCodeHighlight);
711

812
new Vue({
913
el: '#app',

‎package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,16 +25,19 @@
2525
"devDependencies": {
2626
"@babel/core": "^7.10.2",
2727
"@babel/preset-env": "^7.10.2",
28+
"autoprefixer": "^9.8.0",
2829
"rollup": "^2.12.0",
2930
"rollup-plugin-babel": "^4.4.0",
3031
"rollup-plugin-commonjs": "^10.1.0",
32+
"rollup-plugin-css-only": "^2.0.0",
3133
"rollup-plugin-livereload": "^1.3.0",
3234
"rollup-plugin-node-resolve": "^5.2.0",
3335
"rollup-plugin-replace": "^2.2.0",
3436
"rollup-plugin-terser": "^6.1.0",
3537
"rollup-plugin-vue": "^5.1.6",
3638
"sirv-cli": "^0.4.6",
3739
"vue": "^2.6.11",
40+
"vue-code-highlight": "^0.7.4",
3841
"vue-template-compiler": "^2.6.11"
3942
}
4043
}

‎public/index.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,39 @@
77
<title>Vue Grid Responsive</title>
88

99
<link rel="icon" type="image/png" href="/favicon.png" />
10+
<link rel="stylesheet" href="/build/bundle.css" />
11+
<link rel="stylesheet" href="/global.css" />
1012
<script defer src="/build/bundle.js"></script>
1113
</head>
1214

1315
<body>
1416
<div id="app"></div>
17+
<a
18+
href="https://github.com/andrelmlins/vue-grid-responsive"
19+
class="github-corner"
20+
target="_blank"
21+
aria-label="View source on GitHub"
22+
>
23+
<svg
24+
width="80"
25+
height="80"
26+
viewBox="0 0 250 250"
27+
style="fill:#263238; color:#FFF; position: fixed; top: 0; border: 0; right: 0;"
28+
aria-hidden="true"
29+
>
30+
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
31+
<path
32+
d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
33+
fill="currentColor"
34+
style="transform-origin: 130px 106px;"
35+
class="octo-arm"
36+
/>
37+
<path
38+
d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
39+
fill="currentColor"
40+
class="octo-body"
41+
/>
42+
</svg>
43+
</a>
1544
</body>
1645
</html>

‎rollup.config.js

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import livereload from 'rollup-plugin-livereload';
55
import { terser } from 'rollup-plugin-terser';
66
import vue from 'rollup-plugin-vue';
77
import replace from 'rollup-plugin-replace';
8+
import css from 'rollup-plugin-css-only';
9+
import autoprefixer from 'autoprefixer';
810
import pkg from './package.json';
911

1012
const watch = process.env.ROLLUP_WATCH;
@@ -18,7 +20,16 @@ const app = {
1820
file: 'public/build/bundle.js'
1921
},
2022
plugins: [
21-
vue(),
23+
vue({
24+
css: false,
25+
style: {
26+
postcssPlugins: [autoprefixer]
27+
}
28+
}),
29+
css({
30+
entry: 'docs/main.js',
31+
dest: 'public/build/bundle.css'
32+
}),
2233
babel({ exclude: 'node_modules/**' }),
2334
resolve({ mainFields: ['module', 'jsnext', 'main', 'browser'] }),
2435
commonjs(),

0 commit comments

Comments
 (0)