@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; }
}