@import '_conditionals.scss';
@import '_measurements.scss';
@import '_shims.scss';

// Outer block sets a max width
@mixin outer-block {
  margin: 0 auto;
  width: auto;
  max-width: 960 + $gutter*2;
  @extend %contain-floats;
  @include ie-lte(8) {
    width: 1020px;
  }
}

// Outer block usage:
//
// .outer-block {
//    @include outer-block;
// }

// Inner block sets gutters to align content with header and footer
@mixin inner-block {
  padding-left: $gutter-half;
  padding-right: $gutter-half;
  @include media(tablet) {
    padding-left: $gutter;
    padding-right: $gutter;
  }
}

// Inner block usage:
//
// .inner-block {
//    @include inner-block;
// }

@import '_conditionals.scss';
@import '_measurements.scss';
@import '_shims.scss';

// Outer block sets a max width
@mixin outer-block {
  margin: 0 auto;
  width: auto;
  max-width: 960 + $gutter*2;
  @extend %contain-floats;
  @include ie-lte(8) {
    width: 1020px;
  }
}

// Outer block usage:
//
// .outer-block {
//    @include outer-block;
// }

// Inner block sets either margin or padding
// to align content with header and footer
@mixin inner-block($margin-or-padding: padding) {
  #{$margin-or-padding}-left: $gutter-half;
  #{$margin-or-padding}-right: $gutter-half;
  @include media(tablet) {
    #{$margin-or-padding}-left: $gutter;
    #{$margin-or-padding}-right: $gutter;
  }
}

// Inner block usage:
//
// By default, inner block sets padding
// .inner-block {
//    @include inner-block;
// }
//
// To set margins instead of padding:
// .inner-block {
//    @include inner-block(margin);
// }

Set inner block to use padding or margin
Set inner block to use padding or margin

If .inner-block has a top or bottom border, margins must be used rather
than padding - or the border is too wide.
Here, left and right padding is the default and the same mixin can be
used to set left and right margins (see usage example).
