From 02d926aa3766718f1e733f5d6f46ca74a77656ee Mon Sep 17 00:00:00 2001 From: Dominic Masters Date: Fri, 23 Feb 2018 21:49:53 +1100 Subject: [PATCH] Added Navbar, Header and App --- package.json | 1 + public/App.jsx | 14 +++++++++++ public/components/Header.jsx | 29 ++++++++++++++++++++++ public/components/navigation/Navbar.jsx | 29 ++++++++++++++++++++++ public/styles/components/_app.scss | 15 ++++++++++++ public/styles/components/_header.scss | 12 ++++++++++ public/styles/components/_navbar.scss | 14 +++++++++++ public/styles/elements/_body.scss | 15 ++++++++++++ public/styles/elements/_html.scss | 13 ++++++++++ public/styles/index.scss | 32 +++++++++++++++++++++++++ public/styles/settings/colors.scss | 3 +++ public/styles/tools/_gradients.scss | 13 ++++++++++ 12 files changed, 190 insertions(+) create mode 100644 public/components/Header.jsx create mode 100644 public/components/navigation/Navbar.jsx create mode 100644 public/styles/components/_app.scss create mode 100644 public/styles/components/_header.scss create mode 100644 public/styles/components/_navbar.scss create mode 100644 public/styles/elements/_body.scss create mode 100644 public/styles/elements/_html.scss create mode 100644 public/styles/settings/colors.scss create mode 100644 public/styles/tools/_gradients.scss diff --git a/package.json b/package.json index 00b5aa7..08a0012 100644 --- a/package.json +++ b/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" }, diff --git a/public/App.jsx b/public/App.jsx index d96d440..1127107 100644 --- a/public/App.jsx +++ b/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 (
+
App
) diff --git a/public/components/Header.jsx b/public/components/Header.jsx new file mode 100644 index 0000000..9bf394c --- /dev/null +++ b/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 ( +
+ Lorem +
+ ) + } +} + +export default Header; diff --git a/public/components/navigation/Navbar.jsx b/public/components/navigation/Navbar.jsx new file mode 100644 index 0000000..e638e35 --- /dev/null +++ b/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 ( + + ) + } +} + +export default Navbar; diff --git a/public/styles/components/_app.scss b/public/styles/components/_app.scss new file mode 100644 index 0000000..29966c7 --- /dev/null +++ b/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; +} diff --git a/public/styles/components/_header.scss b/public/styles/components/_header.scss new file mode 100644 index 0000000..56c29b4 --- /dev/null +++ b/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; +} diff --git a/public/styles/components/_navbar.scss b/public/styles/components/_navbar.scss new file mode 100644 index 0000000..694581a --- /dev/null +++ b/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; + +} diff --git a/public/styles/elements/_body.scss b/public/styles/elements/_body.scss new file mode 100644 index 0000000..c9b18e8 --- /dev/null +++ b/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%; +} diff --git a/public/styles/elements/_html.scss b/public/styles/elements/_html.scss new file mode 100644 index 0000000..0e9c827 --- /dev/null +++ b/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%; +} diff --git a/public/styles/index.scss b/public/styles/index.scss index 9f44090..6610e68 100644 --- a/public/styles/index.scss +++ b/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 diff --git a/public/styles/settings/colors.scss b/public/styles/settings/colors.scss new file mode 100644 index 0000000..056021a --- /dev/null +++ b/public/styles/settings/colors.scss @@ -0,0 +1,3 @@ + +$s-color--background-top: #2BF; +$s-color--background-bottom: #FCF; diff --git a/public/styles/tools/_gradients.scss b/public/styles/tools/_gradients.scss new file mode 100644 index 0000000..6f5e45d --- /dev/null +++ b/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+ +}