Lesson 14: Laravel Mix and the Front-end (SASS, JS).

package.json

@@ -13,6 +13,8 @@
     "axios": "^0.16.2",
     "bootstrap-sass": "^3.3.7",
     "cross-env": "^5.0.1",
+    "eslint": "^4.6.0",
+    "eslint-plugin-react": "^7.3.0",
     "jquery": "^3.1.1",
     "laravel-mix": "^1.0",
     "lodash": "^4.17.4",

public/css/blog.css

@@ -1,166 +0,0 @@
-/*
- * Globals
- */
-
-@media (min-width: 48em) {
-    html {
-        font-size: 18px;
-    }
-}
-
-body {
-    font-family: Georgia, "Times New Roman", Times, serif;
-    color: #555;
-}
-
-h1, .h1,
-h2, .h2,
-h3, .h3,
-h4, .h4,
-h5, .h5,
-h6, .h6 {
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    font-weight: normal;
-    color: #333;
-}
-
-
-/*
- * Override Bootstrap's default container.
- */
-
-.container {
-    max-width: 60rem;
-}
-
-
-/*
- * Masthead for nav
- */
-
-.blog-masthead {
-    margin-bottom: 3rem;
-    background-color: #428bca;
-    -webkit-box-shadow: inset 0 -.1rem .25rem rgba(0,0,0,.1);
-    box-shadow: inset 0 -.1rem .25rem rgba(0,0,0,.1);
-}
-
-/* Nav links */
-.nav-link {
-    position: relative;
-    padding: 1rem;
-    font-weight: 500;
-    color: #cdddeb;
-}
-.nav-link:hover,
-.nav-link:focus {
-    color: #fff;
-    background-color: transparent;
-}
-
-/* Active state gets a caret at the bottom */
-.nav-link.active {
-    color: #fff;
-}
-.nav-link.active:after {
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    width: 0;
-    height: 0;
-    margin-left: -.3rem;
-    vertical-align: middle;
-    content: "";
-    border-right: .3rem solid transparent;
-    border-bottom: .3rem solid;
-    border-left: .3rem solid transparent;
-}
-
-
-/*
- * Blog name and description
- */
-
-.blog-header {
-    padding-bottom: 1.25rem;
-    margin-bottom: 2rem;
-    border-bottom: .05rem solid #eee;
-}
-.blog-title {
-    margin-bottom: 0;
-    font-size: 2rem;
-    font-weight: normal;
-}
-.blog-description {
-    font-size: 1.1rem;
-    color: #999;
-}
-
-@media (min-width: 40em) {
-    .blog-title {
-        font-size: 3.5rem;
-    }
-}
-
-
-/*
- * Main column and sidebar layout
- */
-
-/* Sidebar modules for boxing content */
-.sidebar-module {
-    padding: 1rem;
-    /*margin: 0 -1rem 1rem;*/
-}
-.sidebar-module-inset {
-    padding: 1rem;
-    background-color: #f5f5f5;
-    border-radius: .25rem;
-}
-.sidebar-module-inset p:last-child,
-.sidebar-module-inset ul:last-child,
-.sidebar-module-inset ol:last-child {
-    margin-bottom: 0;
-}
-
-
-/* Pagination */
-.blog-pagination {
-    margin-bottom: 4rem;
-}
-.blog-pagination > .btn {
-    border-radius: 2rem;
-}
-
-
-/*
- * Blog posts
- */
-
-.blog-post {
-    margin-bottom: 4rem;
-}
-.blog-post-title {
-    margin-bottom: .25rem;
-    font-size: 2.5rem;
-}
-.blog-post-meta {
-    margin-bottom: 1.25rem;
-    color: #999;
-}
-
-
-/*
- * Footer
- */
-
-.blog-footer {
-    padding: 2.5rem 0;
-    color: #999;
-    text-align: center;
-    background-color: #f9f9f9;
-    border-top: .05rem solid #e5e5e5;
-}
-.blog-footer p:last-child {
-    margin-bottom: 0;
-}

public/mix-manifest.json

@@ -0,0 +1,4 @@
+{
+    "/js/app.js": "/js/app.js",
+    "/css/app.css": "/css/app.css"
+}

resources/assets/js/app.js

@@ -4,7 +4,6 @@
  * includes Vue and other libraries. It is a great starting point when
  * building robust, powerful web applications using Vue and Laravel.
  */
-
 require('./bootstrap');
 
 window.Vue = require('vue');

resources/assets/sass/app.scss

@@ -1,9 +1,166 @@
+/*
+ * Globals
+ */
 
-// Fonts
-@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");
+@media (min-width: 48em) {
+  html {
+    font-size: 18px;
+  }
+}
 
-// Variables
-@import "variables";
+body {
+  font-family: Georgia, "Times New Roman", Times, serif;
+  color: #555;
+}
 
-// Bootstrap
-@import "~bootstrap-sass/assets/stylesheets/bootstrap";
+h1, .h1,
+h2, .h2,
+h3, .h3,
+h4, .h4,
+h5, .h5,
+h6, .h6 {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: normal;
+  color: #333;
+}
+
+
+/*
+ * Override Bootstrap's default container.
+ */
+
+.container {
+  max-width: 60rem;
+}
+
+
+/*
+ * Masthead for nav
+ */
+
+.blog-masthead {
+  margin-bottom: 3rem;
+  background-color: #428bca;
+  -webkit-box-shadow: inset 0 -.1rem .25rem rgba(0,0,0,.1);
+  box-shadow: inset 0 -.1rem .25rem rgba(0,0,0,.1);
+}
+
+/* Nav links */
+.nav-link {
+  position: relative;
+  padding: 1rem;
+  font-weight: 500;
+  color: #cdddeb;
+}
+.nav-link:hover,
+.nav-link:focus {
+  color: #fff;
+  background-color: transparent;
+}
+
+/* Active state gets a caret at the bottom */
+.nav-link.active {
+  color: #fff;
+}
+.nav-link.active:after {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  width: 0;
+  height: 0;
+  margin-left: -.3rem;
+  vertical-align: middle;
+  content: "";
+  border-right: .3rem solid transparent;
+  border-bottom: .3rem solid;
+  border-left: .3rem solid transparent;
+}
+
+
+/*
+ * Blog name and description
+ */
+
+.blog-header {
+  padding-bottom: 1.25rem;
+  margin-bottom: 2rem;
+  border-bottom: .05rem solid #eee;
+}
+.blog-title {
+  margin-bottom: 0;
+  font-size: 2rem;
+  font-weight: normal;
+}
+.blog-description {
+  font-size: 1.1rem;
+  color: #999;
+}
+
+@media (min-width: 40em) {
+  .blog-title {
+    font-size: 3.5rem;
+  }
+}
+
+
+/*
+ * Main column and sidebar layout
+ */
+
+/* Sidebar modules for boxing content */
+.sidebar-module {
+  padding: 1rem;
+  /*margin: 0 -1rem 1rem;*/
+}
+.sidebar-module-inset {
+  padding: 1rem;
+  background-color: #f5f5f5;
+  border-radius: .25rem;
+}
+.sidebar-module-inset p:last-child,
+.sidebar-module-inset ul:last-child,
+.sidebar-module-inset ol:last-child {
+  margin-bottom: 0;
+}
+
+
+/* Pagination */
+.blog-pagination {
+  margin-bottom: 4rem;
+}
+.blog-pagination > .btn {
+  border-radius: 2rem;
+}
+
+
+/*
+ * Blog posts
+ */
+
+.blog-post {
+  margin-bottom: 4rem;
+}
+.blog-post-title {
+  margin-bottom: .25rem;
+  font-size: 2.5rem;
+}
+.blog-post-meta {
+  margin-bottom: 1.25rem;
+  color: #999;
+}
+
+
+/*
+ * Footer
+ */
+
+.blog-footer {
+  padding: 2.5rem 0;
+  color: #999;
+  text-align: center;
+  background-color: #f9f9f9;
+  border-top: .05rem solid #e5e5e5;
+}
+.blog-footer p:last-child {
+  margin-bottom: 0;
+}

resources/views/layouts/master.blade.php

@@ -14,14 +14,14 @@
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
 
         <!-- Custom styles for this template -->
-        <link rel="stylesheet" href="/css/blog.css" />
+        <link rel="stylesheet" href="/css/app.css" />
     </head>
 
     <body>
         @include('layouts.nav')
         @include('layouts.header')
 
-        <div class="container">
+        <div class="container" id="app">
 
             <div class="row">
 
@@ -33,6 +33,8 @@
         </div><!-- /.container -->
 
         @include('layouts.footer')
-        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
+        <!-- script src="/js/manifest.js"></script -->
+        <!-- script src="/js/vendor.js"></script -->
+        <script src="/js/app.js"></script>
     </body>
 </html>