Skip to content

Commit

Permalink
Initial (#2)
Browse files Browse the repository at this point in the history
  • Loading branch information
@klyakh
klyakh committed Mar 2, 2021
1 parent 6c3389c commit 4c729d1
Show file tree
Hide file tree
Showing 32 changed files with 10,994 additions and 0 deletions.
3 changes: 3 additions & 0 deletions .browserslistrc
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
> 1%
last 2 versions
not dead
18 changes: 18 additions & 0 deletions .eslintrc.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/essential',
'eslint:recommended',
'@vue/typescript/recommended'
],
parserOptions: {
ecmaVersion: 2020
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
}
}
38 changes: 38 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
# :rocket: Vue Material Design Layout Kit

**Popular layouts for Material Design web applications.**

The idea here is to provide ready to use Vue templates with typical [Material Design](https://material.io/) layout and navigational components.

[>>> DEMO <<<](http://vue-layouts.kekscs.com/)


<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">

![Layout #203 (desktop)](https://kekscs.blob.core.windows.net/dev/vue-material-layout-kit/layout-screens/203/layout203-desktop.png "Layout #203 (deskop)")

## :heavy_check_mark: Key Features

* Built using Google's [Material Design Components for web](https://material.io/develop/web) (or MDC-Web).
* 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.
* 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.
* 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:
* Navigation hidden on smaller screens gets revealed when additional space becomes available.
* Navigational components can transform from one format to another at a designated breakpoint: side navigation can transform into tabs on a larger screen.
* 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.


## Getting Started

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:

``` bash
# install dependencies
yarn install

# serve with hot reload at localhost:8080
yarn start

# build for production with minification
yarn build
```
5 changes: 5 additions & 0 deletions babel.config.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}
36 changes: 36 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
{
"name": "vue-material-layout-kit",
"version": "0.1.0-alpha.1",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"material-components-web": "10.0.0",
"mdc-utility-styles": "0.1.0-alpha.2",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^2.33.0",
"@typescript-eslint/parser": "^2.33.0",
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-typescript": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/eslint-config-typescript": "^5.0.2",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"sass": "^1.26.5",
"sass-loader": "9.0.3",
"typescript": "~3.9.3",
"vue-template-compiler": "^2.6.11",
"webpack-fix-style-only-entries": "^0.6.0"
}
}
Binary file added public/favicon.ico
View file
Binary file not shown.
21 changes: 21 additions & 0 deletions public/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;500&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body class="mdc-typography">
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
11 changes: 11 additions & 0 deletions src/App.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<template>
<div id="app">
<component :is="this.$route.meta.layout || 'div'">
<router-view/>
</component>
</div>
</template>

<style lang="scss">
</style>
57 changes: 57 additions & 0 deletions src/components/CardContentTable.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
<template>
<table>
<tbody>
<tr v-for="(row, index) in rows" :key="index">
<td>{{ row.value }}</td>
</tr>
</tbody>
</table>
</template>


<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
name: 'TestContent2',
data() {
return {
rows: [
{
value: 'Checking'
},
{
value: '****1234'
},
{
value: '$'
},
{
value: '2,215.13'
}
]
}
},
// created: function() {
// for(let i = 0; i < 30; i++) {
// this.$data.cards.push( Math.random() < 0.5 ?
// {
// isImg: false,
// } :
// {
// isImg: true,
// imgUrl: require('../assets/test-img' + this.getRandomInt(1, 10) + '.jpg')
// }
// );
// }
// },
// methods: {
// getRandomInt: function(min: number, max: number) {
// min = Math.ceil(min);
// max = Math.floor(max);
// return Math.floor(Math.random() * (max - min + 1)) + min;
// }
// }
});
</script>
63 changes: 63 additions & 0 deletions src/components/HelloWorld.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>

<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
name: 'HelloWorld',
props: {
msg: String,
},
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
94 changes: 94 additions & 0 deletions src/layouts/Layout101.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
<template>
<div>
<header class="mdc-top-app-bar mdc-elevation--z3">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<router-link to="/" class="mdc-top-app-bar__title mdc-top-app-bar__title--first">
<span class="">Material Design</span> Layout Kit
</router-link>
</section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<!-- <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Favorite">favorite</button>
<button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Search">search</button> -->

<a href="https://github.com/kekscs/vue-material-layout-kit"
class="material-icons mdc-top-app-bar__action-item mdc-icon-button">
<svg focusable="false" viewBox="0 0 51.8 50.4" xmlns="http://www.w3.org/2000/svg"><path d="M25.9,0.2C11.8,0.2,0.3,11.7,0.3,25.8c0,11.3,7.3,20.9,17.5,24.3c1.3,0.2,1.7-0.6,1.7-1.2c0-0.6,0-2.6,0-4.8c-7.1,1.5-8.6-3-8.6-3c-1.2-3-2.8-3.7-2.8-3.7c-2.3-1.6,0.2-1.6,0.2-1.6c2.6,0.2,3.9,2.6,3.9,2.6c2.3,3.9,6,2.8,7.5,2.1c0.2-1.7,0.9-2.8,1.6-3.4c-5.7-0.6-11.7-2.8-11.7-12.7c0-2.8,1-5.1,2.6-6.9c-0.3-0.7-1.1-3.3,0.3-6.8c0,0,2.1-0.7,7,2.6c2-0.6,4.2-0.9,6.4-0.9c2.2,0,4.4,0.3,6.4,0.9c4.9-3.3,7-2.6,7-2.6c1.4,3.5,0.5,6.1,0.3,6.8c1.6,1.8,2.6,4.1,2.6,6.9c0,9.8-6,12-11.7,12.6c0.9,0.8,1.7,2.4,1.7,4.7c0,3.4,0,6.2,0,7c0,0.7,0.5,1.5,1.8,1.2c10.2-3.4,17.5-13,17.5-24.3C51.5,11.7,40.1,0.2,25.9,0.2z"></path></svg>
</a>

<div id="demo-menu" class="mdc-menu-surface--anchor">
<button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Options">more_vert</button>
<div class="mdc-menu mdc-menu-surface">
<ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical" tabindex="-1">
<li class="mdc-list-item" role="menuitem">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__graphic material-icons" aria-hidden="true">settings</span>
<span class="mdc-list-item__text">Settings</span>
</li>
<li class="mdc-list-item" role="menuitem">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__graphic material-icons" aria-hidden="true">power_settings_new</span>
<span class="mdc-list-item__text">Log Out</span>
</li>
</ul>
</div>
</div>
</section>
</div>
</header>
<div class="mdc-top-app-bar--fixed-adjust">
<slot />
</div>
</div>
</template>

<script lang="ts">
import Vue from 'vue';
import { MDCTopAppBar } from '@material/top-app-bar';
export default Vue.extend({
name: "Layout101",
data() {
return {
topAppBar: undefined
}
},
mounted: function() {
const topAppBarEl = document.querySelector('.mdc-top-app-bar');
console.log('top app bar checked');
if(topAppBarEl) {
this.$data.topAppBar = new MDCTopAppBar(topAppBarEl);
console.log('top app bar created');
}
},
beforeDestroy: function() {
//console.log(this.$data.topAppBar);
if(this.$data.topAppBar) {
this.$data.topAppBar.destroy();
this.$data.topAppBar = undefined;
console.log('top app bar destroyed');
}
}
});
</script>

<style lang="scss" scoped>
@use '@material/theme';
@use '@material/layout-grid';
@use '../styles/mdc-extensions/mdcext-top-app-bar';
.mdc-top-app-bar__title {
color: theme.$on-primary;
@media (max-width: layout-grid.breakpoint-max(phone)) {
span {
display: none;
}
}
}
.mdc-top-app-bar__title.mdc-top-app-bar__title--first {
@include mdcext-top-app-bar.title--first;
}
</style>
Loading

0 comments on commit 4c729d1

Please sign in to comment.