add simple css layout to kanban board and basic vue components

Author: Sergey Vlasov

frontend/src/App.vue

@@ -1,13 +1,21 @@
 <template>
   <div id="app">
-    <img src="./assets/logo.png">
+    <kanban-header></kanban-header>
     <router-view/>
+    <kanban-footer></kanban-footer>
   </div>
 </template>
 
 <script>
+import KanbanHeader from '@/components/KanbanHeader'
+import KanbanFooter from '@/components/KanbanFooter'
+
 export default {
-  name: 'App'
+  name: 'App',
+  components: {
+    'kanban-header': KanbanHeader,
+    'kanban-footer': KanbanFooter
+  }
 }
 </script>
 
@@ -18,6 +26,6 @@ export default {
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  margin-top: 60px;
+  border: 1px solid black;
 }
 </style>

frontend/src/components/HelloWorld.vue

@@ -0,0 +1,38 @@
+<template>
+  <div id="kanban-board">
+    <h1>Hello, {{ name }}</h1>
+    <div id="board">
+      <kanban-list></kanban-list>
+      <kanban-list></kanban-list>
+      <kanban-list></kanban-list>
+    </div>
+  </div>
+</template>
+
+<script>
+import KanbanList from '@/components/board/KanbanList.vue'
+
+export default {
+  components: { KanbanList },
+  name: 'KanbanBoard',
+  data () {
+    return {
+      msg: 'Welcome to Your Vue.js App!',
+      name: 'Sergey'
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+#kanban-board {
+  border: 1px solid red;
+}
+#board {
+  border: 1px solid blue;
+  overflow-x: auto;
+  white-space: nowrap;
+  text-align: left;
+}
+</style>

frontend/src/components/KanbanBoard.vue

@@ -0,0 +1,17 @@
+<template>
+  <div id="kanban-footer">
+    <h2>This is the footer</h2>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'KanbanFooter'
+}
+</script>
+
+<style scoped>
+#kanban-footer {
+  border: 1px solid red;
+}
+</style>

frontend/src/components/KanbanFooter.vue

@@ -0,0 +1,18 @@
+<template>
+  <div id="kanban-header">
+    <h2>This is the footer</h2>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'KanbanHeader'
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+#kanban-header {
+  border: 1px solid red;
+}
+</style>

frontend/src/components/KanbanHeader.vue

@@ -0,0 +1,20 @@
+<template>
+  <div id="kanban-list">
+    <h2>This is the List</h2>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'KanbanList'
+}
+</script>
+
+<style scoped>
+#kanban-list {
+  border: 1px solid green;
+  width: 300px;
+  display: inline-block;
+  text-align: center;
+}
+</style>

frontend/src/components/board/KanbanList.vue

@@ -1,15 +1,15 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import HelloWorld from '@/components/HelloWorld'
+import KanbanBoard from '@/components/KanbanBoard'
 
 Vue.use(Router)
 
 export default new Router({
   routes: [
     {
       path: '/',
-      name: 'HelloWorld',
-      component: HelloWorld
+      name: 'KanbanBoard',
+      component: KanbanBoard
     }
   ]
 })