Cleaned more code, still untested.

public/components/App.jsx

@@ -25,12 +25,15 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { HashRouter, BrowserRouter } from 'react-router-dom';
 
-import Background from '@objects/background/Background';
+import Styles from './App.scss';
+
 import Header from './header/Header';
 import Footer from './footer/Footer';
-import Routes, { RouteWrapper } from './page/Routes';
+import Routes, { RouteWrapper } from './page/route/Routes';
 import Favicon from './Favicon';
 
+import Background from '@objects/background/Background';
+
 //Routes Definitions
 const AppRoutes = (props) => {
   return (
@@ -67,7 +70,7 @@ class App extends React.Component {
     let clazz = "c-app";
 
     //Append any other clazzes there may be.
-    if(className) clazz += " " + className;
+    if(className) clazz += ` ${className}`;
 
     //For testing you can switch the router type
     let RouterType = BrowserRouter;
@@ -75,10 +78,13 @@ class App extends React.Component {
 
     return (
       <RouterType>
-        <div className={ clazz } ref="app">
+        <div {...this.props} className={ clazz } ref="app">
           <Favicon />
           <Header />
+          <main>
             <AppRoutes onEntering={ () => this.onEntering() } />
+          </main>
+          <Footer />
         </div>
       </RouterType>
     );

public/components/App.scss

@@ -8,6 +8,8 @@
  *  Version:
  *    1.0.0 - 2018/05/03
  */
+@import '~@styles/global';
+
 .c-app {
   overflow-x: hidden;//Temporary until I find time to find the overflowing element
 }

public/components/footer/Footer.jsx

@@ -34,7 +34,7 @@ import { PageBoundary } from '@components/page/Page';
 const FooterLink = (props) => {
   let { title, className } = props;
   return (
-    <NavLink {...props} className={"c-footer__link"+(className?` ${className}`:``}>
+    <NavLink {...props} className={"c-footer__link"+(className?` ${className}`:``)}>
       { Language.get(`footer.links.${title}`) }
     </NavLink>
   );
@@ -51,7 +51,7 @@ class Footer extends React.Component {
     let { className } = this.props;
 
     return (
-      <footer {...this.props} className={"c-footer"+(className?` ${className}`:``}>
+      <footer className={"c-footer"+(className?` ${className}`:``)}>
         <div className="c-footer__part">
         </div>
 

public/components/footer/Footer.scss

@@ -11,7 +11,7 @@
  *  Version:
  *    1.0.0 - 2018/05/16
  */
-@import '@styles/global';
+@import '~@styles/global';
 
 $c-footer--link-color: red;
 $c-footer--link-hover-color: blue;
@@ -22,7 +22,7 @@ $c-footer--link-hover-color: blue;
   padding-bottom: 10em;
   position: relative;
   overflow: hidden;
-  background-image: url('@images/banners/palms.svg');
+  background-image: url('~@assets/images/banners/palms.svg');
   background-size: cover;
 
   &__inner {

public/components/nav/menu/HamburgerMenu.scss

@@ -10,7 +10,7 @@
  *  Version:
  *    1.1.0 - 2018/10/23
  */
-@import '@styles/global';
+@import '~@styles/global';
 
 $c-hamburger-menu--max: 200%;
 $c-hamburger-menu--pos-x: 100%;
@@ -65,11 +65,11 @@ $c-hamburger-menu--pos-y: 0%;
     }
 
     &--home {
-      background-image: url('@assets/images/patterns/game-show.svg');
+      background-image: url('~@assets/images/patterns/game-show.svg');
     }
 
     &--contact {
-      background-image: url('@assets/images/patterns/lemon-triangle.svg');
+      background-image: url('~@assets/images/patterns/lemon-triangle.svg');
     }
 
     &:hover:before {

public/components/nav/navbar/Navbar.jsx

@@ -25,9 +25,14 @@ import React from 'react';
 import { withRouter } from 'react-router';
 import { connect } from 'react-redux';
 import { NavLink } from 'react-router-dom'
-import PageBoundary from '@components/page/PageBoundary';
+
+import Styles from './Navbar.scss';
+
 import Language from '@public/language/Language';
+
+import { PageBoundary } from '@components/page/Page';
 import HamburgerMenu from './../menu/HamburgerMenu';
+
 import Image from '@objects/image/Image';
 
 const NavbarLink = function(props) {

public/components/nav/navbar/Navbar.scss

@@ -12,6 +12,8 @@
  *  Version:
  *    1.1.0 - 2018/08/14
  */
+@import '~@styles/global';
+
 $c-navbar--link-thickness: 5px;
 
 .c-navbar {
@@ -26,8 +28,8 @@ $c-navbar--link-thickness: 5px;
 
 
   &__nav {
-    @extend %t-flexbox;
+    display: flex;
-    @include t-align-items(stretch);
+    align-items: stretch;
     @extend %t-dp--shadow;
     background: $s-color--navbar;
     color: white;
@@ -48,7 +50,7 @@ $c-navbar--link-thickness: 5px;
 
   //Links
   &__link {
-    @include t-align-items(center);
+    align-items: center;
     @extend %s-font--style-button;
     display: none;
     position: relative;
@@ -62,7 +64,7 @@ $c-navbar--link-thickness: 5px;
       height: 0px;
       left: 0;
       bottom: 0px;
-      @include t-translate-y(100%)
+      transform: translateY(100%);
       transition: height 0.2s $s-animation--ease-out;
 
       content: "";
@@ -96,7 +98,7 @@ $c-navbar--link-thickness: 5px;
     }
 
     &__link {
-      @include t-flexbox();
+      display: flex;
     }
   }
 

public/components/page/Page.jsx

@@ -24,9 +24,15 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { Helmet } from "react-helmet";
-import PageBoundary from './PageBoundary';
+
+import Styles from './Page.scss';
+
+//Publics
 import Language from '@public/language/Language';
 
+//Components
+import PageBoundary from './boundary/PageBoundary';
+
 class Page extends React.Component {
   constructor(props) {
     super(props);

public/components/page/Page.scss

@@ -8,8 +8,11 @@
  *  Version:
  *    1.0.0 - 2018/05/05
  */
+@import '~@styles/global';
+
 .c-page {
-  @include t-flex-grow(1);
+  flex-grow: 1;
+
   &__boundary {
     max-width: $s-screen-boundary;
     margin: 0 auto;

public/components/page/boundary/PageBoundary.jsx

@@ -23,14 +23,22 @@
 
 import React from 'react';
 
-export default function(props) {
+import Styles from './PageBoundary';
-  let clazzes = "c-page__boundary";
+
+export default (props) => {
+  let newProps = { ...props };
+  let { full, small, className } = props;
+
+  delete newProps.full;
+  delete newProps.small;
+
+  let clazzes = "c-page-boundary";
   if(props.full) clazzes += " is-full";
   if(props.small) clazzes += " is-small";
   if(props.className) clazzes += " " + props.className;
 
   return (
-    <div className={ clazzes }>
+    <div {...newProps} className={ clazzes }>
       { props.children }
     </div>
   );

public/components/page/boundary/PageBoundary.scss

@@ -0,0 +1,22 @@
+/*
+ *  PageBoundary
+ *    Styles for the Page Boundaries
+ *
+ *  Dependencies:
+ *
+ *  Version:
+ *    1.0.0 - 2018/10/23
+ */
+.c-page-boundary {
+  max-width: $s-screen-boundary;
+  margin: 0 auto;
+
+  &.is-full {
+    position: relative;
+    height: 100%;
+  }
+
+  &.is-small {
+    max-width: $s-screen-boundary / 2;
+  }
+}

public/components/page/route/Routes.jsx

@@ -28,9 +28,6 @@ import PropTypes from 'prop-types'
 import { HashRouter, Route, Switch } from 'react-router-dom';
 import Loadable from 'react-loadable';
 
-import Header from './../header/Header';
-import Footer from './../footer/Footer';
-
 const PageLoading = (props) => {
   if(props.error) return <span>Loading Error</span>;
   if(props.pastDelay) return <span>Loading...</span>;
@@ -38,50 +35,27 @@ const PageLoading = (props) => {
 };
 
 export const RouteWrapper = (props) => {
-  return (
+  let { page } = props.page;
-    <Route {...props} render={() => {
+
+  let render = () => {
     let CustomLoadable = Loadable({
-          loader: props.page,
+      loader: page,
       loading: PageLoading
     });
-        let CustomTag = <span>Not loading</span>;
+    return <CustomLoadable />
-        return (
-          <main className="c-main">
-            <CustomLoadable />
-            <Footer />
-          </main>
-        );
-    }}/>
-  );
   };
 
-class Routes extends React.Component {
+  return <Route {...props} render={render} />;
-  constructor(props) {
+};
-    super(props);
-  }
 
-  render() {
+export default withRouter((props) => {
   const { match, location, history, children } = this.props;
 
   return (
     <Route>
-        {/*<TransitionGroup className="o-page-transition__container">
-          <CSSTransition
-            key={ location.pathname }
-            timeout={1000}
-            classNames="o-page-transition"
-            mountOnEnter={ true }
-            unmountOnExit={ true }
-            onEntering={ this.props.onEntering }
-          >*/}
       <Switch location={ location }>
         { children }
       </Switch>
-          {/*</CSSTransition>
-        </TransitionGroup>*/}
     </Route>
   );
-  }
+});
-}
-
-export default withRouter(Routes);

public/components/section/Section.jsx

@@ -23,27 +23,25 @@
 
 import React from 'react';
 
-export default class Section extends React.Component {
+import Styles from './Section';
-  constructor(props) {
+
-    super(props);
+export default (props) => {
-  }
+  let newProps = {...props};
+  let { full, className, children } = props;
+
+  ["full"].forEach(e => delete newProps[e]);
+
+  let clazz = "c-section";
+  if(full) clazz += " is-full";
+  if(className) clazz += ` ${className}`;
 
-  render() {
   return (
-      <section className={
+    <section {...newProps} className={clazz} />
-          "c-section" +
-          (this.props.full?" is-full":"") +
-          (this.props.className ? " "+this.props.className : "")
-      }>
-        { this.props.children }
-      </section>
   );
 }
-}
 
 import BodySection from './body/BodySection';
 import ClearSection from './layout/ClearSection';
-import FeaturedBlogSection from './blog/FeaturedBlogSection';
 import ImageSection from './image/ImageSection';
 import SplitSection, { Split }  from './layout/SplitSection';
 import VideoSection from './video/VideoSection';
@@ -51,7 +49,6 @@ import VideoSection from './video/VideoSection';
 export {
   BodySection,
   ClearSection,
-  FeaturedBlogSection,
   ImageSection,
   SplitSection,
   Split,

public/components/section/Section.scss

@@ -7,6 +7,8 @@
  *  Version:
  *    1.0.0 - 2018/05/07
  */
+@import '~@styles/global';
+
 .c-section {
   //border: 1px solid red;
   width: 100%;

public/components/section/blog/FeaturedBlogSection.jsx

@@ -1,66 +0,0 @@
-// Copyright (c) 2018 Dominic Masters
-//
-// MIT License
-//
-// Permission is hereby granted, free of charge, to any person obtaining
-// a copy of this software and associated documentation files (the
-// "Software"), to deal in the Software without restriction, including
-// without limitation the rights to use, copy, modify, merge, publish,
-// distribute, sublicense, and/or sell copies of the Software, and to
-// permit persons to whom the Software is furnished to do so, subject to
-// the following conditions:
-//
-// The above copyright notice and this permission notice shall be
-// included in all copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
-// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
-// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
-// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
-// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
-import React from 'react';
-import Section from './../Section';
-import { PageBoundary } from '@components/page/Page';
-
-const FeaturedArticle = function(props) {
-  let clazz = "c-featured-blog-section__article";
-
-  let internals;
-  internals = "test";
-
-  if(props.contain) {
-    internals = <PageBoundary>{internals}</PageBoundary>
-    clazz += " is-contained";
-  }
-
-  return (
-    <article className={ clazz }>
-      { internals }
-    </article>
-  );
-}
-
-export default (props) => {
-  let firstArticle;
-  let articles = [];
-  for(let i = 0; i < props.data.length; i++) {
-    let art = <FeaturedArticle data={props.data[i]} key={i} contain />
-    if(i === 0) {
-      firstArticle = art;
-      continue;
-    }
-    articles.push(art);
-  }
-
-  return (
-    <Section className="c-featured-blog-section">
-      { firstArticle }
-      <PageBoundary className="c-featured-blog-section__articles">
-        { articles }
-      </PageBoundary>
-    </Section>
-  );
-};

public/components/section/body/BodySection.jsx

@@ -22,11 +22,14 @@
 // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 import React from 'react';
+
+import Styles from './BodySection.scss';
+
 import Section from './../Section';
 
 export default function(props) {
   let clazz = "c-body-section";
-  if(props.className) clazz += " " + props.className;
+  if(props.className) clazz += ` ${props.className}`;
 
   return (
     <Section {...props} className={clazz} />

public/components/section/body/BodySection.scss

@@ -9,6 +9,8 @@
  *  Version:
  *    1.0.0 - 2018/05/13
  */
+@import '~@styles/global';
+
 $c-body-section--padding: 1em;
 
 .c-body-section {

public/components/section/image/ImageSection.jsx

@@ -22,7 +22,10 @@
 // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 import React from 'react';
+import Styles from './ImageSection.scss';
+
 import Section from './../Section';
+
 import Image from '@objects/image/Image';
 
 export default function(props) {

public/components/section/image/ImageSection.scss

@@ -7,6 +7,8 @@
  *  Version:
  *    1.1.0 - 2018/08/14
  */
+@import '~@styles/global';
+
 .c-image-section {
 
   &__image {

public/components/section/layout/ClearSection.jsx

@@ -22,6 +22,9 @@
 // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 import React from 'react';
+
+import Styles from './ClearSection.scss';
+
 import Section from './../Section';
 
 export default (props) => {

public/components/section/layout/ClearSection.scss

@@ -8,6 +8,8 @@
  *  Version:
  *    1.0.0 - 2018/06/05
  */
+@import '~@styles/global';
+
 .c-clear-section {
   width: 100%;
   padding-bottom: 15%;

public/components/section/layout/SplitSection.jsx

@@ -22,32 +22,36 @@
 // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 import React from 'react';
+
+import Styles from './SplitSection.scss';
+
 import Section from './../Section';
 
 export default (props) => {
-  let aligned = "stretched";
+  let { align, className } = props;
-  if(props.align) {
+  let newProps = {...props};
-    aligned = props.align;
-  }
 
-  let clazz = "c-split-section is-" + aligned;
+  align = align || "stretched";
-  if(props.className) clazz += " " + props.className;
 
+  let clazz = "c-split-section is-" + align;
+  if(className) clazz += ` ${className}`;
 
   return (
-    <Section {...props} className={clazz} />
+    <Section {...newProps} className={clazz} />
   )
 };
 
 const Split = function(props) {
+  let { padded, className, children } = props;
+
   let clazz = "c-split-section__split";
 
-  if(props.padded) clazz += " is-padded";
+  if(padded) clazz += " is-padded";
-  if(props.className) clazz += " "+props.className;
+  if(className) clazz += ` ${className}`;
 
   return (
     <div className={clazz}>
-      { props.children }
+      { children }
     </div>
   );
 }

public/components/section/layout/SplitSection.scss

@@ -8,18 +8,20 @@
  *  Version:
  *    1.0.0 - 2018/05/28
  */
+@import '~@styles/global.scss';
+
 $c-split-section__split--padding: 1em;
 
 .c-split-section {
-  @extend %t-flexbox;
+  display: flex;
-  @include t-flex-wrap(wrap);
+  flex-wrap: wrap;
 
   &.is-stretched {
-    @include t-align-items(stretch);
+    align-items: stretch;
   }
 
   &.is-center {
-    @include t-align-items(center);
+    align-items: center;
   }
 
   &__split {
@@ -31,6 +33,6 @@ $c-split-section__split--padding: 1em;
   }
 
   @include t-media-query($s-small-up) {
-    @include t-flex-wrap(nowrap);
+    flex-wrap: nowrap;
   }
 }

public/components/section/video/VideoSection.jsx

@@ -22,29 +22,35 @@
 // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 import React from 'react';
+
+import Styles from './VideoSection.scss';
+
 import Section from './../Section';
+
 import Video from '@objects/video/Video';
 import Loader from '@objects/loading/Loader';
 
-class VideoSection extends React.Component {
+export default (props) => {
-  constructor(props) {
+  let { full, className, sources } = props;
-    super(props);
+  let videoProps = {...props};
-  }
+  let sectionProps = {...props};
+
+
+  [
+    "autoPlay", "fill", "loop", "sources"
+  ].forEach(e => delete sectionProps[e]);
+
+  delete videoProps.children;
+
+  if(typeof props.autoPlay === typeof undefined) props.autoPlay = true;
+  if(typeof props.loop === typeof undefined) props.loop = true;
+  if(typeof props.fill === typeof undefined) props.fill = true;
+
 
-  render() {
   return (
-      <Section full={this.props.full} className="c-video-section">
+    <Section {...sectionProps} className={"c-video-section"+(className?` ${className}`:``)}>
-        <Video
+      <Video {...videoProps} className="c-video-section__video" sources={ sources ? sources : props } />
-          className="c-video-section__video"
+      { children }
-          autoPlay
-          loop
-          fill
-          sources={ this.props.sources ? this.props.sources : this.props }
-        />
-        { this.props.children }
     </Section>
   );
 }
-}
-
-export default VideoSection;

public/components/section/video/VideoSection.scss

@@ -8,6 +8,8 @@
  *  Version:
  *    1.0.0 - 2018/05/03
  */
+@import '~@styles/global';
+
 .c-video-section {
   position: relative;
 

public/styles/components/_hamburger-menu.scss

@@ -1,104 +0,0 @@
-/*
- *  Hamburger Menu
- *    Mobile-Centric openable menu with a hamburger icon to toggle.
- *
- *  Dependencies:
- *    styles/settings/animation.scss
- *    styles/settings/colors.scss
- *    styles/settings/z.scss
- *
- *  Version:
- *    1.0.0 - 2018/06/12
- */
-$c-hamburger-menu--max: 200%;
-$c-hamburger-menu--pos-x: 100%;
-$c-hamburger-menu--pos-y: 0%;
-@include t-keyframes(c-hamburger-menu--open) {
-  from { clip-path: circle(0% at $c-hamburger-menu--pos-x $c-hamburger-menu--pos-y); }
-  to { clip-path: circle($c-hamburger-menu--max at $c-hamburger-menu--pos-x $c-hamburger-menu--pos-y); }
-}
-
-@include t-keyframes(c-hamburger-menu--close) {
-  from { clip-path: circle($c-hamburger-menu--max at $c-hamburger-menu--pos-x $c-hamburger-menu--pos-y); }
-  to { clip-path: circle(0% at $c-hamburger-menu--pos-x $c-hamburger-menu--pos-y); }
-}
-
-.c-hamburger-menu {
-
-  &__menu {
-    display: none;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: $s-color--menu__background;
-    transition: all 1s $s-animation--ease-out;
-
-    z-index: $s-z--menu;
-
-    @include t-animation-fill-mode(forwards);
-    @include t-animation-timing-function($s-animation--ease-out);
-    @include t-animation-duration(0.4s);
-  }
-
-  &__links {
-    @extend %t-list-blank;
-    padding-top: 3em;
-  }
-
-  &__link {
-    @extend %t-list-litem-blank;
-    display: block;
-    font-size: 1.25em;
-    width: 100%;
-    position: relative;
-    background-size: 150%;
-
-    &-link {
-      position: relative;
-      display: block;
-      padding: 1.5em;
-    }
-
-    &--home {
-      background-image: url($s-asset--directory+'images/patterns/game-show.svg');
-    }
-
-    &--contact {
-      background-image: url($s-asset--directory+'images/patterns/lemon-triangle.svg');
-    }
-
-    &:hover:before {
-      //@include t-translate-x(5%);  Disabled due to not being needed on mobile
-    }
-  }
-
-  &__button {
-    position: relative;//Helps us win the Z-Fight
-    width: 100%;
-    height: 100%;
-    padding: 0.5em;
-    cursor: pointer;
-    z-index: $s-z--menu-button;
-  }
-
-  &__icon {
-    display: block;
-  }
-
-
-  &.is-open {
-    .c-hamburger-menu__menu {
-      display: block;
-      @include t-animation-name(c-hamburger-menu--open);
-    }
-  }
-
-  &.is-closing {
-    .c-hamburger-menu__menu {
-      display: block;
-      @include t-animation-name(c-hamburger-menu--close);
-    }
-  }
-}

public/styles/components/_main.scss

@@ -1,8 +0,0 @@
-/*
- *  Main
- *    Styles for the main container
- *
- *  Version:
- *    1.0.0 - 2018/05/07
- */
-.c-main {}

webpack.config.js

@@ -54,22 +54,14 @@ module.exports = {
                 {
                   "targets": {
                     "node": "current",
-                    "browsers": [
+                    "browsers": [ "Chrome >= 41", "FireFox >= 44", "Safari >= 7", "Explorer 11", "last 4 Edge versions" ]
-                      "Chrome >= 41",
-                      "FireFox >= 44",
-                      "Safari >= 7",
-                      "Explorer 11",
-                      "last 4 Edge versions"
-                    ]
                   },
                   "useBuiltIns": false
                 }
               ],
               "@babel/preset-react"
             ],
-            "plugins": [
+            "plugins": [ '@babel/plugin-syntax-dynamic-import' ]
-              '@babel/plugin-syntax-dynamic-import'
-            ]
           }
         }
       },