Provide the basic layout framework for UX/UI

gui/app/styles/base.scss

@@ -10,20 +10,21 @@
 // https://documize.com
 
 html {
-	height: 100%;
-	width: 100%;
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
     -ms-overflow-style: -ms-autohiding-scrollbar;
+	text-rendering: optimizeLegibility;
+	height: 100%;
+	width: 100%;
 	overflow-y: scroll;
 	font-size: 0.875rem;
 }
 
 body {
+	display: flex;
 	height: 100%;
-	min-height: 100%;
-	width: 100%;
-	// overflow-y: scroll;
+	// height: 100vh;
+	flex-direction: column;
 }
 
 a {

gui/app/styles/color.scss

@@ -16,8 +16,8 @@ $color-primary-light: #E6F1F8;
 $color-link: #348A37;
 
 // theme purple
-// $color-primary: #280A42;
-// $color-primary-light: #F7F2FF;
+$color-primary: #280A42;
+$color-primary-light: #F7F2FF;
 
 // black, white
 $color-black: #000000;

gui/app/styles/layout/all.scss

@@ -1,4 +1,5 @@
-@import "top-bar.scss";
-@import "sidebar.scss";
-@import "sub-nav.scss";
+@import "layout-master.scss";
+@import "layout-topbar.scss";
+@import "layout-sidebar.scss";
+@import "layout-footer.scss";
 

gui/app/styles/layout/layout-footer.scss

@@ -0,0 +1,9 @@
+.footer {
+	background-color: $color-off-white;
+	background-color: $color-primary-light;
+	// border-top: 1px solid $color-gray-light2;
+	color: $color-gray;
+	font-weight: 500;
+	font-size: 0.9rem;
+	padding: 10px 2rem;
+}

gui/app/styles/layout/layout-master.scss

@@ -0,0 +1,73 @@
+.layout-header,
+.layout-footer {
+	flex: 0 0 auto;
+}
+
+.layout-body {
+	display: flex;
+	flex: 1 0 auto;
+	flex-direction: column;
+	padding: 2rem;
+}
+
+.layout-content {
+	margin-top: 2rem;
+}
+
+.layout-sidebar {
+	order: -1;
+	background-color: $color-gray-light2;
+	padding: 1rem;
+}
+
+footer {
+	margin: auto auto 0 auto;
+	position: sticky;
+    bottom: 0;
+}
+
+@media (min-width: 720px) {
+	.layout-body {
+		flex-direction: row;
+	}
+
+	.layout-content {
+		flex: 1;
+		padding: 0 2rem;
+		margin: 0;
+	}
+
+	.layout-sidebar {
+		flex: 0 0 20rem;
+		height: calc(100vh - 145px);
+		overflow-x: hidden;
+		overflow-y: scroll;
+	}
+}
+
+@media (min-width: 1200px) {
+	.layout-sidebar {
+		flex: 0 0 30rem;
+	}
+
+	.layout-content {
+		padding: 0 2rem 0 3rem;
+	}
+}
+
+@media (min-width: 1800px) {
+	.layout-sidebar {
+		flex: 0 0 35rem;
+	}
+
+	.layout-content {
+		padding: 0 2rem 0 4rem;
+	}
+}
+
+@media (max-width: 576px) {
+	footer {
+		position: relative;
+		bottom: auto;
+	}
+}

gui/app/styles/layout/layout-sidebar.scss

@@ -0,0 +1,13 @@
+.sidebar {
+	padding: 2rem;
+	background-color: $color-white;
+	// border: 1px solid $color-border;
+	// @include border-radius(4px);
+
+	// @include border-radius(4px);
+	// border: 1px solid $color-gray-light2;
+	// padding: 1rem;
+	// // padding: 30px 20px;
+	// height: calc(100vh - 145px);
+	// width: 350px;
+}

gui/app/styles/layout/layout-topbar.scss

@@ -5,7 +5,7 @@
 .top-bar {
 	background-color: $color-primary;
 	color: $color-white;
-	padding: 0 30px;
+	padding: 0 2rem;
 	font-size: 1rem;
 	height: 50px;
 
@@ -69,9 +69,10 @@
 		> i {
 			font-size: 1.8rem;
 			line-height: 2.1rem;
-			padding: 3px 5px 0 5px;
+			padding: 0px 3px 0px 3px;
 			color: $color-primary-light;
 			cursor: pointer;
+			vertical-align: sub;
 		}
 
 		&:hover {

gui/app/styles/layout/sidebar.scss

@@ -1,8 +0,0 @@
-.sidebar {
-	height: calc(100vh - 50px);
-	// width: 300px;
-	width: 100%;
-	background-color: $color-gray-light3;
-	border-right: 1px solid $color-gray-light2;
-	padding: 30px 20px;
-}