Making progress :woot:

Author: dannyrb

aliases.config.js

@@ -0,0 +1,28 @@
+const path = require('path')
+
+function resolveSrc (_path) {
+  return path.join(__dirname, _path)
+}
+
+const aliases = {
+  '@': 'src',
+  '@router': 'src/router',
+  '@views': 'src/router/views',
+  '@layouts': 'src/router/layouts',
+  '@components': 'src/components',
+  '@assets': 'src/assets'
+//   '@utils': 'src/utils',
+//   '@state': 'src/state',
+//   '@design': 'src/design/index.scss'
+}
+
+module.exports = {
+  webpack: {},
+  jest: {}
+}
+
+for (const alias in aliases) {
+  module.exports.webpack[alias] = resolveSrc(aliases[alias])
+  module.exports.jest['^' + alias + '/(.*)$'] =
+    '<rootDir>/' + aliases[alias] + '/$1'
+}

src/App.vue

@@ -1,16 +1,18 @@
 <template>
   <div id="app">
-    <div id="nav">
+    <!-- <div id="nav">
       <router-link to="/">Home</router-link> |
       <router-link to="/about">About</router-link>
-    </div>
+    </div> -->
     <router-view/>
   </div>
 </template>
 
 <style lang="scss">
+@import "styles/main.scss";
+
 #app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  font-family: "Avenir", Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;

src/components/HelloWorld.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="grid-container">
+
+	<div class="grid-image primary">
+		<img src="https://placehold.it/250x250/05AABA/000000?text=PizzaPizzaPizza" />
+	</div>
+	<div class="grid-image secondary">
+		<img src="https://placehold.it/250x250/05AABA/000000?text=PizzaPizzaPizza" />
+	</div>
+	<div class="grid-image thirdary">
+		<img src="https://placehold.it/250x250/05AABA/000000?text=PizzaPizzaPizza" />
+	</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ProductGrid',
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+.grid-container {
+  display: grid;
+  grid-template-columns: 50% 50%;
+  grid-template:
+    "primary secondary"
+    "primary thirdary";
+}
+
+.primary {
+  grid-area: primary;
+}
+.secondary {
+  grid-area: secondary;
+}
+.thirdary {
+  grid-area: thirdary;
+}
+</style>

src/components/ProductGrid.vue

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import App from './App.vue'
-import router from './router'
+import router from '@router/routes.js'
 import store from './store'
 import './registerServiceWorker'
 

src/main.js

@@ -0,0 +1,52 @@
+<template>
+	<div class="layout">
+		<section class="header">
+		</section>
+		<main class="main">
+			<slot></slot>
+		</main>
+
+		<section class="footer">
+
+		</section>
+	</div>
+</template>
+
+<script>
+export default {
+  name: 'MasterLayout'
+}
+</script>
+
+<style lang="scss">
+@import "../../styles/global-variables.scss";
+
+.layout {
+  display: grid;
+  grid-template-columns: 25% 25% 25% 25%;
+  grid-template-rows: auto;
+  grid-template-areas:
+    "header header header header"
+    "main main main main"
+    "footer footer footer footer";
+}
+
+.header {
+  grid-area: header;
+  background-color: map-get($brand, primary);
+  min-height: 60px;
+
+  @media (max-width: 600px) {
+    grid-area: footer;
+  }
+}
+
+.main {
+  grid-area: main;
+}
+
+.footer {
+  grid-area: footer;
+  background-color: map-get($brand, primary);
+}
+</style>

src/router/layouts/Master.vue

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import Home from './views/Home.vue'
-import About from './views/About.vue'
+import Home from '@views/Home.vue'
+import About from '@views/About.vue'
 
 Vue.use(Router)
 

src/router.js src/router/routes.js

@@ -0,0 +1,21 @@
+<template>
+  <cdd-master-layout>
+	<div class="home">
+		<img src="@assets/logo.png">
+		<cdd-product-grid msg="Welcome to Your PizzaScript"/>
+	</div>
+  </cdd-master-layout>
+</template>
+
+<script>
+import CddMasterLayout from '@layouts/Master.vue';
+import CddProductGrid from '@components/ProductGrid.vue';
+
+export default {
+  name: 'home',
+  components: {
+    CddMasterLayout,
+    CddProductGrid
+  }
+}
+</script>

src/views/About.vue src/router/views/About.vue

@@ -0,0 +1,11 @@
+/* apply a natural box layout model to all elements, but allowing components to change */
+
+html {
+	box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+	box-sizing: inherit;
+}