More media query

mixins/_all.scss

@@ -1,3 +1,4 @@
-@import "clearflow";
+@import "media_query";
+@import "flow";
 @import "color";
 @import "user_agent";

mixins/_flow.scss

@@ -6,7 +6,7 @@
 //
 // @example scss - Usage
 //   .element {
-//     @include clearflow;
+//     @include clearFlow;
 //   }
 //
 // @example css - CSS Output
@@ -16,7 +16,7 @@
 //     display: table;
 //   }
 
-@mixin clearflow {
+@mixin clearFlow {
   &::after {
     content: "";
     clear: both;

mixins/_media_query.scss

@@ -0,0 +1,35 @@
+//Sections for Media Queries
+@mixin forPhoneOnly {
+  @media (max-width: #{$screen_tiny - 1}) { @content; } //599px
+}
+@mixin forTabletPortraitUp {
+  @media (min-width: $screen_tiny) { @content; } //600px
+}
+@mixin forTabletPortraitOnly {
+  @media (min-width: $screen_tiny) and (max-width: #{$screen_small - 1}) { @content; } //600px - 899px
+}
+@mixin forTabletLandscapeUp {
+  @media (min-width: $screen_small) { @content; } //900px
+}
+@mixin forTabletLandscapeOnly {
+  @media (min-width: $screen_small) and (max-width: #{$screen_medium - 1}) { @content; } //900px - 1199px
+}
+@mixin forDesktopUp {
+  @media (min-width: $screen_medium) { @content; } //1200px
+}
+@mixin forDesktopOnly {
+  @media (min-width: $screen_medium) and (max-width: #{$screen_huge - 1}) { @content; } //1200px - 1799px
+}
+@mixin forBigDesktopUp {
+  @media (min-width: $screen_huge) { @content; } //1800px
+}
+
+//Mobile-first Media Query
+@mixin goingLarge($width) {
+  @media (min-width: $width/16+em) { @content; }
+}
+
+//Desktop-first Media Query
+@mixin goingSmall($width) {
+  @media (max-width: $width/16+em) { @content; }
+}