Added Navbar, Header and App

package.json

@@ -25,6 +25,7 @@
   "dependencies": {
     "express": "^4.16.2",
     "mysql-promise": "^4.1.0",
+    "normalize.css": "^8.0.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0"
   },

public/App.jsx

@@ -1,5 +1,18 @@
+/*
+ *  App
+ *    Overall App wrapper, contains a lot of the logic and handling of how the
+ *    site will function and display.
+ *
+ *  Dependencies:
+ *    styles/components/_app.scss
+ *
+ *  Version:
+ *    1.0.0 - 2018/02/23
+ */
 import React from 'react';
 
+import Header from './components/Header';
+
 class App extends React.Component {
   constructor(props) {
     super(props);
@@ -8,6 +21,7 @@ class App extends React.Component {
   render() {
     return (
       <div className="c-app">
+        <Header />
         App
       </div>
     )

public/components/Header.jsx

@@ -0,0 +1,29 @@
+/*
+ *  Header
+ *    Header for page, contains navbar as well as other consistant top of page
+ *    elements.
+ *
+ *  Dependencies:
+ *    styles/components/_header.scss
+ *
+ *  Version:
+ *    1.0.0 - 2018/02/23
+ */
+ 
+import React from 'react';
+
+class Header extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <header className="c-header">
+        Lorem
+      </header>
+    )
+  }
+}
+
+export default Header;

public/components/navigation/Navbar.jsx

@@ -0,0 +1,29 @@
+/*
+ *  Header
+ *    Header for page, contains navbar as well as other consistant top of page
+ *    elements.
+ *
+ *  Dependencies:
+ *    styles/components/_navbar.scss
+ *
+ *  Version:
+ *    1.0.0 - 2018/02/23
+ */
+
+import React from 'react';
+
+class Navbar extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <nav className="c-navbar">
+        This is my navbar
+      </nav>
+    )
+  }
+}
+
+export default Navbar;

public/styles/components/_app.scss

@@ -0,0 +1,15 @@
+/*
+ *  App
+ *    Styles for the App itself
+ *
+ *  Dependencies:
+ *
+ *  Version:
+ *    1.0.0 - 2018/02/23
+ */
+.c-app {
+  width: 100%;
+  min-height: 100%;
+  overflow-x: hidden;
+  position: relative;
+}

public/styles/components/_header.scss

@@ -0,0 +1,12 @@
+/*
+ *  Header
+ *    Styles for header element
+ *
+ *  Dependencies:
+ *
+ *  Version:
+ *    1.0.0 - 2018/02/23
+ */
+.c-header {
+  border: 1px solid red;
+}

public/styles/components/_navbar.scss

@@ -0,0 +1,14 @@
+/*
+ *  Navbar
+ *    Styles for Navbar
+ *
+ *  Dependencies:
+ *
+ *  Version:
+ *    1.0.0 - 2018/02/23
+ */
+.c-navbar {
+  width: 100%;
+  position: fixed;
+  
+}

public/styles/elements/_body.scss

@@ -0,0 +1,15 @@
+/*
+ *  Body
+ *    Base Body Seettings
+ *
+ *  Dependencies:
+ *    styles/settings/colors.scss - Used for colors
+ *    styles/tools/_gradients.scss - Used for background gradients.
+ *
+ *  Version:
+ *    1.0.0 - 2018/02/23
+ */
+body {
+  @include t-gradient-directional($s-color--background-bottom, $s-color--background-top, 45deg);
+  min-height: 100%;
+}

public/styles/elements/_html.scss

@@ -0,0 +1,13 @@
+/*
+ *  HTML
+ *    Base HTML Settings
+ *
+ *  Dependencies:
+ *
+ *  Version:
+ *    1.0.0 - 2018/02/23
+ */
+html {
+  width: 100%;
+  min-height: 100%;
+}

public/styles/index.scss

@@ -1 +1,33 @@
 @charset "UTF-8";
+/*
+ * domsPlace Styles
+ * Copyright 2018 Dominic "YouWish" Masters
+ *
+ * Version:
+ *    0.0.1 - 2018/02/23
+ */
+
+//Settings
+@import './settings/colors.scss';
+
+//Tools
+@import './tools/_gradients.scss';
+
+//Resets
+@import './../../node_modules/normalize.css/normalize.css';
+
+//Elements
+@import './elements/_body.scss';
+@import './elements/_html.scss';
+
+//Objects
+
+//Components
+@import './components/_app.scss';
+@import './components/_header.scss';
+
+//Utilities
+
+//Vendor
+
+//Trumps

public/styles/settings/colors.scss

@@ -0,0 +1,3 @@
+
+$s-color--background-top: #2BF;
+$s-color--background-bottom: #FCF;

public/styles/tools/_gradients.scss

@@ -0,0 +1,13 @@
+/*
+ *  Gradients
+ *    Various cross browser gradients
+ *
+ *  Version:
+ *    1.0.0 - 2018/02/23
+ */
+ @mixin t-gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) {
+  background-repeat: repeat-x;
+  background-image: -webkit-linear-gradient($deg, $start-color, $end-color); // Safari 5.1-6, Chrome 10+
+  background-image: -o-linear-gradient($deg, $start-color, $end-color); // Opera 12
+  background-image: linear-gradient($deg, $start-color, $end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
+}