Grid logo and title is centered using grid layout

src/app/dashboard/dashboard.component.scss

@@ -1,5 +1,25 @@
+//
+// Spaces
+//
+
+$space: 24px;
+
+$sxlarge: 9 * $space;
+$xxxlarge: 6 * $space;
+$xxlarge: 4 * $space;
+$xlarge: 2 * $space;
+$large: 1.5 * $space;
+$medium: $space;
+$small: 0.75 * $space;
+$tiny: 0.5 * $space;
+$hair: 0.25 * $space;
+$nano: 0.125 * $space;
+
+$tao-navbar-height: 67px;
+
 .tfw-first-row {
   height: 40vh;
+  margin-top: $tao-navbar-height + $space;
 }
 
 .tfw-second-row {}

src/app/header/header.component.html

@@ -1,8 +1,11 @@
-<div class="jumbotron text-center">
+<nav class="navbar navbar-default navbar-expand-md navbar-light tao-navbar fixed-top">
-  <h1>Tutorial framework Demo</h1>
+  <div class="tao-grid-navbar">
-  <h3>
+    <ul class="navbar-nav tao-grid-center-right">
-    Powered by Angular
+      <li class="nav-item tao-header-title">an</li>
-    <img class="logo" width="36" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
+    </ul>
-  </h3>
+    <img src="images/avatao_logo.svg" routerLink="/" class="tao-grid-center-center tao-company-logo" alt="">
+    <ul class="navbar-nav tao-grid-center-left">
+      <li class="nav-item tao-header-title">tutorial</li>
+    </ul>
   </div>
-
+</nav>

src/app/header/header.component.scss

@@ -1,33 +1,80 @@
-@keyframes heartbeat
+// Variables
-{
+
-  0%
+//
-  {
+// Spaces
-    transform: scale( .75 );
+//
-  }
+$space: 24px;
-  20%
+
-  {
+$sxlarge: 9 * $space;
-    transform: scale( 1 );
+$xxxlarge: 6 * $space;
-  }
+$xxlarge: 4 * $space;
-  40%
+$xlarge: 2 * $space;
-  {
+$large: 1.5 * $space;
-    transform: scale( .75 );
+$medium: $space;
-  }
+$small: 0.75 * $space;
-  60%
+$tiny: 0.5 * $space;
-  {
+$hair: 0.25 * $space;
-    transform: scale( 1 );
+$nano: 0.125 * $space;
-  }
+
-  80%
+//
-  {
+// Misc
-    transform: scale( .75 );
+//
-  }
+$tao-blue-500: #277EEC;
-  100%
+$font-size-base: 14px;
-  {
+$font-size-h4: floor(($font-size-base * 1.2));
-    transform: scale( .75 );
+
-  }
+$tao-navbar-height: 67px;
+
+
+//
+// Classes
+//
+.tao-header-title {
+  color: $tao-blue-500;
+  font-size: $font-size-h4;
 }
 
-.logo {
+.tao-navbar {
-  animation: heartbeat 1s infinite;
+  background-color: rgba(255, 255, 255, 0.96);
+  min-height: $tao-navbar-height;
+  box-shadow: 0px 1px 6px 0px #888;
+  margin-bottom: 12px;
+  border: 1px solid #e7e7e7;
+}
+
+.tao-grid-navbar {
+  display: grid;
+  grid-template-columns: 10fr 1fr 10fr;
+  grid-column-gap: 8px;
+  width: 100%;
+}
+
+.tao-company-logo {
+  display: block;
+  width: 130px;
+}
+
+.tao-company-logo-mobile {
+  display: none;
+  width: 130px;
+}
+
+@media (max-width: 767px) {
+  .tao-grid-navbar {
+    grid-template-columns: 1fr;
+  }
+
+  .tao-company-logo {
+    display: none;
+  }
+
+  .tao-company-logo-mobile {
+    display: block;
+  }
+
+  .tao-navbar-links {
+    justify-self: left !important;
+  }
 }
 
 .jumbotron {

src/assets/scss/_grid.scss

@@ -0,0 +1,44 @@
+.tao-grid-center-center {
+  justify-self: center;
+  align-self: center;
+}
+
+.tao-grid-center-right {
+  justify-self: right;
+  align-self: center;
+}
+
+.tao-grid-center-left {
+  justify-self: left;
+  align-self: center;
+}
+
+.tao-grid-start-center {
+  justify-self: center;
+  align-self: start;
+}
+
+.tao-grid-end-center {
+  justify-self: center;
+  align-self: end;
+}
+
+.tao-grid-top-right {
+  justify-self: right;
+  align-self: start;
+}
+
+.tao-grid-top-left {
+  justify-self: left;
+  align-self: start;
+}
+
+.tao-grid-bottom-left {
+  justify-self: left;
+  align-self: end;
+}
+
+.tao-grid-bottom-right {
+  justify-self: right;
+  align-self: end;
+}

src/assets/scss/_main.scss

@@ -1,6 +1,8 @@
 
 
-@import 'variables';
+@import
+  'variables',
+  'grid';
 
 @import
   'shared/buttons';

src/assets/scss/_variables.scss

@@ -155,6 +155,6 @@ $font-size-h3:            floor(($font-size-base * 1.3));
 $font-size-h4:            floor(($font-size-base * 1.2));
 $font-size-h5:            floor(($font-size-base * 1.1));
 
-// Custom sizes
+
 
 $tao-navbar-height: 67px;