doggystyle 0.1.0

data/core/mixins/_filters.scss

@@ -0,0 +1,163 @@
+$filter-values : inherit initial unset;
+$filter-types : url blur brightness contrast drop-shadow grayscale hue-rotate invert opacity saturate sepia;
+
+/// Filter mixin that allows various syntax's
+///
+/// @author Mark Notton
+///
+/// @access public
+///
+/// @param {Map} $settings - Each argument should consist of a filter type and it's value
+///
+/// @require {variable} transform-types
+/// @require {variable} transform-values
+/// @require {function} _arglist-to-list
+/// @require {function} contains
+/// @require {function} is-function
+/// @require {function} is-string
+/// @require {mixin} prefixer
+///
+/// @example scss - Usage
+///   Doggy Style Syntax
+///   @include filter(blur 5, sepia 100); 
+///   Bourbon Syntax
+///   @include filter(blur(5), sepia(100));
+///   Generic Syntax
+///   @include filter(blur(5) sepia(100)); 
+///
+/// @example css - CSS Output
+///   -webkit-filter: blur(5px) sepia(100%);
+///   -moz-filter: blur(5px) sepia(100%);
+///   filter: blur(5px) sepia(100%);
+
+@mixin filter($settings...) {
+  
+  $filters : ();
+  $fallback-settings : ();
+
+  @if not contains($filter-values, $settings, true) and length($settings) >= 1 {
+    
+    // This is an over-engineered section of code to to allow for all types of syntaxes.
+    // Essestially making it work with Bourbon and other frameworks.
+    @if length($settings) == 1  {
+      @for $i from 1 through length($settings) {
+        @each $setting in nth($settings, $i) {   
+          @if is-function($setting) {     
+            $fallback-settings : append($fallback-settings, $setting, comma);
+          }
+        }
+      } 
+    }
+    $settings-lists : if(length($fallback-settings) > 1, $fallback-settings,  _arglist-to-list($settings));
+
+
+    @each $settings in $settings-lists {      
+
+      @if is-function($settings) {
+        $settings : is-function($settings);
+      } 
+    
+
+      $filter : null;
+      $value : ();
+
+
+      // Check for transforms
+      @each $setting in $settings {
+        @if is-string($setting) and contains($filter-types, $setting) {
+          $filter : $setting;
+        } 
+      }
+      // @debug $filter;
+      
+      // Check and validate all transform types
+      @each $setting in $settings {
+        @if not is-string($setting) {
+          @if contains($filter, (blur)) {
+            // Values that require a unit
+            $value : append($value, addUnit($setting));
+          } @elseif contains($filter, (hue-rotate)) {
+            // Values that require an angle
+            $value : append($value, addUnit($setting, deg));   
+          } @elseif contains($filter, (invert opacity saturate sepia contrast grayscale)) {
+            // Values that require an percent
+            $value : append($value, addUnit($setting, %));   
+          } @elseif $filter == drop-shadow {
+            // Specific for drop-shdaow
+            @each $val in $setting {
+              @if is-number($val) {
+                $value : append($value, addUnit($val));
+              } @elseif is-colour($val) {
+                $value : append($value, $val);
+              }
+            } 
+          } @else {
+            // All other values
+            $value : append($value, $setting);     
+          }
+        } @elseif contains($filter-values, $setting) {
+          // Values that are strings and are global values
+           $value : append($value, $setting);  
+        }
+      }
+
+      // Append transform and value to the transforms list
+      @if $filter != null {
+        $filters : append($filters, $filter+"("+$value+")");
+      }
+      
+    }
+  } @else {
+   $filters : nth($settings, 1);
+  }
+
+  @include prefixer(filter, $filters);
+
+}
+
+@mixin url($value:null) {
+  @include filter(url $value);
+}
+
+@mixin blur($value:5px) {
+  @include filter(blur $value);
+}
+
+@mixin brightness($value:0.4) {
+  @include filter(brightness $value);
+}
+
+@mixin contrast($value:200%) {
+  @include filter(contrast $value);
+}
+
+@mixin dropshadow($value) { @include drop-shadow($value); }
+@mixin drop-shadow($value:16px 16px 20px blue) {
+  @include filter(drop-shadow $value);
+}
+
+@mixin greyscale($value) { @include grayscale($value); }
+@mixin grayscale($value:50%) {
+  @include filter(grayscale $value);
+}
+
+@mixin hue($value) { @include hue($value); }
+@mixin hue-rotate($value:90deg) {
+  @include filter(hue-rotate $value);
+}
+
+@mixin invert($value:75%) {
+  @include filter(invert $value);
+}
+
+@mixin opacity($value:25%) {
+  @include filter(opacity $value);
+}
+
+@mixin saturate($value:30%) {
+  @include filter(saturate $value);
+}
+
+@mixin sepia($value:60%) {
+  @include filter(sepia $value);
+}

data/core/mixins/_flip.scss

@@ -0,0 +1,11 @@
+@mixin flip-horizontally() {
+  @include scaleX(-1);
+  filter: FlipH;
+  -ms-filter: "FlipH";
+}
+
+@mixin flip-vertically() {
+  @include scaleY(-1);
+  filter: FlipV;
+  -ms-filter: "FlipV";
+}

data/core/mixins/_font-face.scss

@@ -0,0 +1,11 @@
+@mixin font-face($family, $file, $formats) {
+  @font-face {
+    $source : ();      
+    font-family:$family;
+    @each $format in $formats {
+      $source : append($source, url($font-url + $file + '.' + $format), comma);
+    }
+    src: $source;
+    @content;
+  }
+}

data/core/mixins/_fontsize.scss

@@ -0,0 +1,126 @@
+// //This will add a lineheight in percentage that's just a little bit greater than the font
+// @mixin fontsize($size:$text, $lineheight:10%, $letterspacing:normal) {
+//  @if (str-index(#{$lineheight}, "%")) {
+//     // Make the lingheight a percentage of the font size
+//     $lineheight: strip($lineheight);
+//     $height: ($size/100*$lineheight)+$size;
+//     font-size:addUnit($size); line-height:addUnit($height);
+//   } @else {
+//     // Manually add a lineheight
+//     font-size:addUnit($size); line-height:addUnit($lineheight);
+//   }
+//   @if ($letterspacing != normal and isNumber($letterspacing)) {
+//     letter-spacing:addUnit($letterspacing);
+//   }
+// }
+
+//This will add a lineheight in percentage that's just a little bit greater than the font
+@mixin fontsize($size:$fs, $smart:true) {
+  @if type-of($size) == number {
+    font-size:addUnit($size);
+    line-height:smart-lineheight($size, $smart);
+  } @else {
+    @if (length($size) >= 2) {
+      font-size:addUnit(nth($size, 1));
+      line-height:smart-lineheight(nth($size, 2), $smart);
+    }
+    @if (length($size) == 3) {
+      letter-spacing:addUnit(nth($size, 3));
+    }
+  }
+}
+
+@function _define-smart-fontsize-settings($args:null, $condition:null) {
+
+  $units : ();
+  $lineheight-bool : true;
+
+  // Default Settings
+  $settings : ( );
+
+  // Add a default lineheight based off the default size setting
+  @if $condition == max {
+    // Size
+    $settings : map-set($settings, size, ($font-size*2 - ($font-size/2)));
+    // Lineheight
+    $settings : map-set($settings, lineheight, smart-lineheight(map-get($settings, size)));
+    // Break
+    $settings : map-set($settings, break, $max);
+  } @else {
+    // Size
+    $settings : map-set($settings, size, $font-size);
+    // Lineheight
+    $settings : map-set($settings, lineheight, smart-lineheight(map-get($settings, size)));
+    // Break
+    $settings : map-set($settings, break, ceil((($large - $medium) / 2) + $medium));
+  }
+
+  // Check arguments
+  @each $rule in $args {
+    @if is-bool($rule) {
+      $lineheight-bool : $rule;
+    }
+    @if is-number($rule) {
+      $units : append($units, $rule);
+    }
+  }
+
+  // Set fontsize
+  @if length($units) >= 1 {
+    $settings : map-set($settings, size, nth($units, 1));
+  }
+
+  // Set lineheight
+  @if length($units) >= 2 {
+    $settings : map-set($settings, lineheight, smart-lineheight(nth($units, 2), $lineheight-bool));
+  }
+
+  // Set breakpoint
+  @if length($units) >= 3 {
+    $settings : map-set($settings, break, nth($units, 3));
+  }
+
+  // Return settings
+  @return $settings;
+}
+
+@mixin smart-fontsize($minArgs:null, $maxArgs:null, $defArgs:null) {
+
+  // Max
+  $max-settings : _define-smart-fontsize-settings($maxArgs, max);
+  $max-size : map-get($max-settings, size);
+  $max-lineheight : map-get($max-settings, lineheight);
+  $max-break : map-get($max-settings, break);
+
+  @include break($max-break min-width) {
+    font-size:addUnit($max-size);
+    line-height:$max-lineheight;
+  }
+
+  // Min
+  $min-settings : _define-smart-fontsize-settings($minArgs, min);
+  $min-size : map-get($min-settings, size);
+  $min-lineheight : map-get($min-settings, lineheight);
+  $min-break : map-get($min-settings, break);
+
+  @include break($min-break max-width) {
+    font-size:addUnit($min-size);
+    line-height:$min-lineheight;
+  }
+
+  // Inbetween
+  @if $defArgs == null {
+    font-size : addUnit($max-size/11, vw);
+    line-height: smart-lineheight(if($max-size > 30, $max-size/2.28, $max-size));
+  } @else {
+    $def-settings : _define-smart-fontsize-settings($defArgs);
+    $def-size : map-get($def-settings, size);
+    $def-lineheight : map-get($def-settings, lineheight);
+    $def-break : map-get($def-settings, break);
+
+    @include break-between($min-break, $max-break) {
+      font-size : if(unitless($def-size), addUnit($def-size/11, vw), addUnit($def-size));
+      line-height:$def-lineheight;
+    }
+  }
+}

data/core/mixins/_gallery.scss

@@ -0,0 +1,134 @@
+$default-gallery-settings : (
+  id        : null,              // To define the scope of the gallery, add a class or id (with their appropriate prefixes, # or .)
+  animation : gallery-animation, // Name of the keyframe animation that will effect each image one at a time
+  first     : true,              // On load, fade the first image in, or have it show immediately.
+  loop      : infinite,          // How many times you want it to loop. Use 'infinite' for... infinite
+  autoplay  : true,              // Do you want the slides to start on load
+  limit     : 10,                // Max amount of images. Keep this as low as possible. Bigger numbers, means excessive css markup.
+  duration  : 4,                 // How long each image will display for
+  speed     : 1,                 // Speed of transition
+  ease      : ease-in-out,       // Ease method
+);
+
+@mixin gallery($gallery-settings:null) {
+  
+  $settings : ();
+  
+  // If a map has not been passed, give error
+  @if not is-map($gallery-settings) and $gallery-settings != null {
+
+    @error "Gallery settings need to be passed as a map";
+
+  } @else {
+
+    // If absolutely no settings have been passed, just use all the defaults.
+    @if $gallery-settings == null {
+
+      $settings : $default-gallery-settings;
+
+    } @else {
+
+      // Create a list of keys for the current settings that have been passed
+      $existing-gallery-settings : map-keys($gallery-settings);
+      
+      // Add existing settings to the new-settings map
+      @each $setting in $existing-gallery-settings {
+        // Only allow settings exist in the $default-gallery-settings
+        @if contains(map-keys($default-gallery-settings), $setting) {
+          
+          $set : null;
+          
+          // Check is certain strings are valid
+          @if is-string(map-get($gallery-settings, $setting)) {
+            @if contains(id animation loop ease, $setting) {
+              @if $setting != loop {
+                $set : $setting;
+              } @elseif $setting == loop and map-get($gallery-settings, loop) == infinite {
+                // Special check for loop, incase the default gets changed
+                $set : $setting;
+              }
+            }
+          }
+
+          // Check is certain booleans are valid
+          @elseif is-bool(map-get($gallery-settings, $setting)) {
+            @if contains(first autoplay, $setting) {
+              $set : $setting;
+            }
+          }
+
+          // Check is certain numbers are valid
+          @elseif is-number(map-get($gallery-settings, $setting)) {
+            @if contains(limit loop duration speed, $setting) {
+              $set : $setting;
+            }
+          }     
+          
+          // Add setting to new settings if it has passed validation
+          @if $set != null {
+            $settings : map-set($settings, $setting, map-get($gallery-settings,  $setting));
+          }
+
+        }
+      }
+
+      // Check which ones are missing, and add defaults
+      @each $setting in map-keys($default-gallery-settings) {
+        @if not map-has-key($settings, $setting) {
+          $settings : map-set($settings, $setting, map-get($default-gallery-settings,  $setting));
+        }
+      }
+
+    }
+    
+    $id        : map-get($settings, id);
+    $animation : map-get($settings, animation);
+    $first     : map-get($settings, first);
+    $loop      : map-get($settings, loop);
+    $autoplay  : map-get($settings, autoplay);
+    $limit     : map-get($settings, limit);
+    $duration  : map-get($settings, duration);
+    $speed     : map-get($settings, speed);
+    $ease      : map-get($settings, ease);
+
+    gallery-container#{$id} { 
+
+      &.pause { 
+        gallery-image { @include prefixer(animation-play-state, paused); }
+      }
+
+      // Set a few custom properties for javascript
+      @include custom-property((
+        gallery-duration : $duration,
+        gallery-speed : $speed,
+        gallery-autoplay : $autoplay,
+        gallery-loop : _min-max-number($loop, 1, 10)
+      ));
+
+      @for $count from 1 through $limit {
+        gallery-image:first-child:nth-last-child(#{$count}),
+        gallery-image:first-child:nth-last-child(#{$count}) ~ gallery-image {
+
+          @for $i from (if($first, 1, 2)) through $count {
+            &:nth-of-type(#{$i}) {
+              $delay : ($duration*($i - 1))+($speed*($i - 1));
+              @include prefixer(animation-delay, addUnit($delay, s), webkit);
+              @include prefixer(animation-duration, addUnit($speed, s), webkit);
+            }
+          }
+
+        }
+      }
+
+      gallery-image {
+        @if $autoplay == false { animation-play-state:paused; }
+        @include prefixer(animation-name, $animation, webkit);        
+        @include prefixer(animation-timing-function, $ease, webkit);
+        @include prefixer(animation-fill-mode, both, webkit); 
+        // animation-iteration-count : $loop;
+        &:last-of-type {  }
+      }
+    }
+
+  }
+}