_unsemantic-vars.scss

// These mixins are intended to be used from:
//
//   * unsemantic-grid-base.scss
//   * unsemantic-grid-mobile.scss
//   * unsemantic-grid-desktop.scss
//   * _unsemantic-grid-responsive.scss
//   * etc.
//
// But could be used in your own styles, via class
// names of your choice. You don't *have* to be
// unsemantic. That's entirely up to you! :)

// If you don't need IE7 support, set a flag in the top-level scope.
//
//   $unsemantic-ie7-support: false
//
// If you do not declare that variable, the default setting is true.

// `Variables.
//----------------------------------------------------------------------------------------------------

$unsemantic-ie7-support: true !default;

$unsemantic-prefix-suffix-support: true !default;

$unsemantic-push-pull-support: true !default;

$container-max-width: 1200px !default;

$gutter-half: 10px !default;

$container-gutter: $gutter-half !default;

$lang-forward: left !default;

$lang-reverse: right !default;

// `IE7 Crap.
//----------------------------------------------------------------------------------------------------

//
// Keeping the vomit-worthy code in one spot.
// This is seriously bad, but IE7 is bad too.
//
// To prevent this from being generated in your CSS, set
// $unsemantic-ie7-support to `false` at a higher scope.
//

//
// Push
//
@mixin ie7-push($decimal) {
  @if $unsemantic-ie7-support {
    $str: "expression(Math.floor(#{$decimal} * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px')";

    $val: unquote($str);

    /* <IE7> */
    *#{$lang-forward}: $val;
    /* </IE7> */
  }
}

//
// Pull
//
@mixin ie7-pull($decimal) {
  @if $unsemantic-ie7-support {
    $str: "expression(Math.floor(#{$decimal * -1} * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px')";

    $val: unquote($str);

    /* <IE7> */
    *#{$lang-forward}: $val;
    /* </IE7> */
  }
}

//
// Width
//
@mixin ie7-width($decimal) {
  @if $unsemantic-ie7-support {
    $str: "expression(Math.floor(#{$decimal} * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px')";

    $val: unquote($str);

    /* <IE7> */
    *width: $val;
    /* </IE7> */
  }
}

//
// Faux gutter
//
@mixin ie7-margin($margin) {
  $str: "expression((!this.className.match(/grid-[1-9]/) && this.currentStyle.display === 'block' && this.currentStyle.width === 'auto') && '#{$margin}')";

  $val: unquote($str);

  @if $unsemantic-ie7-support {
    // [1] Remove padding, since IE7 doesn't
    //     support "box-sizing: border-box".

    /* <IE7> */
    *padding-left: 0;
    *padding-right: 0;
    /* </IE7> */

    //
    // [2] Fake what would normally be padding,
    //     for browsers that support box-sizing.

    & > * {
      /* <IE7> */
      *margin-left: $val;
      *margin-right: $val;
      /* </IE7> */
    }
  }
}

// `Creates scoped placeholders.
//----------------------------------------------------------------------------------------------------

@mixin unsemantic-grid-placeholders($_SCOPE: null) {
  $scope: "";

  // Set if it exists.
  @if $_SCOPE {
    $scope: #{$_SCOPE + "-"};
  }

  // ========================
  // `Clear floated elements.
  // ========================

  // http://sonspring.com/journal/clearing-floats

  %#{$scope}clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
  }

  // http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified

  %#{$scope}clearfix:before,
  %#{$scope}clearfix:after {
    content: ".";
    display: block;
    overflow: hidden;
    visibility: hidden;
    font-size: 0;
    line-height: 0;
    width: 0;
    height: 0;
  }

  %#{$scope}clearfix:after {
    clear: both;
  }

  @if $unsemantic-ie7-support {
    %#{$scope}clearfix {
      /* <IE7> */
      *zoom: 1;
      /* </IE7> */
    }
  }

  // ===========
  // `Container.
  // ===========

  %#{$scope}grid-container {
    @extend %#{$scope}clearfix;
    margin-left: auto;
    margin-right: auto;

    // Set if it exists.
    @if $container-max-width {
      max-width: $container-max-width;
    }

    // Set if it exists.
    @if $container-gutter {
      padding-left: $container-gutter;
      padding-right: $container-gutter;
    }
  }

  // ==============
  // `Grid columns.
  // ==============

  %#{$scope}grid-columns-all {
    @extend %#{$scope}clearfix;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

    // Set if it exists.
    @if $gutter-half {
      padding-left: $gutter-half;
      padding-right: $gutter-half;
      @include ie7-margin($gutter-half);
    }
  }

  // Remove padding, if it's being used
  // as a parent for other grid columns.
  %#{$scope}grid-parent {
    padding-left: 0;
    padding-right: 0;
  }

  // Offset the left/right margin of an
  // element that contains grid units.
  %#{$scope}grid-offset {
    @extend %#{$scope}clearfix;
    clear: both;

    // Set if it exists.
    @if $gutter-half {
      margin-left: -1 * $gutter-half;
      margin-right: -1 * $gutter-half;
    }
  }

  // Allow column swapping?
  @if $unsemantic-push-pull-support {
    // Allows columns to be offset +/- left.
    %#{$scope}grid-columns-push-pull {
      position: relative;
    }
  }

  // ===============================
  // `Hide on desktop/tablet/mobile.
  // ===============================

  %#{$scope}hide {
    display: none !important;
  }

  // ==============
  // `Grid columns.
  // ==============

  // For 5 through 95 percent.
  @for $i from 1 through 19 {
    $num: $i * 5;
    $decimal: $num / 100;
    $percent: $num * 1%;

    %#{$scope}grid-#{$num} {
      float: $lang-forward;
      width: $percent;
      @include ie7-width($decimal);
    }

    // Allow empty columns?
    @if $unsemantic-prefix-suffix-support {
      // Prefix, to add extra columns before.
      %#{$scope}prefix-#{$num} {
        margin-#{$lang-forward}: $percent;
      }

      // Suffix, to add extra columns after.
      %#{$scope}suffix-#{$num} {
        margin-#{$lang-reverse}: $percent;
      }
    }

    // Allow column swapping?
    @if $unsemantic-push-pull-support {
      // Push columns forward.
      %#{$scope}push-#{$num} {
        #{$lang-forward}: $percent;
        @include ie7-push($decimal);
      }

      // Pull columns backward.
      %#{$scope}pull-#{$num} {
        #{$lang-forward}: $percent * -1;
        @include ie7-pull($decimal);
      }
    }
  }

  // For one-third and two-thirds.
  @for $i from 1 through 2 {
    $num: $i * 33;
    $one-third: 1 / 3;
    $decimal: $i * $one-third;
    $percent: ($num + $decimal) * 1%;

    // Percentage based widths.
    %#{$scope}grid-#{$num} {
      float: $lang-forward;
      width: $percent;
      @include ie7-width($decimal);
    }

    // Allow empty columns?
    @if $unsemantic-prefix-suffix-support {
      // Prefix, to add extra columns before.
      %#{$scope}prefix-#{$num} {
        margin-#{$lang-forward}: $percent;
      }

      // Suffix, to add extra columns after.
      %#{$scope}suffix-#{$num} {
        margin-#{$lang-reverse}: $percent;
      }
    }

    // Allow column swapping?
    @if $unsemantic-push-pull-support {
      // Push columns forward.
      %#{$scope}push-#{$num} {
        #{$lang-forward}: $percent;
        @include ie7-push($decimal);
      }

      // Pull columns backward.
      %#{$scope}pull-#{$num} {
        #{$lang-forward}: $percent * -1;
        @include ie7-pull($decimal);
      }
    }
  }

  // Full width, just line-break.
  %#{$scope}grid-100 {
    clear: both;
    width: 100%;
  }
}

// `Consume global placeholders. For: mobile, tablet, desktop, etc.
//----------------------------------------------------------------------------------------------------

@mixin unsemantic-grid-base($_LIST...) {
  // ===========
  // `Container.
  // ===========

  .grid-container {
    @extend %grid-container;
  }

  // ========================
  // `Clear floated elements.
  // ========================

  .clear {
    @extend %clear;
  }

  .clearfix {
    @extend %clearfix;
  }

  // =============================
  // `Parent and offset overrides.
  // =============================

  // Remove padding, if it's being used
  // as a parent for other grid columns.
  .grid-parent {
    @extend %grid-parent;
  }

  // Offset the left/right margin of an
  // element that contains grid units.
  .grid-offset {
    @extend %grid-offset;
  }

  // ==============
  // `Grid columns.
  // ==============

  @if type-of($_LIST) == arglist {
    @each $_SCOPE in $_LIST {
      $class: "";

      // Class prefix.
      @if $_SCOPE and $_SCOPE != desktop {
        $class: #{$_SCOPE + "-"};
      }

      // For 5 through 100 percent.
      @for $i from 1 through 20 {
        $num: $i * 5;

        .#{$class}grid-#{$num} {
          @extend %grid-columns-all;
        }
      }

      // For one-third and two-thirds.
      @for $i from 1 through 2 {
        $num: $i * 33;

        .#{$class}grid-#{$num} {
          @extend %grid-columns-all;
        }
      }
    }
  }
}

// `Consume placeholders at breakpoint scope.
//----------------------------------------------------------------------------------------------------

@mixin unsemantic-grid-scoped($_SCOPE: null) {
  $scope: "";
  $class: "";

  // Set if it exists.
  @if $_SCOPE {
    $scope: #{$_SCOPE + "-"};
  }

  // Class prefix.
  @if $_SCOPE and $_SCOPE != desktop {
    $class: #{$_SCOPE + "-"};
  }

  // ================
  // `Hide on mobile.
  // ================

  .hide-on-#{$_SCOPE} {
    @extend %#{$scope}hide;
  }

  // ==============
  // `Grid columns.
  // ==============

  // Full width, just line-break.
  .#{$class}grid-100 {
    @extend %#{$scope}grid-100;
  }

  // For 5 through 95 percent.
  @for $i from 1 through 19 {
    $num: $i * 5;

    // Percentage based widths.
    .#{$class}grid-#{$num} {
      @extend %#{$scope}grid-#{$num};
    }

    // Allow empty columns?
    @if $unsemantic-prefix-suffix-support {
      // Prefix, to add extra columns before.
      .#{$class}prefix-#{$num} {
        @extend %#{$scope}prefix-#{$num};
      }

      // Suffix, to add extra columns after.
      .#{$class}suffix-#{$num} {
        @extend %#{$scope}suffix-#{$num};
      }
    }
  }

  // For one-third and two-thirds.
  @for $i from 1 through 2 {
    $num: $i * 33;

    // Percentage based widths.
    .#{$class}grid-#{$num} {
      @extend %#{$scope}grid-#{$num};
    }

    // Allow empty columns?
    @if $unsemantic-prefix-suffix-support {
      // Prefix, to add extra columns before.
      .#{$class}prefix-#{$num} {
        @extend %#{$scope}prefix-#{$num};
      }

      // Suffix, to add extra columns after.
      .#{$class}suffix-#{$num} {
        @extend %#{$scope}suffix-#{$num};
      }
    }
  }

  // ==============================================================
  // `Push & Pull, to rearrange column order (for potential "SEO").
  // ==============================================================

  // Allow column swapping?
  @if $unsemantic-push-pull-support {
    // For 5 through 95 percent.
    @for $i from 1 through 19 {
      $num: $i * 5;

      // Push columns forward.
      .#{$class}push-#{$num} {
        @extend %#{$scope}push-#{$num};
        @extend %#{$scope}grid-columns-push-pull;
      }

      // Pull columns backward.
      .#{$class}pull-#{$num} {
        @extend %#{$scope}pull-#{$num};
        @extend %#{$scope}grid-columns-push-pull;
      }
    }

    // For one-third and two-thirds.
    @for $i from 1 through 2 {
      $num: $i * 33;

      // Push columns forward.
      .#{$class}push-#{$num} {
        @extend %#{$scope}push-#{$num};
        @extend %#{$scope}grid-columns-push-pull;
      }

      // Pull columns backward.
      .#{$class}pull-#{$num} {
        @extend %#{$scope}pull-#{$num};
        @extend %#{$scope}grid-columns-push-pull;
      }
    }
  }
}