@import 'conditionals'; @import 'css3'; @import 'measurements'; @import 'shims';

$site-width: 960px;

// An extendable selector to wrap your entire site content block // It limits the sites width to be 960px wide and maintains consistent margins // on the site of the page and shrinks the margins for mobile. // // Usage: // // page-container { // @extend %site-width-container; // }

%site-width-container {

max-width: $site-width;

@include ie-lte(8) {
  width: $site-width;
}

margin: 0 $gutter-half;

@include media(tablet) {
  margin: 0 $gutter;
}

@include media($min-width: ($site-width + $gutter * 2)) {
  margin: 0 auto;
}

}

// An extendable selector to outdent to the full page-width // So that you can create elements that take up the gutters on the side of the // page and butt up to the edge of the browser on smaller screens (rather than // leaving a gutter at the edge of the page). // // Usage: // // .hero-image-container { // @extend %outdent-to-full-width; // } %outdent-to-full-width {

margin-left: -$gutter-half;
margin-right: -$gutter-half;

@include media(tablet) {
  margin-left: -$gutter;
  margin-right: -$gutter;
}

}

// An extendable selector to define a row for grid columns to sit in // // Usage: // // .grid-row { // @extend %grid-row; // }

%grid-row {

@extend %contain-floats;
margin: 0 (-$gutter-half);

}

// A mixin for a grid column // Creates a cross browser grid column with a standardised gutter between the // columns. Widths should be defined as fractions of the full desktop width // they want to fill. By default they break to become full width at tablet size // but that can be configured to be desktop using the `$full-width` argument. // // Usage: // // .column-quarter { // @include grid-column( 1/4 ); // } // .column-half { // @include grid-column( 1/2 ); // } // .column-third { // @include grid-column( 1/3 ); // } // .column-two-thirds { // @include grid-column( 2/3 ); // } // .column-desktop-third { // @include grid-column( 1/3, $full-width: desktop ); // }

@mixin grid-column($width, $full-width: tablet, $float: left) {

@include media($full-width) {
  float: $float;
  width: percentage($width);
}

@include ie-lte(7) {
  width: (($site-width + $gutter) * $width) - $gutter;
}

padding: 0 $gutter-half;
@include box-sizing(border-box);

}

// OLD deprecated grid mixins // You should migrate to the mixins above in the future

// Outer block sets a max width @mixin outer-block {

@warn "The @mixin outer-block is deprecated and should be updated to use new grid helpers";
margin: 0 auto;
width: auto;
max-width: 960 + $gutter * 2;
@extend %contain-floats;

@include ie-lte(8) {
  width: 1020px;
}

}

// Inner block sets either margin or padding // to align content with header and footer @mixin inner-block($margin-or-padding: padding) {

@warn "The @mixin inner-block is deprecated and should be updated to use new grid helpers";
#{$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;
}

}