Skip to content

Commit 4c729d1

Browse files
authored
Initial (#2)
1 parent 6c3389c commit 4c729d1

32 files changed

+10994
-0
lines changed

.browserslistrc

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
> 1%
2+
last 2 versions
3+
not dead

.eslintrc.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
module.exports = {
2+
root: true,
3+
env: {
4+
node: true
5+
},
6+
'extends': [
7+
'plugin:vue/essential',
8+
'eslint:recommended',
9+
'@vue/typescript/recommended'
10+
],
11+
parserOptions: {
12+
ecmaVersion: 2020
13+
},
14+
rules: {
15+
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
16+
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
17+
}
18+
}

README.md

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# :rocket: Vue Material Design Layout Kit
2+
3+
**Popular layouts for Material Design web applications.**
4+
5+
The idea here is to provide ready to use Vue templates with typical [Material Design](https://material.io/) layout and navigational components.
6+
7+
[>>> DEMO <<<](http://vue-layouts.kekscs.com/)
8+
9+
10+
<img src="https://kekscs.blob.core.windows.net/dev/vue-material-layout-kit/layout-screens/203/layout203-iphone8.png" alt="Layout #203 (iPhone 8)" title="Layout #203 (iPhone 8)" height="550">
11+
12+
![Layout #203 (desktop)](https://kekscs.blob.core.windows.net/dev/vue-material-layout-kit/layout-screens/203/layout203-desktop.png "Layout #203 (deskop)")
13+
14+
## :heavy_check_mark: Key Features
15+
16+
* Built using Google's [Material Design Components for web](https://material.io/develop/web) (or MDC-Web).
17+
* You don't have to use MDC-Web for the rest of your application. MDC-Web fluently integrates with other CSS frameworks/components because it doesn't define any global CSS styles. And because the library is very modular, only used components will be bundled.
18+
* MDC-Web defines 3 breakpoint ranges: [desktop, tablet and phone](https://material.io/develop/web/supporting/layout-grid). Each template is optimized for these three breakpoints.
19+
* Some templates adapt layout and navigation based on screen size. Layout and behavior at each breakpoint is mostly based on [Material Studies examples](https://material.io/design/material-studies/about-our-material-studies.html). For example:
20+
* Navigation hidden on smaller screens gets revealed when additional space becomes available.
21+
* Navigational components can transform from one format to another at a designated breakpoint: side navigation can transform into tabs on a larger screen.
22+
* Theming is available via [MDC-Web's theming system](https://material.io/develop/web/theming/theming-guide). Changing colors, fonts, shapes is as easy as setting SASS variables.
23+
24+
25+
## Getting Started
26+
27+
Go to [Releases](https://github.com/kekscs/vue-material-layout-kit/releases) and download the latest release. Unpack it, rename the folder/app and use it as a starting point for your web app:
28+
29+
``` bash
30+
# install dependencies
31+
yarn install
32+
33+
# serve with hot reload at localhost:8080
34+
yarn start
35+
36+
# build for production with minification
37+
yarn build
38+
```

babel.config.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
presets: [
3+
'@vue/cli-plugin-babel/preset'
4+
]
5+
}

package.json

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"name": "vue-material-layout-kit",
3+
"version": "0.1.0-alpha.1",
4+
"private": true,
5+
"scripts": {
6+
"serve": "vue-cli-service serve",
7+
"build": "vue-cli-service build",
8+
"lint": "vue-cli-service lint"
9+
},
10+
"dependencies": {
11+
"core-js": "^3.6.5",
12+
"material-components-web": "10.0.0",
13+
"mdc-utility-styles": "0.1.0-alpha.2",
14+
"vue": "^2.6.11",
15+
"vue-router": "^3.2.0",
16+
"vuex": "^3.4.0"
17+
},
18+
"devDependencies": {
19+
"@typescript-eslint/eslint-plugin": "^2.33.0",
20+
"@typescript-eslint/parser": "^2.33.0",
21+
"@vue/cli-plugin-babel": "~4.5.0",
22+
"@vue/cli-plugin-eslint": "~4.5.0",
23+
"@vue/cli-plugin-router": "~4.5.0",
24+
"@vue/cli-plugin-typescript": "~4.5.0",
25+
"@vue/cli-plugin-vuex": "~4.5.0",
26+
"@vue/cli-service": "~4.5.0",
27+
"@vue/eslint-config-typescript": "^5.0.2",
28+
"eslint": "^6.7.2",
29+
"eslint-plugin-vue": "^6.2.2",
30+
"sass": "^1.26.5",
31+
"sass-loader": "9.0.3",
32+
"typescript": "~3.9.3",
33+
"vue-template-compiler": "^2.6.11",
34+
"webpack-fix-style-only-entries": "^0.6.0"
35+
}
36+
}

public/favicon.ico

4.19 KB
Binary file not shown.

public/index.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7+
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
8+
<link rel="preconnect" href="https://fonts.gstatic.com">
9+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
10+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;500&display=swap">
11+
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
12+
<title><%= htmlWebpackPlugin.options.title %></title>
13+
</head>
14+
<body class="mdc-typography">
15+
<noscript>
16+
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
17+
</noscript>
18+
<div id="app"></div>
19+
<!-- built files will be auto injected -->
20+
</body>
21+
</html>

src/App.vue

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<template>
2+
<div id="app">
3+
<component :is="this.$route.meta.layout || 'div'">
4+
<router-view/>
5+
</component>
6+
</div>
7+
</template>
8+
9+
<style lang="scss">
10+
11+
</style>

src/components/CardContentTable.vue

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<template>
2+
<table>
3+
<tbody>
4+
<tr v-for="(row, index) in rows" :key="index">
5+
<td>{{ row.value }}</td>
6+
</tr>
7+
</tbody>
8+
</table>
9+
</template>
10+
11+
12+
<script lang="ts">
13+
import Vue from 'vue';
14+
15+
export default Vue.extend({
16+
name: 'TestContent2',
17+
data() {
18+
return {
19+
rows: [
20+
{
21+
value: 'Checking'
22+
},
23+
{
24+
value: '****1234'
25+
},
26+
{
27+
value: '$'
28+
},
29+
{
30+
value: '2,215.13'
31+
}
32+
]
33+
}
34+
},
35+
// created: function() {
36+
// for(let i = 0; i < 30; i++) {
37+
// this.$data.cards.push( Math.random() < 0.5 ?
38+
// {
39+
// isImg: false,
40+
// } :
41+
// {
42+
// isImg: true,
43+
// imgUrl: require('../assets/test-img' + this.getRandomInt(1, 10) + '.jpg')
44+
// }
45+
// );
46+
// }
47+
// },
48+
// methods: {
49+
// getRandomInt: function(min: number, max: number) {
50+
// min = Math.ceil(min);
51+
// max = Math.floor(max);
52+
// return Math.floor(Math.random() * (max - min + 1)) + min;
53+
// }
54+
// }
55+
});
56+
57+
</script>

src/components/HelloWorld.vue

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<template>
2+
<div class="hello">
3+
<h1>{{ msg }}</h1>
4+
<p>
5+
For a guide and recipes on how to configure / customize this project,<br>
6+
check out the
7+
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
8+
</p>
9+
<h3>Installed CLI Plugins</h3>
10+
<ul>
11+
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
12+
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
13+
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
14+
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
15+
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
16+
</ul>
17+
<h3>Essential Links</h3>
18+
<ul>
19+
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
20+
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
21+
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
22+
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
23+
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
24+
</ul>
25+
<h3>Ecosystem</h3>
26+
<ul>
27+
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
28+
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
29+
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
30+
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
31+
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
32+
</ul>
33+
</div>
34+
</template>
35+
36+
<script lang="ts">
37+
import Vue from 'vue';
38+
39+
export default Vue.extend({
40+
name: 'HelloWorld',
41+
props: {
42+
msg: String,
43+
},
44+
});
45+
</script>
46+
47+
<!-- Add "scoped" attribute to limit CSS to this component only -->
48+
<style scoped lang="scss">
49+
h3 {
50+
margin: 40px 0 0;
51+
}
52+
ul {
53+
list-style-type: none;
54+
padding: 0;
55+
}
56+
li {
57+
display: inline-block;
58+
margin: 0 10px;
59+
}
60+
a {
61+
color: #42b983;
62+
}
63+
</style>

0 commit comments

Comments
 (0)