gulp and file structure overhaul

new gulp setup
including new npm packages
new file structure
moved all development files to source/
used files are in build/ now

source/style/mixins/_all.scss

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

source/style/mixins/_color.scss

@@ -0,0 +1,20 @@
+@mixin addDefaultColors() {
+  @if map-has-key($color_palette, alpha) {
+    $alpha_color: map-get($color_palette, alpha) !global;
+  }
+  @if map-has-key($color_palette, bravo) {
+    $bravo_color: map-get($color_palette, bravo) !global;
+  }
+  @if map-has-key($color_palette, charlie) {
+    $charlie_color: map-get($color_palette, charlie) !global;
+  }
+  @if map-has-key($color_palette, delta) {
+    $delta_color: map-get($color_palette, delta) !global;
+  }
+  @if map-has-key($color_palette, echo) {
+    $echo_color: map-get($color_palette, echo) !global;
+  }
+  @if map-has-key($color_palette, foxtrot) {
+    $foxtrot_color: map-get($color_palette, foxtrot) !global;
+  }
+}

source/style/mixins/_flow.scss

@@ -0,0 +1,25 @@
+@charset "UTF-8";
+
+// Provides an easy way to include a clearflow for containing floats.
+//
+// @link http://cssmojo.com/latest_new_clearfix_so_far/
+//
+// @example scss - Usage
+//   .element {
+//     @include clearFlow;
+//   }
+//
+// @example css - CSS Output
+//   .element::after {
+//     content: "";
+//     clear: both;
+//     display: table;
+//   }
+
+@mixin clearFlow {
+  &::after {
+    content: "";
+    clear: both;
+    display: table;
+  }
+}

source/style/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; }
+}

source/style/mixins/_user_agent.scss

@@ -0,0 +1,9 @@
+@mixin overrideUserAgent() {
+  @if $no_agent_focus == true {
+    @each $el in $basic_focus_list {
+      #{$el}:focus {
+        outline: 0;
+      }
+    }
+  }
+}