Generally trying to improve performance.

private/webpack/WebpackCompiler.js

@@ -79,7 +79,8 @@ module.exports = (isDev) => {
         '@assets': `${base}/public/assets`,
         '@pages': `${base}/public/pages`,
         '@common': `${base}/common`,
-        '@styles': `${base}/public/styles`
+        '@styles': `${base}/public/styles`,
+        '@sections': `${base}/public/components/section`
       }
     },
 

public/assets/images/branding/java/java-logo.svg

@@ -1,5 +1,3 @@
-<?xml version="1.0" encoding="windows-1252"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="400px" viewBox="0 0 300 400" style="enable-background:new 0 0 300 550;" xml:space="preserve">
 <path style="fill:#5382A1;" d="M102.681,291.324c0,0-14.178,8.245,10.09,11.035c29.4,3.354,44.426,2.873,76.825-3.259  c0,0,8.518,5.341,20.414,9.967C137.38,340.195,45.634,307.264,102.681,291.324"/>
 <path style="fill:#5382A1;" d="M93.806,250.704c0,0-15.902,11.771,8.384,14.283c31.406,3.24,56.208,3.505,99.125-4.759  c0,0,5.936,6.018,15.27,9.309C128.771,295.215,30.962,271.562,93.806,250.704"/>

public/components/App.jsx

@@ -39,6 +39,7 @@ const AppRoutes = (props) => {
       <RouteWrapper exact path="/" page={ () => import('@pages/home/HomePage') } />
       <RouteWrapper exact path="/contact" page={ () => import ('@pages/contact/ContactPage') } />
       <RouteWrapper exact path="/legal/privacy" page={ () => import('@pages/legal/privacy/PrivacyPolicyPage') } />
+      <RouteWrapper exact path="/blog" page={ () => import('@pages/blog/BlogPage') } />
     </Routes>
   );
 };

public/components/App.scss

@@ -2,11 +2,8 @@
  *  App
  *    App styles for the app container.
  *
- *  Dependencies:
- *    styles/tools/flex.scss
- *
  *  Version:
- *    1.0.0 - 2018/05/03
+ *    1.1.0 - 2018/10/30
  */
 @import '~@styles/global';
 

public/components/footer/Footer.scss

@@ -5,11 +5,10 @@
  *  Dependencies:
  *    styles/settings/colors.scss
  *    styles/settings/typography.scss
- *    styles/tools/flex.scss
  *    styles/tools/_box-shadow.scss
  *
  *  Version:
- *    1.0.0 - 2018/05/16
+ *    1.1.0 - 2018/10/30
  */
 @import '~@styles/global';
 

public/components/nav/navbar/Navbar.jsx

@@ -66,6 +66,7 @@ const Navbar = props => {
 
           {/* Desktop / Tablet Screen Links */}
           <NavbarLink to="/" title={lang.navbar.home} exact />
+          <NavbarLink to="/blog" title={lang.navbar.blog} exact />
           <NavbarLink to="/contact" title={lang.navbar.contact} exact />
 
           {/* Hamburger Menu for smaller screens */}

public/components/nav/navbar/Navbar.scss

@@ -6,7 +6,6 @@
  *    styles/settings/colors.scss
  *    styles/settings/typography.scss
  *    styles/settings/z.scss
- *    styles/tools/flex.scss
  *    styles/tool/list.scss
  *
  *  Version:

public/components/section/blog/article/FeaturedArticleSection.jsx

@@ -0,0 +1,53 @@
+// 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 '@components/section/Section';
+
+import Image from '@objects/image/Image';
+import ContentBox from '@objects/content/box/ContentBox';
+import { Title, Paragraph } from '@objects/typography/Typography';
+
+import Styles from './FeaturedArticleSection.scss';
+
+export default props => {
+  let { article } = props;
+
+  return (
+    <Section className="c-featured-article">
+      <Image
+        src={ require('@assets/images/photo.jpg') }
+        className="c-featured-article__image"
+      />
+      <Title className="c-featured-article__title">
+        { article.title }
+      </Title>
+
+      <Paragraph className="c-featured-article__description">
+        { article.shortDescription }
+      </Paragraph>
+    </Section>
+  );
+};

public/components/section/blog/article/FeaturedArticleSection.scss

@@ -0,0 +1,43 @@
+/*
+ *  Featured Blog Section
+ *    Section for featuring a large blog item.
+ *
+ *  Version:
+ *    1.0.0 - 2018/10/30
+ */
+@import '~@styles/global';
+
+$c-featured-article--background: rgba(0,0,0,0.5);
+$c-featured-article--color: white;
+$c-featured-article--padding: 15px;
+
+.c-featured-article {
+  position: relative;
+
+  &__image {
+    display: block;
+    width: 100%;
+    min-height: 75vh;
+    object-fit: cover;
+  }
+
+  &__title,
+  &__description {
+    position: absolute;
+    margin: 0;
+    padding: 0.25em;
+    color: $c-featured-article--color;
+    background: $c-featured-article--background;
+  }
+
+  &__title {
+    top: 2.5em;
+    left: 0.25em;
+  }
+
+  &__description {
+    bottom: 0.5em;
+    right: 0.5em;
+    max-width: 250px;
+  }
+}

public/components/section/image/ImageSection.jsx

@@ -32,13 +32,14 @@ export default props => {
   let sectionProps = {...props};
   let imageProps = {...props};
 
-  let { image, background, children, className } = props;
+  let { image, background, children, className, imageClassName } = props;
 
-  ["children", "background", "loadable"].forEach(e => delete sectionProps[e]);
+  ["children", "background", "loadable", "imageClassName"].forEach(e => delete sectionProps[e]);
-  ["image", "full", "children", "background"].forEach(e => delete imageProps[e]);
+  ["image", "full", "children", "background", "imageClassName"].forEach(e => delete imageProps[e]);
 
   let clazz = "c-image-section";
-  image = image || <Image {...imageProps} className="c-image-section__image" />;
+  let imageClazz = `c-image-section__image ${imageClassName||""}`;
+  image = image || <Image {...imageProps} className={imageClazz} />;
 
   if(className) clazz += ` ${className}`;
   if(background) clazz += " is-background";

public/components/section/layout/SplitSection.scss

@@ -2,9 +2,6 @@
  *  Split section
  *    Simple Section that is split into multiple columns
  *
- *  Dependencies:
- *    styles/tools/_flex.scss
- *
  *  Version:
  *    1.0.0 - 2018/05/28
  */

public/language/Language.jsx

@@ -23,7 +23,7 @@
 
 import React from 'react';
 import { connect } from 'react-redux';
-import LanguageActions from './../actions/LanguageActions';
+import * as LanguageActions from './../actions/LanguageActions';
 
 import enAU from './en-AU.jsx';
 

public/language/en-AU.jsx

@@ -12,6 +12,7 @@ export default {
 
   "navbar": {
     "home": "Home",
+    "blog": "Blog",
     "contact": "Contact"
   },
 
@@ -162,7 +163,7 @@ export default {
             </p>
           </Fragment> ); }
         },
-        "footer": "Want me for your next project?",
+        "footer": "Want to get in touch?",
         "footerButton": "Contact Me"
       }
     },
@@ -213,6 +214,10 @@ export default {
 
     "loading": {
       "title": "Please Wait..."
+    },
+
+    "blog": {
+      "title": "Blog"
     }
   },
 

public/objects/content/box/FloatingContentBox.jsx

@@ -23,10 +23,10 @@
 
 import React from 'react';
 
-import Styles from './FloatingContentBox.scss';
-
 import ContentBox from './ContentBox';
 
+import Styles from './FloatingContentBox.scss';
+
 export default (props) => {
   let newProps = {...props};
   let { position, size, children, className } = props;

public/objects/window/_window95.scss

@@ -218,8 +218,8 @@ $o-window--one-third: #{"33.333333333%"};//I needed greater accuracy than SCSS p
   }
 
   &__address-bar {
-    @extend %t-flexbox;
+    display: flex;
-    @include t-align-items(center);
+    align-items: center;
 
     &-title {
       display: block;
@@ -227,7 +227,7 @@ $o-window--one-third: #{"33.333333333%"};//I needed greater accuracy than SCSS p
     }
 
     &-frame {
-      @include t-flex-basis(100%);
+      flex-basis: 100%;
     }
   }
 

public/pages/blog/BlogPage.jsx

@@ -0,0 +1,46 @@
+// 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 { withLanguage } from '@public/language/Language';
+import Page, { PageBoundary } from '@components/page/Page';
+
+import FeaturedArticleSection from '@sections/blog/article/FeaturedArticleSection';
+
+const TestBlogData = {
+  handle: "test-blog",
+  title: "Test Blog Article",
+  shortDescription: "Read how the latest lorem ipsum is dolor sit amet for business owners."
+};
+
+export default withLanguage(props => {
+  let { lang } = props;
+
+  return (
+    <Page style="blog-page" className="p-blog-page" title={ lang.pages.blog.title }>
+      {/* First (Featured) Blog */}
+      <FeaturedArticleSection article={ TestBlogData } />
+    </Page>
+  );
+});

public/pages/blog/BlogPage.scss

@@ -0,0 +1,7 @@
+/*
+ *  Blog Page
+ *    Styles for the Blog Landing Page
+ *
+ *  Version:
+ *    1.0.0 - 2018/10/30
+ */

public/pages/home/HomePage.jsx

@@ -22,8 +22,10 @@
 // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 import React from 'react';
-import Page from '@components/page/Page';
 
+import Styles from './HomePage.scss';
+
+import Page from '@components/page/Page';
 import BannerSection from './sections/BannerSection';
 import PromoVideoSection from './sections/PromoVideoSection';
 import ProgrammingSection from './sections/ProgrammingSection';
@@ -38,10 +40,6 @@ export default props => {
       { /* Banner */ }
       <BannerSection />
 
-      { /* Promo Video
-      <PromoVideoSection />
-      */ }
-
       {/* Programming */}
       <ProgrammingSection />
 

public/pages/home/HomePage.scss

@@ -4,17 +4,25 @@
  *
  *  Dependencies:
  *    styles/settings/responsive.scss
- *    styles/tools/_flex.scss
  *    styles/tools/_responsive.scss
  *
  *  Version:
  *    1.1.0 - 2018/08/14
  */
+@import '~@styles/global';
+
 .p-home-page {
+  &__banner {
+    &-image {
+      object-fit: cover;
+
+      height: 80vh;
+    }
+  }
+
   &__banner,
   &__promo {
     position: relative;
-    //@extend %t-dp--shadow-3d;
   }
 
   &__promo {
@@ -22,15 +30,15 @@
     background-size: 150% auto;
 
     &-video {
-      background-image: url($s-asset--directory+'images/patterns/florida.svg');
+      background-image: url('~@assets/images/patterns/florida.svg');
     }
   }
 
   &__brands {
-    @extend %t-flexbox;
+    display: flex;
-    @include t-align-items(stretch);
+    align-items: stretch;
-    @include t-justify-content(space-between);
+    justify-content: space-between;
-    @include t-flex-wrap(wrap);
+    flex-wrap: wrap;
 
     &-title {
     }

public/pages/home/sections/BannerSection.jsx

@@ -27,7 +27,6 @@ import { PageBoundary } from '@components/page/Page';
 import { ImageSection } from '@components/section/Section';
 import FloatingContentBox from '@objects/content/box/FloatingContentBox';
 import { Title, Subtitle } from '@objects/typography/Typography';
-import ElementScrollFader from '@objects/animation/fade/ElementScrollFader';
 
 
 export default withLanguage(props => {
@@ -36,6 +35,7 @@ export default withLanguage(props => {
   return (
     <ImageSection
       className="p-home-page__banner"
+      imageClassName="p-home-page__banner-image"
       src={ require('@assets/images/banners/about/glasses.svg') }
       alt="domsPlace"
       width="2400"
@@ -44,10 +44,8 @@ export default withLanguage(props => {
     >
       <PageBoundary full>
         <FloatingContentBox position="middle center" size="large" className="u-text-center">
-          <ElementScrollFader from="bottom" >
           <Title>{ lang.pages.home.banner.title }</Title>
-            <Subtitle className="u-responsive--small-up">{ lang.pages.home.banner.subtitle }</Subtitle>
+          <Subtitle>{ lang.pages.home.banner.subtitle }</Subtitle>
-          </ElementScrollFader>
         </FloatingContentBox>
       </PageBoundary>
     </ImageSection>

public/pages/home/sections/PlatformsSection.jsx

@@ -32,13 +32,14 @@ import Video from '@objects/video/Video';
 import { Title, Subtitle, Paragraph, Heading1 } from '@objects/typography/Typography';
 import ElementScrollFader from '@objects/animation/fade/ElementScrollFader';
 
-const Platform = (props) => {
+const Platform = props => {
+  let { src, to, title } = props;
   let children;
-  let image = <Image src={props.src} loadable className="p-home-page__brands-image" width="96" height="96" />;
+  let image = <Image src={ src } loadable className="p-home-page__brands-image" width="96" height="96" maxWidth="250" />;
 
   if(props.to) {
     children = (
-      <a href={props.to} target="_blank" className="p-home-page__brands-link" title={props.title}>
+      <a href={ to } target="_blank" className="p-home-page__brands-link" title={ title }>
         { image }
       </a>
     );
@@ -47,13 +48,7 @@ const Platform = (props) => {
   }
 
   //Wrap in a div and a fader. Div is to help with random transitions on resizing.
-  return (
+  return <div className="p-home-page__brands-brand" children={children} />;
-    <div className="p-home-page__brands-brand">
-      <ElementScrollFader from={props.from}>
-        {children}
-      </ElementScrollFader>
-    </div>
-  );
 };
 
 export default withLanguage(props => {
@@ -66,142 +61,127 @@ export default withLanguage(props => {
       background
     >
       <PageBoundary>
-        <ElementScrollFader from="left">
+        <ElementScrollFader >
           <Title className="u-text-center p-home-page__brands-title">
             { lang.pages.home.platforms.heading }
           </Title>
         </ElementScrollFader>
 
-        <div className="p-home-page__brands">
+        <ElementScrollFader from="bottom" className="p-home-page__brands">
           {/* Shopify */}
           <Platform
-            src={require('@assets/images/branding/shopify/shopify_glyph.svg')}
+            src={require('@assets/images/branding/shopify/logo.png')}
-            from="left"
             to="//www.shopify.com"
             title={ lang.pages.home.platforms.shopify }
           />
+
           {/* React */}
           <Platform
-            src={require('@assets/images/branding/react/react-logo.svg')}
+            src={require('@assets/images/branding/react/logo.png')}
-            from="top"
             to="//reactjs.org"
             title={ lang.pages.home.platforms.react }
           />
 
           {/* MonoGame */}
           <Platform
-            src={require('@assets/images/branding/monogame/monogame-logo.svg')}
+            src={require('@assets/images/branding/monogame/logo.png')}
-            from="bottom"
             to="http://www.monogame.net"
             title={ lang.pages.home.platforms.monogame }
           />
 
           {/* PGSQL */}
           <Platform
-            src={require('@assets/images/branding/pgsql/pgsql-logo.svg')}
+            src={require('@assets/images/branding/pgsql/logo.png')}
-            from="right"
             to="//www.postgresql.org"
             title={ lang.pages.home.platforms.pgsql }
           />
 
           {/* NodeJS */}
           <Platform
-            src={require('@assets/images/branding/nodejs/nodejs-logo.svg')}
+            src={require('@assets/images/branding/nodejs/logo.png')}
-            from="top"
             to="//nodejs.org"
             title={ lang.pages.home.platforms.nodejs }
           />
 
           {/* C# */}
           <Platform
-            src={require('@assets/images/branding/csharp/csharp-logo.svg')}
+            src={require('@assets/images/branding/csharp/logo.png')}
-            from="top"
             to="//docs.microsoft.com/en-us/dotnet/csharp/"
             title={ lang.pages.home.platforms.csharp }
           />
 
           {/* PHP */}
           <Platform
-            src={require('@assets/images/branding/php/php-logo.svg')}
+            src={require('@assets/images/branding/php/logo.png')}
-            from="top"
             to="//php.net"
             title={ lang.pages.home.platforms.php }
           />
 
           {/* Java */}
           <Platform
-            src={require('@assets/images/branding/java/java-logo.svg')}
+            src={require('@assets/images/branding/java/logo.png')}
-            from="top"
             to="//java.com"
             title={ lang.pages.home.platforms.java }
           />
 
           {/* neto */}
           <Platform
-            src={require('@assets/images/branding/neto/neto-logo.svg')}
+            src={require('@assets/images/branding/neto/logo.png')}
-            from="bottom"
             to="//www.neto.com.au"
             title={ lang.pages.home.platforms.neto }
           />
 
           {/* MySQL */}
           <Platform
-            src={require('@assets/images/branding/mysql/mysql-logo.svg')}
+            src={require('@assets/images/branding/mysql/logo.png')}
-            from="bottom"
             to="//www.mysql.com"
             title={ lang.pages.home.platforms.mysql }
           />
 
           {/* Heroku */}
           <Platform
-            src={require('@assets/images/branding/heroku/heroku-logo.svg')}
+            src={require('@assets/images/branding/heroku/logo.png')}
-            from="bottom"
             to="//heroku.com"
             title={ lang.pages.home.platforms.heroku }
           />
 
           {/* OpenGL */}
           <Platform
-            src={require('@assets/images/branding/opengl/opengl-logo.svg')}
+            src={require('@assets/images/branding/opengl/logo.png')}
-            from="bottom"
             to="//www.opengl.org"
             title={ lang.pages.home.platforms.opengl }
           />
 
           {/* Discord */}
           <Platform
-            src={ require('@assets/images/branding/discord/discord-logo.svg') }
+            src={ require('@assets/images/branding/discord/logo.png') }
-            from="right"
             to="//discordapp.com"
             title={ lang.pages.home.platforms.discord }
           />
 
           {/* Twitch */}
           <Platform
-            src={ require('@assets/images/branding/twitch/twitch-logo.svg') }
+            src={ require('@assets/images/branding/twitch/logo.png') }
-            from="right"
             to="//twitch.tv"
             title={ lang.pages.home.platforms.twitch }
           />
 
           {/* Twitter */}
           <Platform
-            src={require('@assets/images/branding/twitter/twitter-logo.svg')}
+            src={require('@assets/images/branding/twitter/logo.png')}
-            from="left"
             to="//twitter.com"
             title={ lang.pages.home.platforms.twitter }
           />
 
           {/* Google Cloud */}
           <Platform
-            src={ require('@assets/images/branding/google-cloud/google-cloud-logo.svg') }
+            src={ require('@assets/images/branding/google-cloud/logo.png') }
-            from="left"
             to="//console.cloud.google.com"
             title={ lang.pages.home.platforms.googlecloud }
           />
-        </div>
+        </ElementScrollFader>
 
-        <ElementScrollFader from="bottom">
+        <ElementScrollFader from="top">
           <Subtitle className="u-text-center p-home-page__brands-title">
             { lang.pages.home.platforms.footer }
           </Subtitle>

public/styles/common.scss

@@ -47,7 +47,6 @@
 //TEMP
 @import './objects/_page-transition.scss';
 @import './pages/_contact-page.scss';
-@import './pages/_home-page.scss';
 @import './pages/_privacy-policy-page.scss';
 
 //Utilities

public/styles/global.scss

@@ -40,7 +40,6 @@
 @import './settings/z.scss';
 
 //Tools
-@import './tools/flex.scss';
 @import './tools/list.scss';
 @import './tools/prefix.scss';
 

public/styles/tools/flex.scss

@@ -1,167 +0,0 @@
-/*
- *  Flex
- *    Used to simplify the flexbox and it's styles
- *
- *  Many of these mixins were taken from mastastealth/sass-flex-mixin:
- *  https://github.com/mastastealth/sass-flex-mixin/blob/master/_flex.scss
- *
- *  Version:
- *    1.0.1 - 2018/06/27
- */
-
-//Flex/Flexbox
-@mixin t-flexbox {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -moz-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-%t-flexbox {
-  @include t-flexbox;
-}
-
-//Inline Flex/Inline Flexbox
-@mixin t-inline-flex {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -moz-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-%t-inline-flex {
-  @include t-inline-flex;
-}
-
-//Align-items
-@mixin t-align-items($value: stretch) {
-  @if $value == flex-start {
-    -webkit-box-align: start;
-    -ms-flex-align: start;
-  } @else if $value == flex-end {
-    -webkit-box-align: end;
-    -ms-flex-align: end;
-  } @else {
-    -webkit-box-align: $value;
-    -ms-flex-align: $value;
-  }
-
-  -webkit-align-items: $value;
-  -moz-align-items: $value;
-  align-items: $value;
-}
-
-
-//Align-self
-@mixin t-align-self($value: auto) {
-  // No Webkit Box Fallback.
-  -webkit-align-self: $value;
-  -moz-align-self: $value;
-  @if $value == flex-start {
-    -ms-flex-item-align: start;
-  } @else if $value == flex-end {
-    -ms-flex-item-align: end;
-  } @else {
-    -ms-flex-item-align: $value;
-  }
-  align-self: $value;
-}
-
-//Align content
-@mixin t-align-content($value: stretch) {
-  // No Webkit Box Fallback.
-  -webkit-align-content: $value;
-  -moz-align-content: $value;
-  @if $value == flex-start {
-    -ms-flex-line-pack: start;
-  } @else if $value == flex-end {
-    -ms-flex-line-pack: end;
-  } @else {
-    -ms-flex-line-pack: $value;
-  }
-  align-content: $value;
-}
-
-//Justify Content
-@mixin t-justify-content($value: flex-start) {
-  @if $value == flex-start {
-    -webkit-box-pack: start;
-    -ms-flex-pack: start;
-  } @else if $value == flex-end {
-    -webkit-box-pack: end;
-    -ms-flex-pack: end;
-  } @else if $value == space-between {
-    -webkit-box-pack: justify;
-    -ms-flex-pack: justify;
-  } @else if $value == space-around {
-    -ms-flex-pack: distribute;
-  } @else {
-    -webkit-box-pack: $value;
-    -ms-flex-pack: $value;
-  }
-  -webkit-justify-content: $value;
-  -moz-justify-content: $value;
-  justify-content: $value;
-}
-
-//Wrapping
-@mixin t-flex-wrap($value: nowrap) {
-  // No Webkit Box fallback.
-  -webkit-flex-wrap: $value;
-  -moz-flex-wrap: $value;
-  @if $value == nowrap {
-    -ms-flex-wrap: none;
-  } @else {
-    -ms-flex-wrap: $value;
-  }
-  flex-wrap: $value;
-}
-
-//Flowing
-@mixin t-flex-flow($values: (row nowrap)) {
-  // No Webkit Box fallback.
-  -webkit-flex-flow: $values;
-  -moz-flex-flow: $values;
-  -ms-flex-flow: $values;
-  flex-flow: $values;
-}
-
-//t-flex-direction
-@mixin t-flex-direction($value: row) {
-  @if $value == row-reverse {
-    -webkit-box-direction: reverse;
-    -webkit-box-orient: horizontal;
-  } @else if $value == column {
-    -webkit-box-direction: normal;
-    -webkit-box-orient: vertical;
-  } @else if $value == column-reverse {
-    -webkit-box-direction: reverse;
-    -webkit-box-orient: vertical;
-  } @else {
-    -webkit-box-direction: normal;
-    -webkit-box-orient: horizontal;
-  }
-  -webkit-flex-direction: $value;
-  -moz-flex-direction: $value;
-  -ms-flex-direction: $value;
-  flex-direction: $value;
-}
-
-//Flex Grow
-@mixin t-flex-grow($int: 0) {
-  -webkit-box-flex: $int;
-  -webkit-flex-grow: $int;
-  -moz-flex-grow: $int;
-  -ms-flex-positive: $int;
-  flex-grow: $int;
-}
-
-//Flex basis
-@mixin t-flex-basis($value: auto) {
-  -webkit-flex-basis: $value;
-  -moz-flex-basis: $value;
-  -ms-flex-preferred-size: $value;
-  flex-basis: $value;
-}