doggystyle 0.1.0

data/core/mixins/_unwrap.scss

@@ -0,0 +1,5 @@
+@mixin unwrap($element:"p", $imageType:"img") {
+  &:after { content:''; clear:both; visibility:hidden; }
+  #{imageType} { float:left; }
+  #{element} { overflow: hidden }
+}

data/core/mixins/_user-select.scss

@@ -0,0 +1,5 @@
+@mixin user-select($setting) {
+  @if contains($setting, (none auto text contain all)) {
+    @include prefixer(user-select, $setting);
+  }
+}

data/core/mixins/_vertical.scss

@@ -0,0 +1,10 @@
+// Align vertically using the table method. Ideal when trying to avoid using specific units
+@mixin vertical($element:":first-child") {
+  display:table; height:100%;
+  > #{$element} { display: table-cell; vertical-align: middle; }
+}
+
+// Align vertically using the table method. Ideal when trying to avoid using specific units
+@mixin vertical-image($element:"img") {
+  > #{$element} { max-height:100%; max-width: 90%; width:auto; height:auto; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; }
+}

data/core/mixins/columns/_columns.scss

@@ -0,0 +1,92 @@
+//
+$column-global-rules : inherit, initial, unset;
+$break-before-after-rules : auto, always, left, right, recto, verso, page, column, region, avoid, avoid-page, avoid-column, avoid-region;
+$break-inside-rules : auto, avoid, avoid-page, avoid-column, avoid-region;
+$column-rule-style-rules : none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset;
+
+//
+@mixin break-after($setting) {
+  @if contains($break-before-after-rules, $setting) {
+    @include prefixer(break-after, $setting);
+  }
+}
+
+//
+@mixin break-before($setting) {
+  @if contains($break-before-after-rules, $setting) {
+    @include prefixer(break-before, $setting);
+  }
+}
+
+//
+@mixin break-inside($setting) {
+  @if contains($break-inside, $setting) {
+    @include prefixer(break-inside, $setting);
+  }
+}
+
+//
+@mixin column-count($setting) {
+  @if is-number($setting) or contains(join($column-global-rules, auto), $setting) {
+    @include prefixer(column-count, strip($setting));
+  }
+}
+
+//
+@mixin column-fill($setting) {
+  @if contains(join($column-global-rules, (auto, balance)), $setting) {
+    @include prefixer(column-fill, $setting);
+  }
+}
+
+//
+@mixin column-gap($setting) {
+  @if is-number($setting) or contains(join($column-global-rules, normal), $setting) {
+    @include prefixer(column-gap, addUnit($setting));
+  }
+}
+
+//
+@mixin column-rule($setting) {
+  @include prefixer(column-rule, $setting);
+}
+
+//
+@mixin column-rule-color($setting) {
+  @if is-colour($setting) or contains($column-global-rules, $setting) {
+    @include prefixer(column-rule-color, $setting);
+  }
+}
+
+//
+@mixin column-rule-style($setting) {
+  @if is-string($setting) and contains(join($column-global-rules, $column-rule-style-rules), $setting) {
+    @include prefixer(column-rule-style, $setting);
+  }
+}
+
+//
+@mixin column-rule-width($setting) {
+  @if is-number($setting) or contains(join($column-global-rules, (thin, medium, thick)), $setting) {
+    @include prefixer(column-rule-width, addUnit($setting));
+  }
+}
+
+//
+@mixin column-span($setting) {
+  @if is-string($setting) and contains(join($column-global-rules, (none, all)), $setting) {
+    @include prefixer(column-span, $setting);
+  }
+}
+
+//
+@mixin column-width($setting) {
+  @if is-number($setting) or contains(join($column-global-rules, auto), $setting) {
+    @include prefixer(column-width, addUnit($setting));
+  }
+}
+
+//
+@mixin columns($setting) {
+  @include prefixer(columns, $setting);
+}

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

@@ -0,0 +1,201 @@
+// Documentation: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
+
+// Container properties
+$flex-container-aliases : direction wrap flow justify items content;
+$flex-container         : display flex-direction flex-wrap flex-flow justify-content align-items align-content;
+$flex-container         : merge($flex-container, $flex-container-aliases);
+
+// Container values
+$flex-display           : flex inline-flex; 
+$flex-direction         : row row-reverse column column-reverse inherit; // default row
+$flex-wrap              : nowrap wrap wrap-reverse; // default no-wrap
+$flex-flow              : merge($flex-direction, $flex-wrap);
+$flex-justify-content   : flex-start flex-end center space-between space-around start end between around; // default flex-start
+$flex-align-items       : flex-start flex-end center baseline stretch start end; // default stretch
+$flex-align-content     : flex-start flex-end center space-between space-around stretch start end between around; // default stretch
+
+/// Flexbox container 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-flow'
+///
+/// @param {Map} $settings - flexbox container property or alias : flexbox value.
+///
+///   Property         Alias        Default       Values
+///   -------------------------------------------------------------------------------------------------------------------
+///   display          (-)          (flex)        flex | inline-flex
+///   flex-direction   (direction)  (row)         row | row-reverse | column | column-reverse | inherit
+///   flex-wrap        (wrap)       (nowrap)      nowrap | no-wrap | wrap | wrap-reverse
+///   !flex-flow       (flow)       (-)           flex-direction & flex-wrap 
+///   justify-content  (justify)    (flex-start)  flex-start | flex-end | center | space-between | space-around
+///   align-items      (items)      (stretch)     flex-start | flex-end | center | baseline | stretch
+///   align-content    (content)    (stretch)     flex-start | flex-end | center | space-between | space-around | stretch
+/// 
+/// @param {Bool} $display - If no display value is used, 'display:flex' will be defined automatically. 
+///   Unless this paramater is set to 'false'
+///
+/// @require {mixin}    contains
+/// @require {mixin}    prefixer
+/// @require {function} merge
+/// @require {variable} flex-container-aliases
+/// @require {variable} flex-container
+/// @require {variable} flex-container
+/// @require {variable} flex-display
+/// @require {variable} flex-direction
+/// @require {variable} flex-wrap
+/// @require {variable} flex-flow
+/// @require {variable} flex-justify-content
+/// @require {variable} flex-align-items
+/// @require {variable} flex-align-content
+///
+/// @example scss - Usage
+/// .foo { 
+///   @include flex-container((
+///     direction:row,
+///     justify-content:flex-end
+///   ));
+/// }
+///
+/// @example css - CSS Output
+/// .foo {
+///   -webkit-flex-direction: row;
+///   -moz-flex-direction: row;
+///   -ms-flex-direction: row;
+///   -o-flex-direction: row;
+///   flex-direction: row;
+///   -webkit-justify-content: flex-end;
+///   -moz-justify-content: flex-end;
+///   -ms-justify-content: flex-end;
+///   -o-justify-content: flex-end;
+///   justify-content: flex-end;
+///   -js-display: flex;
+///   display: -webkit-box;
+///   display: -moz-box;
+///   display: -webkit-flexbox;
+///   display: -ms-flexbox;
+///   display: -webkit-flex;
+///   display: flex;
+/// }
+///
+@mixin flex-container($settings:null, $display:true) {
+  
+  // If nothing was passed, just set the display as flex
+  @if $settings == null { $settings : (display:flex)}
+  
+  // Add display:flex by default is no display property was set
+  @each $property, $value in $settings {
+    @if $property == display { 
+      $display:default;
+    }
+  }
+  @if $display != default and $display == true { $settings : map-set($settings, display, flex);}
+  
+  // Validation checks for every value for every property
+  @each $property, $value in $settings {
+
+    $output : false;
+
+    @if contains($flex-container, $property) {
+      // Alias checks
+      @if contains($property, (content items)) {
+        $property : #{align-}$property;
+      }
+      @elseif contains($property, (direction wrap flow)) {
+        $property : #{flex-}$property;
+        // Special alias check for nowrap
+        $value : if($value == no-wrap, nowrap, $value);
+      }
+      @elseif $property == justify {
+        $property : justify-content;
+      }
+
+      @if contains($value, (start end)) {
+        $value : #{flex-}$value;
+      } @elseif contains($value, (around between)) {
+        $value : #{space-}$value;
+      }      
+      
+      @if $property == display and $value != null {
+        @if $value == inline-flex {
+          display: -webkit-inline-flex;
+          display: inline-flex;
+        } @else {
+          -js-display: flex; // This is for flexibility support
+          display: -webkit-box;
+          display: -moz-box;
+          display: -webkit-flexbox;
+          display: -ms-flexbox;
+          display: -webkit-flex;
+          display: flex;
+        }
+      }  
+      
+      // Check these properties against their list of valid values
+      $checks : (flex-direction: $flex-direction, flex-wrap: $flex-wrap, justify-content: $flex-justify-content, align-items: $flex-align-items, align-content: $flex-align-content);
+      @each $prop, $check in $checks {
+        @if $property == $prop and contains($check, $value){
+          $output : true;
+        } 
+      }
+
+      // Only output and prefix everything when $output is true
+      @if $output {
+        @include prefixer($property, $value, all);
+      }
+
+    }
+  }
+}
+
+// Quick Flex Container Mixins
+
+/// @alias flex-container -
+///
+/// @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-flow'
+///
+/// @param {Map} $settings - flexbox container property or alias : flexbox value.
+
+@mixin flex-display($value:flex, $display:false) { 
+  @include flex-container((display:$value), $display);
+}
+
+@mixin flex-direction($value, $display:false) { 
+  @include flex-container((direction:$value), $display);
+}
+
+@mixin flex-wrap($value, $display:false) { 
+  @include flex-container((wrap:$value), $display);
+}
+
+@mixin flex-flow($value, $display:false) { 
+  @include flex-container((flow:$value), $display);
+}
+
+@mixin flex-justify-content($value, $display:false) { 
+  @include flex-container((justify:$value), $display);
+}
+
+@mixin flex-align-items($value, $display:false) { 
+  @include flex-container((items:$value), $display);
+}
+
+@mixin flex-align-content($value, $display:false) { 
+  @include flex-container((content:$value), $display);
+}

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

@@ -0,0 +1,235 @@
+/// Quick mixin to devide a flex item using basis
+///
+/// @author Mark Notton
+///
+/// @access public
+///
+@mixin flex-grid($count, $gutter:$pad) {
+  @if $count <= 1 {
+    @include flex-basis(auto);
+  }
+  @elseif $count > 1 {
+    @if is-number($gutter) and $gutter != null and strip(to-number($gutter)) > 0 {
+      @include flex-basis(calc(100% / #{$count} - #{addUnit($gutter)}));
+    } @else {
+      @include flex-basis(calc(100% / #{$count}));
+    }
+  }
+}
+
+@function _get-next-breakpoint($setting) {
+  @if is_number($setting) and contains(map-values($breakpoints), $setting) {
+    // This gets the next available breakpoint from the list of breakpoints. The if-statment is a check if the last breakpoint item is queried.
+    @return if(index(map-values($breakpoints), $setting) >= length(map-values($breakpoints)), null, nth(map-values($breakpoints), (index(map-values($breakpoints), $setting) + 1)));
+  } @elseif is_string($setting) and map-has-key($breakpoints, $setting) {
+    @return map-get-next($breakpoints, $setting);
+  } @else {
+    @return $setting;
+  }
+}
+
+// 4 $pad $max, 2 0 $medium, $small
+// 4, 2,
+// @include smart-flex-grid('section', 3 $pad, 2 $pad0 $max, 1 $pad0 bottom $large);
+
+@mixin smart-flex-grid($settings...) {
+    $nth : 0;
+    $selector : null;
+
+    $settings-list : _arglist-to-list($settings);
+
+    $multiple-settings : length($settings-list) > 1;
+
+    $sssbreak : null;
+
+    // @debug $multiple-settings;
+
+    @each $settings in $settings-list {
+
+      @if (length($settings) == 1 and is-string(nth($settings, 1))) {
+        // If the current element is the same one that was passed as the first param,
+        // don't bother setting the $selector variable and revert to the more generic first of every element;
+        @if last(last(to-list(&))) != $settings {
+          $selector : $settings;
+        } @else {
+          $selector : '> *';
+        }
+        @include flex-container((direction:row, wrap:wrap, justify:stretch-between));
+      } @else {
+
+        $nth : $nth + 1;
+        $count : null;
+        $gutter : null;
+        $grow : null;
+        $break : null;
+        $next-break : null;
+        $gutter-position : ();
+        $container : null;
+
+        @each $setting in $settings {
+
+          @if is_number($setting) {
+            @if is_null($count) {
+              $count : $setting;
+            } @elseif is_null($gutter) {
+              $gutter : $setting;
+            } @elseif is_null($break) {
+              // $next-break : _get-next-breakpoint($setting);
+              $break : $setting;
+            }
+          }
+          @if is_string($setting) {
+            @if contains((top bottom left right all), $setting) {
+              $gutter-position : append($gutter-position, $setting);
+            } @elseif contains((grow), $setting) {
+              $grow : true;
+            } @elseif map-has-key($breakpoints, $setting) {
+              // $next-break : _get-next-breakpoint($setting);
+              $break : map-get($breakpoints, $setting);
+            }
+          }
+          @if is_map($setting) {
+            $container : $setting;
+          }
+
+              // $next-break : _get-next-breakpoint($setting);
+          //@if is_null($break) and length($settings-list) >= 2 {
+            // $break : nth($breakpoints, $nth);
+
+            // @if $nth == 1 {
+            //   // First
+            //   $break : $max;
+            //   $sssbreak : $max;
+            // }
+
+
+
+            // @if $nth != 1 {
+            //   @debug $break;
+            //   // Other settings
+            //   $break : _get-next-breakpoint($sssbreak);
+            // }
+          //}
+          // $break : if(is_null($break) and $nth == 1, $max, $break);
+          // $next-break : if(is_null($next-break) and $multiple-settings and $nth != 1, _get-next-breakpoint($break), $next-break);
+          // $break : if(is_null($break) and $nth != 1, $next-break, $break);
+        }
+
+        // Set default gutter position if not defined
+        @if length($gutter-position) == 0 { $gutter-position : left right bottom }
+
+        @if not is-null($container) {
+          @include break($break) {
+            @include flex-container($container);
+            @debug $container;
+          }
+        }
+
+        #{if(is-null($selector), '&', $selector)} {
+
+          // max-width:100% / $count;
+
+          @include break($break) {
+
+            @if not is-null($grow) {
+              @include flex-grow(1);
+            }
+
+            @if $count <= 1 {
+              @include flex-basis(auto); @include flex-grow(1);
+            }
+            @elseif $count > 1 {
+              @if is-number($gutter) and $gutter != null and strip(to-number($gutter)) > 0 {
+                @include flex-basis(calc(100% / #{$count} - #{addUnit($gutter)}));
+              } @else {
+                @include flex-basis(calc(100% / #{$count}));
+              }
+            }
+
+
+            // // Margins and their positions
+            // @if contains(left right, $gutter-position, true) {
+            //   // $gutter-position contains BOTH left and right, and nothing more
+            //   margin-left:addUnit($gutter/2);
+            //   margin-right:addUnit($gutter/2);
+            // } @elseif contains(top left, $gutter-position, true) {
+            //   // $gutter-position contains BOTH top and bottom, and nothing more
+            //   margin-top:addUnit($gutter/2);
+            //   margin-bottom:addUnit($gutter/2);
+            // } @elseif contains((left right top bottom), $gutter-position) {
+            //   // $gutter-position contains EITHER left, right, top, bottom
+            //   $gp : _list-items-to-strings($gutter-position);
+
+            //   @if index($gp, 'left') and index($gp, 'right') {
+            //     margin-left:addUnit($gutter/2);
+            //     margin-right:addUnit($gutter/2);
+            //   } @else {
+            //     margin-left  :if(index($gp, 'left'),   addUnit($gutter), null);
+            //     margin-right :if(index($gp, 'right'),  addUnit($gutter), null);
+            //   }
+            //   @if index($gp, 'top') and index($gp, 'bottom') {
+            //     margin-top:addUnit($gutter/2);
+            //     margin-bottom:addUnit($gutter/2);
+            //   } @else {
+            //     margin-top:   if(index($gp, 'top'),    addUnit($gutter), null);
+            //     margin-bottom:if(index($gp, 'bottom'), addUnit($gutter), null);
+            //   }
+
+            // } @elseif contains((all), $gutter-position) {
+            //   margin:addUnit($gutter/2);
+            // }
+
+            // TODO: Fix issue of repeat CSS output. The above code is close.
+            // Margins and their positions
+            @if contains(left right, $gutter-position, true) {
+              // $gutter-position contains BOTH left and right, and nothing more
+              margin-left:addUnit($gutter/2);
+              margin-right:addUnit($gutter/2);
+            } @elseif contains(top left, $gutter-position, true) {
+              // $gutter-position contains BOTH top and bottom, and nothing more
+              margin-top:addUnit($gutter/2);
+              margin-bottom:addUnit($gutter/2);
+            } @elseif contains((left right top bottom), $gutter-position) {
+              // $gutter-position contains EITHER left, right, top, bottom
+              $gp : _list-items-to-strings($gutter-position);
+              $ml : null;
+              $mr : null;
+              $mt : null;
+              $mb : null;
+
+              @if index($gp, 'left') and index($gp, 'right') {
+                $ml:addUnit($gutter/2);
+                $mr:addUnit($gutter/2);
+              }
+              @if index($gp, 'top') and index($gp, 'bottom') {
+                $mt:addUnit($gutter/2);
+                $mb:addUnit($gutter/2);
+              }
+
+              @each $g in $gp {
+                margin-left  : if(is-null($ml), if($g == 'left', addUnit($gutter), 0), $ml);
+                margin-right : if(is-null($mr), if($g == 'right', addUnit($gutter), 0), $mr);
+                margin-top   : if(is-null($mt), if($g == 'top', addUnit($gutter), 0), $mt);
+                margin-bottom: if(is-null($mb), if($g == 'bottom', addUnit($gutter), 0), $mb);
+              }
+
+            } @elseif contains((all), $gutter-position) {
+              margin:addUnit($gutter/2);
+            }
+          }
+        }
+        //}
+
+        // $next-break : map-get-next($breakpoints, $break);
+
+        // @debug "Setting: " + #{$nth};
+        // @debug "count: " + #{$count};
+        // @debug "gutter: " + #{$gutter};
+        // @debug "break: " + #{$break};
+        // @debug "next-break: " + #{$next-break};
+        // @debug "gutter-positions: " + #{$gutter-position};
+        // @debug "---";
+      }
+
+    }
+}