create initial responsive grid layout

src/components/mdLayout/mdLayout.scss

@@ -1,4 +1,5 @@
 @import '../../core/stylesheets/variables.scss';
+@import '../../core/stylesheets/mixins.scss';
 
 .md-layout {
   display: flex;
@@ -6,6 +7,10 @@
   flex: 1;
 }
 
+.md-row {
+  flex-direction: row;
+}
+
 .md-column {
   flex-direction: column;
 }
@@ -62,3 +67,41 @@ $sizes: (8, 16, 24, 40);
     flex: 0 1 #{$counter + '%'};
   }
 }
+
+
+/* Responsive Breakpoints */
+
+@mixin breakpoint-layout($size) {
+  .md-column-#{$size} {
+    flex-direction: column;
+  }
+
+  .md-row-#{$size} {
+    flex-direction: row;
+  }
+
+  .md-hide-#{$size} {
+    display: none;
+  }
+}
+
+@include layout-xsmall {
+  @include breakpoint-layout(xsmall);
+}
+
+@include layout-small {
+  @include breakpoint-layout(small);
+}
+
+@include layout-medium {
+  @include breakpoint-layout(medium);
+}
+
+@include layout-large {
+  @include breakpoint-layout(large);
+}
+
+@include layout-xlarge {
+  @include breakpoint-layout(xlarge);
+}
+

src/components/mdLayout/mdLayout.vue

@@ -24,11 +24,6 @@
       mdHideMedium: Boolean,
       mdHideLarge: Boolean,
       mdHideXlarge: Boolean,
-      mdShowXsmall: Boolean,
-      mdShowSmall: Boolean,
-      mdShowMedium: Boolean,
-      mdShowLarge: Boolean,
-      mdShowXlarge: Boolean,
       mdGutter: [Number, Boolean],
       mdFlex: [Number, Boolean]
     },
@@ -51,12 +46,7 @@
           'md-hide-small': this.mdHideSmall,
           'md-hide-medium': this.mdHideMedium,
           'md-hide-large': this.mdHideLarge,
-          'md-hide-xlarge': this.mdHideXlarge,
-          'md-show-xsmall': this.mdShowXsmall,
-          'md-show-small': this.mdShowSmall,
-          'md-show-medium': this.mdShowMedium,
-          'md-show-large': this.mdShowLarge,
-          'md-show-xlarge': this.mdShowXlarge
+          'md-hide-xlarge': this.mdHideXlarge
         };
 
         if (this.mdGutter) {

src/core/stylesheets/base.scss

@@ -27,6 +27,10 @@ body {
   @extend .md-body-1;
 }
 
+[tabindex='-1']:focus {
+  outline: none;
+}
+
 
 /*  Fluid Media
    ========================================================================== */

src/core/stylesheets/mixins.scss

@@ -1,3 +1,5 @@
+/* Image aspect ratio calculator */
+
 @mixin image-aspect-ratio($width, $height) {
   overflow: hidden;
 
@@ -16,3 +18,36 @@
     transform: translateY(-50%);
   }
 }
+
+
+/* Responsive breakpoints */
+
+@mixin layout-xsmall {
+  @media (max-width: #{$breakpoint-xsmall}) {
+    @content;
+  }
+}
+
+@mixin layout-small {
+  @media (max-width: #{$breakpoint-small - 16px}) {
+    @content;
+  }
+}
+
+@mixin layout-medium {
+  @media (max-width: #{$breakpoint-medium - 16px}) {
+    @content;
+  }
+}
+
+@mixin layout-large {
+  @media (max-width: #{$breakpoint-large - 17px}) {
+    @content;
+  }
+}
+
+@mixin layout-xlarge {
+  @media (min-width: #{$breakpoint-large - 16px}) {
+    @content;
+  }
+}

src/core/stylesheets/variables.scss

@@ -1,12 +1,18 @@
-/*  Common
-   ========================================================================== */
+/* Common */
 
 $font-roboto: Roboto, Lato, sans-serif;
 
 
+/* Responsive Breakpoints */
 
-/*  Transitions - Based on Angular Material
-   ========================================================================== */
+$breakpoint-xsmall: 600px !default;
+$breakpoint-small: 1024px !default;
+$breakpoint-medium: 1440px !default;
+$breakpoint-large: 1600px !default;
+$breakpoint-xlarge: 1920px !default;
+
+
+/* Transitions - Based on Angular Material */
 
 $swift-ease-out-duration: .4s !default;
 $swift-ease-out-timing-function: cubic-bezier(.25, .8, .25, 1) !default;
@@ -33,9 +39,7 @@ $material-leave-timing-function: cubic-bezier(.4, .0, 1, 1);
 $material-leave: all $material-leave-duration $material-leave-timing-function;
 
 
-
-/*  Elevation - Based on Angular Material
-   ========================================================================== */
+/* Elevation - Based on Angular Material */
 
 $shadow-key-umbra-opacity: .2 !default;
 $shadow-key-penumbra-opacity: .14 !default;