doggystyle 0.1.0

data/core/mixins/flexbox/_flex-items.scss

@@ -0,0 +1,140 @@
+// Item properties
+$flex-item-aliases : grow shrink basis self;
+$flex-item         : order flex-grow flex-shrink flex-basis align-self $flex-item-aliases;
+$flex-item         : merge($flex-item, $flex-item-aliases);
+
+// Item values
+$flex-order        : number;
+$flex-grow         : number;
+$flex-shrink       : number; 
+$flex-basis        : number auto;
+$flex-flex         : none number; // flex-grow, flex-shrink, flex-basis
+$flex-align-self   : auto flex-start flex-end start end center baseline stretch;
+
+/// Flexbox items mixin validates and prefixes the most current Flexbox W3C working draft
+///
+/// @author Mark Notton
+///
+/// @access public
+///
+/// @warning Flexbox does not currently work on buttons, fieldsets or textareas
+///
+/// @warning box-orient, box-direction, box-ordinal-group, box-left, box-positive, box-pack, box-align 
+///          ...and other unsupported/old flexbox values have been excluded
+///
+/// @todo Do special checks for 'flex'
+///
+/// @param {Map} $settings - flexbox item property or alias : flexbox value.
+///
+///   Property         Alias        Default       Values
+///   -------------------------------------------------------------------------------------------------------
+///   order            (-)          (-)           number 
+///   flex-grow        (grow)       (0)           number 
+///   flex-shrink      (shrink)     (1)           number 
+///   flex-basis       (basis)      (auto)        unit | auto
+///   !flex            (-)          (-)           number | none
+///   align-self       (self)       (-)           auto | flex-start | flex-end | center | baseline | stretch
+/// 
+///
+/// @require {Mixin}    contains
+/// @require {Mixin}    prefixer
+/// @require {Function} merge
+/// @require {Variable} flex-item-aliases
+/// @require {Variable} flex-item
+/// @require {Variable} flex-item
+/// @require {Variable} flex-order
+/// @require {Variable} flex-grow
+/// @require {Variable} flex-shrink
+/// @require {Variable} flex-basis
+/// @require {Variable} flex-flex
+/// @require {Variable} flex-align-self
+///
+/// @example scss - Usage
+/// .bar { 
+///   @include flex-items((
+///     order:1,
+///     basis:150
+///   ));
+/// }
+///
+/// @example css - CSS Output
+/// .bar {
+///   -webkit-order: 1;
+///   -moz-order: 1;
+///   -ms-order: 1;
+///   -o-order: 1;
+///   order: 1;
+///   -webkit-flex-basis: 150px;
+///   -moz-flex-basis: 150px;
+///   -ms-flex-basis: 150px;
+///   -o-flex-basis: 150px;
+///   flex-basis: 150px; 
+/// }
+///
+@mixin flex-items($settings) {
+  
+  @each $property, $value in $settings {
+
+    $output : false;
+    $new-value : null;
+
+    @if contains($flex-item, $property) {
+      // Alias checks
+      @if contains($property, self) {
+        $property : #{align-}$property;
+      }
+      @elseif contains($property, (grow shrink basis)) {
+        $property : #{flex-}$property;
+      }
+
+      @if contains($value, (start end)) {
+        $value : #{flex-}$value;
+      }
+        
+      // Check these properties against their list of valid values
+      @if contains($property, (order, flex-grow, flex-shrink)) {
+        $new-value : strip($value);
+        $output : true;
+      }
+      @elseif $property == flex-basis {
+        $new-value : addUnit($value);
+        $output : true;
+      }
+      @elseif $property == align-self and contains($flex-align-self, $value) {
+        $new-value : $value;
+        $output : true;
+      }
+           
+      // Only output and prefix everything when $output is true
+      @if $output and $new-value != null {
+        // This checks to see if any aliases have been used in the values
+        @include prefixer($property, $new-value, all);
+      }
+    }
+  }
+}
+
+// Quick Flex Items Mixins
+@mixin flex-order($value) { 
+  @include flex-items((order:$value));
+}
+
+@mixin flex-grow($value) { 
+  @include flex-items((grow:$value));
+}
+
+@mixin flex-shrink($value) { 
+  @include flex-items((flex-shrink:$value));
+}
+
+@mixin flex-basis($value) { 
+  @include flex-items((flex-basis:$value));
+}
+
+@mixin flex-flex($value) { 
+  @include flex-items((flex:$value));
+}
+
+@mixin flex-align-self($value) { 
+  @include flex-items((self:$value));
+}

data/core/mixins/flexbox/_flex-remove.scss

@@ -0,0 +1,12 @@
+/// Quick mixin to remove all active flexbox properties
+///
+/// @author Mark Notton
+///
+/// @access public
+///
+@mixin flex-remove() {
+  flex:initial;
+  display:initial;
+  flex-direction:initial;
+  justify-content:initial;
+}

data/core/mixins/grid/_break-between.scss

@@ -0,0 +1,6 @@
+// Breakpoint bewtween two points
+@mixin break-between($min, $max, $property:width) {
+  @media only screen and (min-#{$property}:addUnit($min)) and (max-#{$property}: addUnit($max)) {
+    @content;
+  }
+}

data/core/mixins/grid/_grid.scss

@@ -0,0 +1,150 @@
+$breakpoints: () !global;
+
+// Quickly look for any matching breakpoint names and return their number
+@function breaks($key) {
+  @return map-fetch($breakpoints, $key);
+}
+
+// Add a breakpoint to a global map, which can be called on using the 'breaks' function
+@mixin add-breakpoint($args...) {
+
+  @for $i from 1 through length($args) {
+
+    $name : null;
+    $size : null;
+
+    $arg: nth($args, $i);
+
+    @each $rule in $arg {
+      @if type-of($rule) == string {
+        $name : $rule;
+      }
+      @if type-of($rule) == number {
+        $size : strip($rule);
+      }
+    }
+
+    $name : if($name == null and type-of($size) == number, #{$size}, $name);
+
+    @if $name and $size {
+      $breakpoints : map-set($breakpoints, $name, $size) !global;
+    }
+  }
+  @at-root body { @include set-breakpoints(); }
+}
+
+// This will set a all the of the grid custom properties
+@mixin set-breakpoints($breaks:$breakpoints) {
+  $new-breakpoints : ();
+  @each $break, $value in $breakpoints {
+    $new-breakpoints : map-set( $new-breakpoints, #{breakpoint-}#{$break}, $value);
+  }
+  @include custom-property($new-breakpoints, null);
+}
+
+@mixin break($args) {
+
+  @if (is-null($args)) {
+    @content;
+  } @else {
+    $width : null;
+    $condition : if($mobile-first, min-width, max-width);
+
+    @each $rule in $args {
+      @if is_number($rule) {
+        $width : addUnit($rule);
+      }
+      @if is_string($rule) {
+        $rule : if($rule == 'min', 'min-width', $rule);
+        $rule : if($rule == 'max', 'max-width', $rule);
+        $condition : $rule;
+      }
+    }
+
+    // @if not contains($breakpoints, $width) {
+    //   @include add-breakpoint($width);
+    // }
+
+    @media (#{$condition}:addUnit($width)) {
+      @content;
+    }
+  }
+
+}
+
+@mixin hideAt($break) {
+  @include break($break) {
+    display:none;
+    & { @content; }
+  }
+}
+
+@mixin showAt($break) {
+  @include break($break) {
+    display:block;
+    & { @content; }
+  }
+}
+
+
+
+
+// The original grid mixin
+@mixin grid($args, $gutter:null) {
+
+  $count: nth($args, 1);
+  $gutter: if($gutter == null, if(length($args) == 2, nth($args, 2), 0), $gutter);
+
+  @if ($gutter == true) { $gutter:$padding; }
+
+  @if ($gutter != 0 or $count == 1) {
+    @for $i from 1 through $count {
+      @include nth($i, true) {
+        clear:none; margin-right:addUnit($gutter);
+      }
+    }
+    @include nth($count, true) { margin-right:0; }
+  }
+
+  @if ($count == 1) {
+    @include nth($count, true) {
+      margin-right:0;
+    }
+  }
+
+  // Checks
+  $width:     if($count  >  1, 100%/$count, 100%);
+  $remainder: if($gutter != 0, #{'+ '} addUnit($gutter/$count), null);
+  $gutter:    if($gutter != 0, #{'- '} addUnit($gutter), null);
+
+  // Output
+  float:left;
+  @if ( $gutter != null ) {
+    width:calc(#{$width} #{$gutter} #{$remainder});
+  } @else {
+    width:$width;
+  }
+
+    @content;
+
+}
+
+// @include grid(4 $pad $max, 2 0 $medium, $small);
+
+
+
+
+// @mixin grid2($args...) {
+
+// }
+
+
+
+
+// Including the mixin for inner grid
+// Specifying the pattern for a single row
+// Which will be repeated for next rows
+// .main {
+//   .block { border:1px solid red; background-color:rc(); height:20px;}
+//   //@include grid2(4, 2, 1);
+// }

data/core/mixins/svg/_svg-size.scss

@@ -0,0 +1,4 @@
+@mixin svg-size($class) {
+  @extend .svg-#{$class}-size;
+}
+

data/core/mixins/svg/_svg.scss

@@ -0,0 +1,9 @@
+@mixin svg($class, $size:true) {
+  @if $size == true {
+    @include svg-size($class);
+  } @elseif $size != false {
+    @include size($size);
+  }
+  @extend .svg-#{$class};
+  @content;
+}

data/core/placeholders/_clear.scss

@@ -0,0 +1,27 @@
+%clearfix {
+  @include clearfix;
+}
+
+%clear-button {
+  background:none;
+  border:none;
+  padding:0;
+  margin:0;
+  cursor:pointer;
+  &:focus {outline:0;}
+}
+
+%clear-shadow {
+  box-shadow: none;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+}
+
+%clear-box-sizing { 
+  -moz-box-sizing:initial;
+  box-sizing:initial;
+}
+
+%clear-text-shadow {
+  // @include single-text-shadow(none); 
+}

data/core/placeholders/_cursor.scss

@@ -0,0 +1,35 @@
+%nopointerevent, %nopointerevents {
+  pointer-events:none;
+}
+
+%pointerevents, %pointerevent {
+  pointer-events:auto;
+}
+
+%pointer {
+  cursor:pointer;
+}
+
+%cursor {
+  cursor:auto;
+}
+
+%hidden {
+  visibility:hidden;
+  @extend %nopointerevent;
+}
+
+%visible {
+  visibility:visible;
+  @extend %pointerevents;
+}
+
+%untouchable {
+  opacity:0;
+  @extend %nopointerevent;
+}
+
+%touchable {
+  opacity:1;
+  @extend %pointerevents;
+}

data/core/placeholders/_misc.scss

@@ -0,0 +1,20 @@
+%sudo {
+  content:"";
+  @extend %full;
+}
+
+%full {
+  position:absolute;
+  top:0;
+  left:0;
+  @include size(100%);
+}
+
+%absolute-center {
+  position:absolute;
+  top:0;
+  left:0;
+  right:0;
+  bottom:0;
+  margin:auto;
+}

data/core/placeholders/_rendering.scss

@@ -0,0 +1,21 @@
+%render-auto { 
+  image-rendering: -moz-auto;
+  image-rendering:-o-auto;
+  image-rendering: -webkit-optimize-contrast;
+  image-rendering: auto;
+}
+
+%render-crisp { 
+  image-rendering: -moz-crisp-edges;
+  image-rendering:-o-crisp-edges;
+  image-rendering: -webkit-optimize-contrast;
+  image-rendering: crisp-edges;
+  -ms-interpolation-mode: nearest-neighbor;
+}
+
+%render-pixelated { 
+  image-rendering: -moz-pixelated;
+  image-rendering:-o-pixelated;
+  image-rendering: -webkit-optimize-contrast;
+  image-rendering: pixelated;
+}

data/core/placeholders/_text.scss

@@ -0,0 +1,41 @@
+%font-smooth {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+%font-default {
+  font-family: Helvetica, Arial, sans-serif;
+  @extend %font-smooth;
+}
+
+%lowercase {
+  text-transform:lowercase;
+}
+
+%uppercase {
+  text-transform:uppercase;
+}
+
+%capitalize {
+  text-transform:capitalize;
+}
+
+%no-wrap {
+  white-space:nowrap;
+}
+
+%hide-text {
+  text-indent:110%; overflow:hidden; white-space:nowrap;
+}
+
+%show-text {
+  text-indent:0; overflow:visible; white-space:normal; @include user-select(all);
+}
+
+%selectable {
+  @include user-select(all);
+}
+
+%unselectable {
+  @include user-select(none);
+}