guff.scss

@mixin reset(){

  html, body, div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  b, u, i, center,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, embed,
  figure, figcaption, footer, header, hgroup,
  menu, nav, output, ruby, section, summary,
  time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
  }

  article, aside, details, figcaption, figure,
  footer, header, hgroup, main, menu, nav, section {
    display: block;
  }

  ol, ul {
    list-style: none;
  }

  a {
    text-decoration: none;
  }

  blockquote, q {
    quotes: none;
  }

  blockquote:before, blockquote:after,
  q:before, q:after {
    content: '';
    content: none;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
  }

  * {
    @include box-sizing(border-box);
  }

}

$rem-base: 16px !default;

$line-height-base: 26px !default;

$type-rhythm-ratio: 1.14 !default;

$desktop: "(min-width: 1024px)" !default;

$tablet: "(min-width: 768px) and (max-width: 1023px)" !default;

$mobile: "(max-width: 767px)" !default;

$grid-columns: 12 !default;

$grid-gutter: 20px !default;

$grid-padding: 20px !default;

$grid-max-width: 1024px !default;

@function _strip-unit($num) {
  @if type-of($num) != "number" {
    @warn "num: #{$num} is not a number";
    @return null;
  }
  @return $num / ($num * 0 + 1);
}

@function _convert-to-rem($value, $base-value: $rem-base)  {
  @if type-of($value) != "number" {
    @warn "value: #{$value} is not a number";
    @return null;
  }
  @if type-of($base-value) != "number" {
    @warn "base-value: #{$base-value} is not a number";
    @return null;
  }
  $value: _strip-unit($value) / 16 * 1rem;
  @if (_strip-unit($value) == 0) { $value: 0; } // Turn 0rem into 0
  @return $value;
}

@function rem-calc($values, $base-value: $rem-base) {
  @if type-of($values) != "number" {
    @warn "values: #{$values} is not a number";
    @return null;
  }
  @if type-of($base-value) != "number" {
    @warn "base-value: #{$base-value} is not a number";
    @return null;
  }
  $max: length($values);
  @if $max == 1 { @return _convert-to-rem(nth($values, 1), $base-value); }
  $remValues: ();
  @for $i from 1 through $max {
    $remValues: append($remValues, _convert-to-rem(nth($values, $i), $base-value));
  }
  @return $remValues;
}

@function span($cols: 4) {
  @if type-of($cols) != "number" {
    @warn "cols: #{$cols} is not a number";
    @return null;
  }
  @if type-of($grid-columns) != "number" {
    @warn "grid-columns: #{$grid-columns} is not a number";
    $valid: false;
  }
  @return percentage($cols/$grid-columns);
}

@mixin container {
  $valid: true;
  @if type-of($grid-max-width) != "number" {
    @warn "grid-max-width: #{$grid-max-width} is not a number";
    $valid: false;
  }
  @if type-of($rem-base) != "number" {
    @warn "rem-base: #{$rem-base} is not a number";
    $valid: false;
  }
  @if $valid == true {
    width: 100%;
    max-width: $grid-max-width;
    @include clear;
  }
}

@mixin col-container {
  $valid: true;
  @if type-of($grid-max-width) != "number" {
    @warn "grid-max-width: #{$grid-max-width} is not a number";
    $valid: false;
  }
  @if type-of($rem-base) != "number" {
    @warn "rem-base: #{$rem-base} is not a number";
    $valid: false;
  }
  @if $valid == true {
    width: 100%;
    text-align: justify !important;
    text-justify: distribute-all-lines;
    font-size: 0 !important;
    max-width: $grid-max-width;
    & > * {
      text-align: left;
      font-size: rem-calc($rem-base);
    }
    &:after {
      content: '';
      display: inline-block;
      width: 100%;
    }
  }
}

@mixin span($cols: 4, $padding: true) {
  $valid: true;
  @if type-of($cols) != "number" {
    @warn "cols: #{$cols} is not a number";
    $valid: false;
  }
  @if type-of($padding) != "bool" {
    @warn "padding: #{$padding} is not a boolean";
    $valid: false;
  }
  @if type-of($grid-columns) != "number" {
    @warn "grid-columns: #{$grid-columns} is not a number";
    $valid: false;
  }
  @if type-of($grid-padding) != "number" {
    @warn "grid-padding: #{$grid-padding} is not a number";
    $valid: false;
  }
  @if $valid == true {
    $column-width: $cols / $grid-columns;
    @if $padding != false {
    padding-left: $grid-padding;
    padding-right: $grid-padding;
    }
    width: percentage($column-width);
    float: left;
  }
}

@mixin col($span: 4) {
  $valid: true;
  @if type-of($span) != "number" {
    @warn "span: #{$span} is not a number";
    $valid: false;
  }
  @if type-of($grid-max-width) != "number" {
    @warn "grid-max-width: #{$grid-max-width} is not a number";
    $valid: false;
  }
  @if type-of($grid-columns) != "number" {
    @warn "grid-columns: #{$grid-columns} is not a number";
    $valid: false;
  }
  @if type-of($grid-gutter) != "number" {
    @warn "grid-gutter: #{$grid-columns} is not a number";
    $valid: false;
  }
  @if $valid == true {
    $column-width: 100% / $grid-columns;
    $gutter: ($grid-gutter * 0.75) / $grid-max-width * 100;
    $span-width: $span * $column-width;
    width: $span-width - $gutter;
    vertical-align: top;
    display: inline-block;
  }
}

@mixin offset($cols: 4) {
  $valid: true;
  @if type-of($cols) != "number" {
    @warn "cols: #{$cols} is not a number";
    $valid: false;
  }
  @if type-of($grid-columns) != "number" {
    @warn "grid-columns: #{$grid-columns} is not a number";
    $valid: false;
  }
  @if $valid == true {
    margin-left: percentage($cols/$grid-columns);
  }
}

@mixin breakpoint($querystring) {
  $valid: true;
  @if type-of($querystring) != "string" {
    @warn "querystring: #{$querystring} is not a string";
    $valid: false;
  }
  @if $valid == true {
    @media #{$querystring} {
      @content;
    }
  }
}

@mixin transition ($property: 0.15s) {
  $valid: false;
  @if type-of($property) == "string" {
    $valid: true;
  }
  @if type-of($property) == "list" {
    $valid: true;
  }
  @if type-of($property) == "number" {
    $valid: true;
  }
  @if $valid == true {
    @include prefixer(transition, $property, webkit moz ms);
  } @else {
    @warn "property: #{$property} is not a valid argument";
  }
}

@mixin transform($property: none) {
  $valid: false;
  @if type-of($property) == "string" {
    $valid: true;
  }
  @if type-of($property) == "list" {
    $valid: true;
  }
  @if $valid == true {
    @include prefixer(transform, $property, webkit moz ms);
  } @else {
    @warn "property: #{$property} is not a valid argument";
  }
}

@mixin box-sizing ($box: border-box) {
  $valid: true;
  @if type-of($box) != "string" {
    @warn "box: #{$box} is not a string";
    $valid: false;
  }
  @if $valid == true {
    @include prefixer(box-sizing, $box, webkit moz);
  }
}

@mixin prefixer($property, $value, $prefixes: webkit moz) {
  $valid: false;
  @if type-of($property) == "string" {
    $valid: true;
  }
  @if type-of($prefixes) == "list" {
    $valid: true;
  }
  @if type-of($prefixes) == "string" {
    $valid: true;
  }
  @if $valid == true {
    @each $prefix in $prefixes {
      #{"-" + $prefix + "-" + $property}: $value;
    }
    #{$property}: $value;
  } @else {
    @warn "Invalid arguments supplied";
  }
}

@mixin ellipsis($width: 100%) {
  $valid: true;
  @if type-of($width) != "number" {
    @warn "width: #{$width} is not a number";
    $valid: false;
  }
  @if $valid == true {
    display: inline-block;
    max-width: $width;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@mixin clear($extend: true) {
  $valid: true;
  @if type-of($extend) != "bool" {
    @warn "extend: #{$extend} is not a boolean";
    $valid: false;
  }
  @if $valid == true {
    @if $extend {
      @extend %clear;
    }
    @else {
      #{'&'}:after {
      content:"";
      display:table;
      clear:both;
      }
    }
  }
}

%clear:after {
  content:"";
  display:table;
  clear:both;
}

@mixin hide-text($extend: true) {
  $valid: true;
  @if type-of($extend) != "bool" {
    @warn "extend: #{$extend} is not a boolean";
    $valid: false;
  }
  @if $valid == true {
    @if $extend {
      @extend %hide-text;
    }
    @else {
    overflow:hidden;
    text-indent: 100%;
    white-space: nowrap;
    }
  }
}

%hide-text {
  overflow:hidden;
  text-indent: 100%;
  white-space: nowrap;
}

@mixin inline-list($float: true) {
  $valid: true;
  @if type-of($float) != "bool" {
    @warn "float: #{$float} is not a boolean";
    $valid: false;
  }
  @if $valid == true {
    list-style-type:none;
    padding:0;
    margin:0;
    overflow:hidden;
    > li{
        @if $float == true {
        display:block;
        float:left;
      } @else {
        display: inline-block;
      }
    }
  }
}

@mixin safe-rem($property: font-size, $num: 14){
  $valid: true;
  @if type-of($property) != "string" {
    @warn "property: #{$property} is not a string";
    $valid: false;
  }
  @if type-of($num) != "number" {
    @warn "num: #{$num} is not a number";
    $valid: false;
  }
  @if $valid == true {
    #{$property}: #{_strip-unit($num)}px;
    #{$property}: rem-calc($num);
  }
}

@mixin type($rem-base: $rem-base,$line-height-base: $line-height-base, $type-rhythm-ratio: $type-rhythm-ratio){
  $valid: true;
  @if type-of($rem-base) != "number" {
    @warn "rem-base: #{$rem-base} is not a number";
    $valid: false;
  }
  @if type-of($line-height-base) != "number" {
    @warn "line-height: #{$line-height-base} is not a number";
    $valid: false;
  }
  @if type-of($type-rhythm-ratio) != "number" {
    @warn "type-rhythm-ratio: #{$type-rhythm-ratio} is not a number";
    $valid: false;
  }
  @if $valid == true {

    $h6-size: round(_strip-unit($rem-base) * $type-rhythm-ratio);
    $h5-size: round($h6-size * $type-rhythm-ratio);
    $h4-size: round($h5-size * $type-rhythm-ratio);
    $h3-size: round($h4-size * $type-rhythm-ratio);
    $h2-size: round($h3-size * $type-rhythm-ratio);
    $h1-size: round($h2-size * $type-rhythm-ratio);

    @if unit($line-height-base) == "px" {

      body {
        line-height: _strip-unit($line-height-base) / _strip-unit($rem-base);
      }
    } @else {
      body {
        line-height: $line-height-base;
      }
    }

    h1 {
      @include safe-rem(font-size, $h1-size);
    }

    h2 {
      @include safe-rem(font-size, $h2-size);
    }

    h3 {
      @include safe-rem(font-size, $h3-size);
    }

    h4 {
      @include safe-rem(font-size, $h4-size);
    }

    h5 {
      @include safe-rem(font-size, $h5-size);
    }

    h6 {
      @include safe-rem(font-size, $h6-size);
    }

    p {
      @include safe-rem(font-size, $rem-base);
    }
  }
}