[#22] inital work on applying bulma ui kit

src/layouts/index.js

@@ -5,7 +5,8 @@ import Helmet from 'react-helmet';
 // import Header from '../components/Header';
 import ContentWrapper from '../components/Wrappers/content-wrapper';
 import Sidebar from '../components/Sidebar/sidebar';
-import './index.scss';
+import '../styles/main.scss';
+import './template-wrapper.scss';
 
 /*
  * In Gatsby convention, src/layouts/ files are used optionally to render

src/layouts/index.scss

@@ -1,62 +1 @@
-// TODO: This should mostly contain imports and the most important default styles
-// TODO: Global variables should be in its own _variables.scss file
-$grey: #fafafa #f5f5f5 #eee #e0e0e0 #bdbdbd #9e9e9e #757575 #616161 #424242 #212121;
-$grey-text: white white white white white black black black black black;
-// $background-color: #fed330;
-// $background-color: linear-gradient(to right, #c33764, #1d2671);
-$background-color: linear-gradient(to right, #41295a, #41295a);
-
-$button-font-size: 1.2rem;
-$button-radius: 4px;
-
-// Clear some user agent styles
-// * {  }
-
-html {
-    font-size: 62.5%;
-    height: 100%;
-    margin: 0;
-    padding: 0;
-    margin: 0 !important;
-    padding: 0 !important;
-}
-
-body {
-    // background: nth($grey, 1);
-    // background: red;
-    // margin: 1rem;
-    // margin: 0 !important;
-    padding: 0 !important;
-    background: $background-color;
-    // border: 5px solid;
-    margin: 8px;
-}
-
-h1 { font-size: 3.2rem; font-style: bold; }
-h2 { font-size: 2.4rem; font-style: bold; }
-h3 { font-size: 2.4rem; }
-h4 { font-size: 1.6rem; }
-h5 { font-size: 1.2rem; }
-h6 { font-size: 1.0rem; }
-
-// button {
-//   background: nth($grey, 9);
-//   border: 1px;
-//   border-radius: $button-radius;
-//   box-shadow: none;
-//   color: nth($grey-text, 1);
-//   font-weight: 600;
-//   padding: 6px;
-// }
-
-.template-wrapper {
-    // background: $background-color;
-    // overflow: auto;
-    display: flex;
-}
-
-// Top spacer div used to move content down to move whole content when reveal menu
-.template-wrapper__top-spacer {
-    // smaller bit of the golden ratio
-    height: (1 - (1vh / 1.62vh)) * 100vh;
-}
+@import '../styles/main.scss';

src/layouts/template-wrapper.scss

@@ -0,0 +1,11 @@
+.template-wrapper {
+    // background: $background-color;
+    // overflow: auto;
+    display: flex;
+}
+
+// Top spacer div used to move content down to move whole content when reveal menu
+.template-wrapper__top-spacer {
+    // smaller bit of the golden ratio
+    height: (1 - (1vh / 1.62vh)) * 100vh;
+}

src/styles/bulma.scss

@@ -0,0 +1,9 @@
+@import 'bulma/bulma';
+@import 'bulma-extensions/extensions';
+
+// Initial Variables
+@import "bulma/sass/utilities/initial-variables";
+@import "bulma/sass/utilities/functions";
+// inital work, doesn't function, fix, use these as guides
+// http://bit.ly/2L3YYyO
+// http://bit.ly/2L1bNdg

src/styles/main.scss

@@ -0,0 +1,53 @@
+// This is where all the global element styles & stylesheet compositions occur
+@import './variables.scss';
+@import './bulma.scss';
+
+// TODO can't get imports to work, fix it and move into own file
+$grey: #fafafa #f5f5f5 #eee #e0e0e0 #bdbdbd #9e9e9e #757575 #616161 #424242 #212121;
+$grey-text: white white white white white black black black black black;
+$background-color: linear-gradient(to right, #41295a, #41295a);
+// $background-color: #fed330;
+// $background-color: linear-gradient(to right, #c33764, #1d2671);
+
+$button-font-size: 1.2rem;
+$button-radius: 4px;
+// Clear some user agent styles
+// * {  }
+
+html {
+    font-size: 62.5%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    margin: 0 !important;
+    padding: 0 !important;
+}
+
+body {
+    // background: nth($grey, 1);
+    // background: red;
+    // margin: 1rem;
+    // margin: 0 !important;
+    padding: 0 !important;
+    background: $background-color;
+    // border: 5px solid;
+    margin: 8px;
+}
+
+h1 { font-size: 3.2rem; font-style: bold; }
+h2 { font-size: 2.4rem; font-style: bold; }
+h3 { font-size: 2.4rem; }
+h4 { font-size: 1.6rem; }
+h5 { font-size: 1.2rem; }
+h6 { font-size: 1.0rem; }
+
+// button {
+//   background: nth($grey, 9);
+//   border: 1px;
+//   border-radius: $button-radius;
+//   box-shadow: none;
+//   color: nth($grey-text, 1);
+//   font-weight: 600;
+//   padding: 6px;
+// }
+